Vercel

我们可以简单地通过使用 Vercel API Routes 将 vite-plugin-ssr 部署到 Vercel，如果想要高级 Vercel 功能（例如 ISR 和 Edge 中间件），我们可以使用 vite-plugin-vercel。

API Routes

我们可以简单地通过创建 Vercel API Route api/ssr.js 服务端渲染应用程序，将我们的 vite-plugin-ssr 应用程序部署到 Vercel

Example：github.com/brillout/vite-plugin-ssr_vercel.

确保在你的 Vercel dashboard 中正确设置 OUTPUT DIRECTORY，请参考示例中的 readme.md 说明

使用 Vercel API Routes 是部署到 Vercel 的一种可靠方式，因为 API Routes 是 Vercel 的核心功能：它会一直存在，最重要的是，它非常稳定。（而 Vercel 的 Build Output API 不断更新，偶尔会发生重大变化。）一旦我们设置了服务器端渲染 API Routes，我们就可以期待它在可预见的未来发挥作用

vite-plugin-vercel

vite-plugin-vercel 为所有 Vercel 功能提供零配置支持，包括 Incremental Static Regeneration (ISR) 和 Edge 中间件

如果我们只预渲染我们的页面的一部分，我们也可以使用 vite-plugin-vercel 来静态部署我们的预渲染页面，同时动态地提供我们的非预渲染页面

请参考 vite-plugin-ssr + vite-plugin-vercel 安装说明：vite-plugin-vercel > Usage with vite-plugin-ssr.

vite-plugin-vercel 底层使用 Vercel 的 Build Output API

Build Output API

为了获得最大的灵活性和配置选项，我们还可以直接使用 Build Output API](https://vercel.com/docs/build-output-api/v3)

Example: github.com/brillout/vite-plugin-ssr_vercel_build-output-api.

数据 APIs (GraphQL, RESTful, RPC)

Vercel API Routes 仅适用于 Vercel 的平台；我们不能在本地运行它们。

这意味着我们需要两次集成我们的数据层：

使用 Vercel 的 API Routes，用于 Vercel 部署
使用本地服务器（例如 Express.js）进行开发

这通常很容易实现，因为大部分数据层工具使用 single HTTP endpoint 进行集成。例如：

GraphQL 集成 single HTTP endpoint /graphql.
Telefunc 集成 single HTTP endpoint /_telefunc.

换言之，我们通过以下方式添加数据层：

创建新的 Vercel API Route，集成 single endpoint
创建到我们本地开发服务器（例如 Express.js）的新路由，集成 single endpoint

使用 SSR 时，我们建议使用 RPC 而不是 GraphQL，这在大多数情况下会极大地简化应用并提高开发速度

✍ Edit this page