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 为例：

1. 安装 Cloudflare CLI

   sh
   复制编辑
   npm install -g wrangler
   

2. 安装 Next.js 适配器

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

3. 修改 next.config.js

   js
   复制编辑
   const { withCloudflare } = require('@cloudflare/next-on-pages/plugin');
   
   module.exports = withCloudflare({
     experimental: {
       appDir: true, // 必须使用 App Router
     },
   });

4. 构建和部署

   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 是一个不错的选择。