静かな森
·
把 SSR 交给 Cloudflare：Landing 从 Next.js 迁到 React Router 的两日
内容提要
LobeHub的Landing站点从Next.js迁移到React Router，以降低算力成本。通过将SSR交给Cloudflare缓存，确保响应仅随URL变化，从而提高缓存效率。迁移过程中优化了数据请求、缓存策略和主题处理，最终实现了更高的性能和更低的成本，整个过程在两天内完成。
关键要点
-
LobeHub的Landing站点从Next.js迁移到React Router，主要是为了降低算力成本。
-
迁移过程中将SSR交给Cloudflare缓存，确保响应仅随URL变化，从而提高缓存效率。
-
优化了数据请求、缓存策略和主题处理，以实现更高的性能和更低的成本。
-
整个迁移过程在两天内完成，主要由Claude Code和Codex两只agent分头进行。
-
迁移的核心原则是SSR响应必须只随URL变化，任何cookie或用户代理的变化都会导致缓存失效。
延伸解读
迁移的动机与挑战
LobeHub的Landing站点迁移的主要动机是降低算力成本。原有的Next.js架构在处理动态内容时，导致每次请求都需回源计算，增加了运营成本。迁移到React Router后，通过将SSR交给Cloudflare缓存，确保响应仅随URL变化，从而提高了缓存效率，降低了成本。
缓存策略的重要性
在迁移过程中，LobeHub特别强调了缓存策略的设计。通过明确设置Cache-Control头，确保Cloudflare能够独占缓存权，避免了与Vercel CDN的冲突。这种策略不仅提高了缓存命中率，还有效降低了源站的压力，提升了整体性能。
SSR与Prerender的区别
文章中提到SSR和Prerender的不同，SSR响应可以缓存，但仍需回源，而Prerender则是直接生成静态HTML，首次访问即为缓存命中。通过对特定路径进行Prerender，LobeHub能够将首次请求的MISS转变为永久的HIT，从而进一步优化性能。
延伸问答
为什么LobeHub的Landing站点要从Next.js迁移到React Router？
主要是为了降低算力成本，避免高额的回源计算费用。
迁移过程中如何确保SSR响应可以被Cloudflare缓存？
通过确保SSR响应仅随URL变化，避免cookie或用户代理的变化导致缓存失效。
迁移到React Router后，如何优化数据请求和缓存策略？
将数据请求分流，使用Cache-Control头部明确缓存策略，以提高缓存命中率。
整个迁移过程花费了多长时间？
整个迁移过程在两天内完成。
在迁移中，如何处理主题相关的CSS？
通过将主题相关的CSS编译为静态文件，避免在SSR中读取cookie，从而提高缓存效率。
迁移过程中使用了哪些技术或工具？
主要使用了Cloudflare、React Router和Vercel Function等技术。
