带有内容管理系统的 Headless SPA 服务器端方法
Headless SPA Server Side approach with Content Management Sysstem
我正在评估如何使用 React 和 CMS 作为后端在 SPA 应用程序中实现服务器端渲染。
这是我看到的方法 Next.js 建议进行每次渲染并且几乎所有 CMS 系统都建议:
- 用户从节点服务器上的 React 应用程序 运行 请求页面
- 节点服务器通过获取调用从 CMS 请求 JSON 数据
- 然后 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 还在试验混合解决方案,提供仅预生成特定页面的方法。不过,这一切都很新。 :)
我正在评估如何使用 React 和 CMS 作为后端在 SPA 应用程序中实现服务器端渲染。
这是我看到的方法 Next.js 建议进行每次渲染并且几乎所有 CMS 系统都建议:
- 用户从节点服务器上的 React 应用程序 运行 请求页面
- 节点服务器通过获取调用从 CMS 请求 JSON 数据
- 然后 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 还在试验混合解决方案,提供仅预生成特定页面的方法。不过,这一切都很新。 :)