技术栈选型
面向新手的 Cloudflare 技术栈选型指南:Astro、Hono、React Router、Next.js/OpenNext 分别什么时候用。
一句话定位
如果你准备把产品部署到 Cloudflare,这篇帮你快速判断:内容站用 Astro,轻后端/API 用 Hono,产品全栈用 React Router;只有明确需要 Next.js 生态时,再上 Next.js + OpenNext。
很多人一上来就被这些名字绕晕:Astro、Hono、React Router、Next.js、OpenNext、Durable Objects……看起来都能做网站,但它们解决的问题并不一样。
对新手来说,真正难的不是「不会写代码」,而是不知道该先用哪套组合,才不会把自己带进不必要的复杂度里。
这篇文章我从项目类型出发,不讲框架宣传语。你要做内容站、API、产品后台,还是已有 Next.js 项目迁移?不同目标,对应的首选技术栈差别很大。
如果你只是想按 01MVP 主线判断第一版产品该选什么方向,先看 技术栈选择。本页负责 Cloudflare 具体技术组合。
快速抄作业
更新时间:2026-04-15
- 博客、文档、营销站、SEO 页面:优先用 Astro。
- API、Webhook、边缘服务、AI 中转层:优先用 Hono。
- 新手做 SaaS / Dashboard / 产品 MVP:优先用 React Router + Hono 模板。
- 已有 Next.js 项目,或明确需要 App Router / RSC / Server Actions / ISR:用 Next.js + OpenNext。
- 如果你只是因为「Next.js 很流行」才想选 Next.js:先停一下,Cloudflare 上新项目通常有更轻的选择。
默认建议
如果你是新手,且项目不是必须用 Next.js,先从 Astro 或 React Router/Hono 开始。选型的目标不是「最全」,而是让你更快上线、少踩部署和运行时兼容的坑。
为什么这个问题会让新手卡住
新手选 Cloudflare 技术栈时,最常踩的坑不是「技术太少」,而是「选项太多,而且名字都像是同一个层级」。
但其实,这几类东西并不在同一层:
- Astro / React Router / Next.js 更像是你怎么组织页面和前端应用。
- Hono 更像是你怎么写 API、Webhook 和边缘后端。
- OpenNext 不是一个新框架,而是把 Next.js 适配到 Cloudflare Workers 的桥。
- Durable Objects、D1、KV、R2 则是你在 Cloudflare 上存状态和数据的能力。
所以更好的判断顺序,不是「我喜欢哪个框架」,而是先问:
- 你的项目主要是内容,还是产品?
- 你的核心复杂度在页面,还是在后端/API?
- 你是新项目,还是已经有一套既有技术栈要迁移?
把这三个问题想清楚,技术栈往往就不难选了。
快速决策树
只想最快做决定,可以按这个顺序问自己:
- 这个项目主要是内容、文章、文档、Landing Page 吗?
→ 用 Astro。 - 这个项目主要是 API、Webhook、轻量后端、边缘逻辑吗?
→ 用 Hono。 - 这个项目是带登录、表单、Dashboard、数据库的产品界面吗?
→ 先用 React Router + Hono。 - 你已经有 Next.js 项目,或非 Next.js 不可吗?
→ 用 Next.js + OpenNext。 - 你需要实时房间、多人协作、在线聊天、游戏状态同步吗?
→ 在上面的前端栈之外,加 Durable Objects。
如果你现在就要开工,我会怎么帮你做决定
如果你把需求丢给我,我通常会先这样分:
第一类:内容型项目
比如博客、教程站、文档站、产品官网、课程说明页、SEO 落地页。
这类项目最重要的是页面加载快、搜索引擎友好、写内容方便,别为了少量交互引入过重的应用框架。
这种情况我几乎都会先推 Astro。它的默认思路就是:能静态就静态,能少发 JS 就少发 JS。这也是为什么很多内容站放到 Cloudflare 上时,Astro 会比 Next.js 更像「顺手的工具」。
第二类:后端/API 型项目
比如飞书、微信、Stripe、Resend 的 Webhook,AI 模型中转层,登录鉴权接口,文件上传签名接口,边缘缓存和转发逻辑。
这类项目你未必需要一个完整的页面框架。你需要的是:路由清楚、中间件好写、和 Workers 运行时兼容、部署简单。
这种情况,Hono 往往是最顺的选择。它够轻,也很符合「在 Worker 里写 HTTP 服务」的感觉。
第三类:产品型项目
比如 SaaS MVP、用户后台、管理面板、内部工具、带登录和数据库的产品页面。
这类项目通常同时需要 React 组件体系、路由、表单、登录、API、数据库、UI 组件库。
这时候如果你还用 Astro 做主体,会开始觉得「能做,但不够顺」。而如果你直接上 Next.js,又可能在 Cloudflare 上承担一些你当前根本用不到的复杂度。
所以对大多数新手来说,这类项目我更推荐先用 React Router + Hono,尤其是 react-router-hono-fullstack-template 这种已经把前端和 API 骨架搭好的模板。
第四类:已有 Next.js 项目,或者非 Next.js 不可
有一种情况非常明确:你不是在重新选,而是在延续已有选择。
比如项目本来就是 Next.js 写的,团队已经大量使用 Next.js App Router,业务依赖 Next.js 特有的能力或插件生态,你已经围绕 Server Actions、RSC、Route Handlers 组织代码。
这时候就不要为了「Cloudflare 更轻」硬换框架。直接走 Next.js + OpenNext,通常是更务实的路线。
选型总表
| 你要做什么 | 首选技术栈 | 推荐起点 | 为什么 | 不适合什么情况 |
|---|---|---|---|---|
| 博客、文档、内容站、SEO 页面 | Astro | --framework=astro 或 astro-blog-starter-template | 默认尽量少发客户端 JS,适合内容优先、性能优先的站点 | 大部分页面都在登录后,交互和服务端状态很重 |
| 营销站 + 少量交互组件 | Astro + Islands | --framework=astro | 主体静态化,局部用 React/Vue/Svelte 交互 | 需要完整 React 应用状态管理 |
| 纯 API、Webhook、AI 中转、轻量后端 | Hono | npm create hono@latest | 足够轻,和 Workers 运行时贴得近,适合写路由、中间件、鉴权 | 你需要完整页面框架、SSR 和复杂前端路由 |
| React SPA + 后端 API | Vite React + Hono | cloudflare/templates/vite-react-template | 前端静态资源 + Hono API 可以放在同一个 Worker 里 | 页面强依赖 SEO,必须服务端渲染 |
| Dashboard、管理后台、SaaS MVP | React Router + Hono + shadcn/ui | cloudflare/templates/react-router-hono-fullstack-template | 一次拿到 React 前端路由、Hono API、Tailwind、shadcn/ui,适合快速做产品界面 | 你需要服务端渲染的 React Router,而不是 SPA |
| 需要 SSR 的 React 全栈应用,但不依赖 Next.js | React Router 全栈模式 | --framework=react-router | Cloudflare 官方一等支持,配合 Cloudflare Vite plugin,本地开发更接近 Workers 生产环境 | 你明确需要 Next.js 的 App Router、RSC 或生态插件 |
| 已有 Next.js 项目,或必须用 Next.js | Next.js + OpenNext | --framework=next | 能保留 Next.js 生态与功能,用 OpenNext 适配到 Workers | 新项目很简单、团队还没被 Next.js 绑定 |
| 实时聊天、多人协作、房间状态 | Durable Objects + 前端框架 | durable-chat-template 或自选前端栈 | Durable Objects 适合强一致、按房间/对象划分的状态 | 普通 CRUD / 内容站,不需要这么早引入 |
| AI 聊天、图片生成、RAG Demo | Workers AI / AI Gateway + Hono 或 React Router | llm-chat-app-template、text-to-image-template | 模板能快速跑通 Cloudflare AI 能力 | 复杂产品建议先用 Hono/React Router 搭主架构,再接 AI |
先看项目,再看框架:一个更实用的判断方式
很多教程喜欢从框架特性开始讲,比如 SSR、RSC、Islands、Edge Runtime。
这些当然重要,但如果你是第一次做 Cloudflare 项目,更实用的做法是反过来问:
1. 我的页面是不是以「读」为主?
如果用户进来主要是阅读内容、看介绍、搜索资料,而不是频繁操作后台,那优先考虑 Astro。
说白了:读多于写,Astro 往往就对了。
2. 我的核心工作是不是处理请求?
如果你的主要任务是接 webhook、鉴权、转发请求、拼接模型 API、写边缘逻辑,那优先考虑 Hono。
说白了:请求多于页面,Hono 往往就对了。
3. 我的项目是不是「像一个产品」而不是「像一个网站」?
如果它有账号体系、表单、控制台、工作区、数据列表、操作流,那就别再把它当成内容站来设计了。优先考虑 React Router + Hono。
说白了:交互多于展示,React Router/Hono 往往更顺。
4. 我是不是已经被 Next.js 绑定了?
如果答案是「是」,那别绕了。直接用 OpenNext 把 Next.js 跑在 Cloudflare Workers 上。
说白了:已经是 Next.js,就继续 Next.js。
OpenNext 和 React Router + Hono 怎么选
这是最容易纠结的一组。
选 Next.js + OpenNext,如果你符合这些情况
- 你已经有一个 Next.js 项目,要迁移到 Cloudflare Workers。
- 你明确需要 App Router、React Server Components、Route Handlers、Server Actions、ISR。
- 你的团队非常熟 Next.js,不想换心智模型。
- 你能接受多一层 OpenNext 适配,并愿意用
preview在workerd运行时里测试。
启动命令:
pnpm create cloudflare@latest my-next-app --framework=next或者按 OpenNext 文档显式指定 Workers:
pnpm create cloudflare@latest my-next-app --framework=next --platform=workers选 React Router + Hono,如果你符合这些情况
- 你是新项目,不需要继承 Next.js 代码。
- 你要做的是 Dashboard、后台、工具型产品、SaaS MVP。
- 你希望前端路由和后端 API 更直接:React 负责界面,Hono 负责
/api/*。 - 你希望模板自带 Tailwind / shadcn/ui,少花时间搭 UI 基础设施。
启动命令:
pnpm create cloudflare@latest -- --template=cloudflare/templates/react-router-hono-fullstack-template注意这个模板是 SPA 取向
react-router-hono-fullstack-template 更适合「React SPA + Hono API」的产品后台。如果你要的是服务端渲染的 React Router 应用,优先用 --framework=react-router。
一个最常见的误判:把 Next.js 当成默认答案
很多人会下意识觉得:React 项目 = Next.js。
这在很多场景里没错,但放到 Cloudflare 上,最好再多问一句:我真的需要 Next.js 的这些能力吗?
如果你并不需要 App Router、React Server Components、Server Actions、Next.js 特定插件生态、已有 Next.js 代码资产,那你其实是在为「可能用得到」付出复杂度,而不是为「现在必须用」付出复杂度。
对新手来说,最稳的起步方式通常不是最强,而是最少多余层。这也是为什么我会说:新项目里,Next.js 应该是「明确需要再上」,而不是「默认就上」。
Astro、Hono、Next.js 的边界
Astro:内容优先,不是「弱」
Astro 很适合内容站,不是因为它只能做静态站,而是因为它默认让你少发 JS。博客、文档、课程站、产品营销页,通常都是 Astro 的舒适区。
如果后面需要表单、登录、少量动态接口,可以再接 Workers、Hono 或 Astro 的 Cloudflare adapter,不用一开始就上重型全栈框架。
Hono:后端优先,不是完整产品框架
Hono 更像一个轻量 Web 后端框架。它适合写 API、Webhook、鉴权中间件、AI 中转、文件上传签名、边缘缓存逻辑。
如果你要做完整产品界面,可以让 Hono 只负责 API,再搭配 Vite React、React Router 或 Astro。
Next.js:功能强,但别默认上
Next.js 很强,尤其是你需要 App Router、RSC、SSR/SSG/ISR、复杂数据加载和 Next 生态时。
但在 Cloudflare 上,它通常意味着你要理解 Next.js -> OpenNext -> Workers 这层适配链路。对新手来说,如果项目并没有 Next.js 专属需求,React Router/Hono 往往更清爽。
几个典型场景,我会直接怎么选
场景 1:我要做一个教程站 / 文档站
直接选 Astro。原因很简单:内容是主角,性能和 SEO 很重要,页面大多数时候不需要复杂客户端状态。
场景 2:我要做一个收款页 + 产品介绍页
先选 Astro。如果后面有表单提交、支付回调、邮件通知,再用 Hono 或 Workers API 去补动态部分。
场景 3:我要做一个用户后台
直接选 React Router + Hono。这类项目最怕的是一开始把主要精力花在框架兼容和 SSR 心智负担上,而不是先把业务流跑起来。
场景 4:我要做一个 AI 工具
如果它主要是一个输入框、调模型、展示结果、保存少量历史,那通常可以从 Hono + React Router 或官方 AI 模板起步。
如果只是做 API 中转或 Agent/BFF,甚至只用 Hono 都够了。
场景 5:我已经有 Next.js 项目,想迁到 Cloudflare
直接走 Next.js + OpenNext。迁移项目时,最重要的通常不是「理想中的最佳栈」,而是最少重写成本。
数据库和存储怎么顺手搭
框架只解决「代码怎么组织」。Cloudflare 上还要按数据形态选存储:
| 你要存什么 | 推荐 Cloudflare 产品 | 常见搭配 |
|---|---|---|
| 关系型数据、轻量 SaaS 数据 | D1 | Hono / React Router / Next.js |
| 缓存、配置、会话类 KV 数据 | KV | Hono / Workers |
| 图片、文件、音频、导出文件 | R2 | Hono / Astro / Next.js |
| 实时房间、多人协作、强一致对象状态 | Durable Objects | Hono / React Router |
| 已有 Postgres / MySQL | Hyperdrive | React Router / Next.js / Hono |
| AI 语义搜索 | Vectorize | Hono / Workers AI |
我的新手推荐组合
| 项目类型 | 直接选这个 |
|---|---|
| 个人网站、教程站、内容站 | Astro |
| 产品 Landing Page | Astro |
| 微信/飞书/Stripe Webhook | Hono |
| AI API 中转、模型网关、轻量 BFF | Hono |
| SaaS MVP、Dashboard、管理后台 | React Router + Hono |
| SEO 很重要的 React 全栈应用 | React Router 全栈模式 |
| 已有 Next.js 项目迁移 Cloudflare | Next.js + OpenNext |
| 必须用 Next.js 生态插件 | Next.js + OpenNext |
如果你下午就要开工,我会这么选:
- 做内容/教程/营销页:Astro。
- 做产品后台/MVP:
react-router-hono-fullstack-template。 - 做 API/自动化/AI 中转:Hono。
- 已有 Next.js 包袱:OpenNext。
给新手的最短版本
如果你看完还是有点纠结,记住这一版就够了:
- 先做站点内容:Astro
- 先做 API 和自动化:Hono
- 先做产品 MVP:React Router + Hono
- 已经在 Next.js 上:OpenNext
不要把这件事想成「我要选一个最先进、最万能、未来五年都不后悔的框架」。
更现实的目标是:选一个能让你这一版产品最快上线、最少踩坑、以后也还能接着长大的技术栈。
延伸资源
- Cloudflare Workers:Astro 官方指南
- Cloudflare Workers:React Router 官方指南
- Cloudflare Workers:Hono 官方指南
- Cloudflare Workers:Next.js 官方指南
- OpenNext Cloudflare Adapter
- Cloudflare Workers Templates
如果你还在搭整体独立开发环境,可以继续看 独立开发者工具栈。