Cloudflare Pages 是如何支持SSR框架的?

Cloudflare Pages 原本是一个静态网站托管平台，但它也支持 SSR（服务器端渲染） 框架，主要是通过 Cloudflare Workers 来实现的。它的 SSR 机制适用于 Next.js、Nuxt、Remix、Qwik、SolidStart、SvelteKit 等流行的全栈框架。各种框架无需修改即可部署在Pages，主要是通过各种垫片实现的，详情请接着看下面内容。

Cloudflare Pages 支持 SSR 的方式

Cloudflare Pages 并不能直接执行服务器端代码（因为它是静态托管平台），但是它可以结合 Cloudflare Functions（基于 Workers）来支持 SSR。其原理如下：

1. 通过 Cloudflare Functions（Workers）处理 SSR 请求

Cloudflare Pages 主要托管静态资源（HTML、CSS、JS）。
Cloudflare Functions（Workers）处理动态请求，执行 SSR 代码，并返回 HTML 响应。
请求流程：
1. 用户访问某个页面（如 /about）。
2. Cloudflare Pages 发现该路由需要服务器端渲染。
3. Cloudflare Functions 运行 SSR 代码，获取数据，生成 HTML。
4. HTML 返回给用户，完成 SSR 渲染。

不同框架在 Cloudflare Pages 上的支持情况

1. Next.js

Cloudflare Pages 官方支持 Next.js，但 仅支持 App Router（基于 React Server Components） ，不支持老的 Pages Router（getServerSideProps 等 API）。

使用 @cloudflare/next-on-pages 适配 Next.js。
自动将 SSR 代码运行在 Cloudflare Functions 上。

2. Nuxt 3

Nuxt 3 支持 Cloudflare 作为适配器，使用 nitro 运行在 Cloudflare Functions 上。
需要在 nuxt.config.ts 中指定 preset: 'cloudflare'。

3. Remix

Remix 原生支持 Cloudflare，默认可以运行在 Cloudflare Workers 上。
Remix 使用 @remix-run/cloudflare 作为运行时适配器。

4. SvelteKit

SvelteKit 通过 adapter-cloudflare 适配 Cloudflare Pages。
配置 svelte.config.js 选择 @sveltejs/adapter-cloudflare。

5. Qwik

Qwik 支持 Cloudflare Pages，使用 @builder.io/qwik-city 进行适配。

Cloudflare Pages 适配 SSR 框架的优劣

✅ 优势

免费计划可用（但有请求限制）。
基于 Cloudflare Workers，全球边缘网络加速。
轻量、无服务器架构，低成本运行 SSR。
支持多种框架（Next.js、Nuxt、Remix、SvelteKit 等） 。

❌ 限制

不支持 Node.js 原生 API （例如 fs、path）。
仅支持部分 SSR 框架的特定模式（Next.js 只能用 App Router）。
Cloudflare Functions（Workers）有 CPU 时间限制（50ms） ，计算密集型任务可能受影响。

如何部署 SSR 框架到 Cloudflare Pages

以 Next.js 为例：

安装 Cloudflare CLI
复制代码
```
sh
复制编辑
npm install -g wrangler
```

安装 Next.js 适配器

perl 复制代码

sh
复制编辑
npm install @cloudflare/next-on-pages

修改 next.config.js

javascript 复制代码

js
复制编辑
const { withCloudflare } = require('@cloudflare/next-on-pages/plugin');

module.exports = withCloudflare({
  experimental: {
    appDir: true, // 必须使用 App Router
  },
});

构建和部署

ini 复制代码

sh
复制编辑
npm run build
npx wrangler pages deploy .vercel/output --project-name=my-nextjs-app

部署完成后，Cloudflare Pages + Cloudflare Functions 会自动处理 SSR 请求。

总结

Cloudflare Pages 通过 Cloudflare Functions（Workers） 实现 SSR，适用于 Next.js（App Router）、Nuxt、Remix、SvelteKit 等框架。如果你的项目需要 低延迟的全球分发 ，并且可以接受 无 Node.js API 的限制，那么 Cloudflare Pages 是一个不错的选择。