CSR vs SSR vs Pre-render，我应该选择哪一个？答案

【问题标题】：CSR vs SSR vs Pre-render, which one should I choose?CSR vs SSR vs Pre-render，我应该选择哪一个？
【发布时间】：2019-09-26 00:13:36
【问题描述】：

目前我的项目有两部分，一是登录前，一是登录后。

我想要实现的是，在登录需要快速和 SEO 友好之前，我应该选择预渲染还是 SSR？

登录后，我们可以选择CSR（这样客户端就可以等待页面加载）。

或者，我可以做两个 CSR，一个用于登录前（快速加载），一旦客户端登录，通过 JWT 令牌重定向到登录后 CSR 页面？

谢谢

【问题讨论】：

标签： reactjs server-side-rendering csr

【解决方案1】：

对于需要抓取的页面，CSR 很可能不是一个选项。那么问题就变成了您是选择预渲染还是 SSR。答案是视情况而定。

SEO 内容是静态的，还是在给定时间取决于其他一些后端 API 响应？

如果它是静态的，预渲染对您来说应该足够了。但如果它依赖于其他 API，则内容可能会在运行时发生变化，您必须执行真正的 SSR 才能适应这种情况。不过，SSR 在服务器上的资源密集度更高。

至于登录后部分，因为它可能不应该被机器人抓取，所以对所有登录页面进行CSR是可以的。单独的 CSR 并不意味着您的初始加载速度会明显加快，还有很多因素需要考虑，例如 HTML 文档大小、网络旅行延迟、您自己的服务所依赖的其他服务的响应时间等. 但是，除了使用 service worker 和使用 app-shell 模型，CSR 应该几乎总是比 SSR 更快。我建议研究一下以提高 CSR 速度。 Link

【讨论】：

谢谢杰夫。这真的很有帮助。目前我的网站 SEO 将是静态的。你让我了解动态 SEO 部分。你有什么资源可以分享这个动态的 SEO 吗？谢谢
有什么办法可以同时拥有良好的 seo 和 csr 吗？我有一个动态网站，出于某种原因我不想使用 ssr

【解决方案2】：

视情况而定。

如果 SEO 无关紧要 — 例如一个位于登录屏幕后面的应用程序 — 那么 CSR 很好，你只需要像 ReactJS 这样的东西

如果你需要一个好的 SEO：

a) 如果您可以预测内容在构建时生成它（例如：博客），那么您需要 SSG（在构建时创建的静态内容）并且应该选择像 Gatsby 或NextJS

b) 如果您无法预测内容/可能的请求（例如：搜索页面），服务器将需要按需生成页面，因此您需要动态 SSR（内容创建关于用户访问时间），应该选择 NextJS 之类的东西。

注意：NextJS 允许您在同一个项目中选择性地混合 3 种主要呈现形式。因此，如果您需要 SEO，这是最好的选择。

【讨论】：