带有内容管理系统的 Headless SPA 服务器端方法

Headless SPA Server Side approach with Content Management Sysstem

我正在评估如何使用 React 和 CMS 作为后端在 SPA 应用程序中实现服务器端渲染。

这是我看到的方法 Next.js 建议进行每次渲染并且几乎所有 CMS 系统都建议:

  1. 用户从节点服务器上的 React 应用程序 运行 请求页面
  2. 节点服务器通过获取调用从 CMS 请求 JSON 数据
  3. 然后 React App 读取此 JSON 并像 renderToString() 一样将 HTML 转换为 String 并将响应发送回用户。

这种方法的缺点是,如果 JSON 来自 CMS 的数据很大,那么第一次请求需要很长时间。

您有什么替代解决方案建议?

嘿嘿,这里是 Contentful DevRel。

您的担心是绝对有道理的。

这就是 Next.js 最近添加 advanced static pre-generation using getStaticProps 的原因。目标是通过尽可能多的预生成来解决较长的动态响应时间。通过这种方式,用户可以获得快速的初始内容绘制,但仍然可以享受 React 应用程序带来的所有动态优势(Next.js 通常遵循同构 JavaScript 架构)

然后您描述的处理时间从动态 request/response 时间移动到构建过程中。

一般来说,当您不处理数百万页时,我建议您试试静态 HTML。它使应用程序通常更快、更安全、更可靠。对于更复杂和更大的网站,Vercel 还在试验混合解决方案,提供仅预生成特定页面的方法。不过,这一切都很新。 :)