CSR vs SSR vs Prerender,我应该选择哪一个?
CSR vs SSR vs Pre-render, which one should I choose?
目前我的项目分为两部分,一是登录前,一是登录后。
我想实现的是,在登录需要快速和SEO友好之前,我应该选择预渲染还是SSR?
登录后,我们可以选择CSR(这样客户端就可以等待页面加载)。
或者,我可以做两个 CSR,一个用于登录前(快速加载),一旦客户端登录,通过 JWT 令牌,重定向到登录后 CSR 页面?
谢谢
对于需要抓取的页面,CSR 很可能不是一个选项。那么问题就变成了你选择预渲染还是SSR。答案是视情况而定。
SEO 内容是静态的,还是取决于其他后端 API 在给定时间的响应?
如果它是静态的,预渲染应该就足够了。但是如果它依赖于其他 APIs,内容可能会在运行时发生变化,你将不得不做真正的 SSR 来适应它。不过,SSR 在服务器上占用的资源更多。
至于登录后的部分,反正应该不会被机器人爬取,所以对所有登录的页面做CSR是可以的。尽管 CSR 本身并不意味着您的初始加载速度会明显加快,但还有很多因素需要考虑,例如 HTML 文档大小、网络传输延迟、您自己的服务的其他服务的响应时间取决于 BUT,以及使用 service worker 和 app-shell 模型,与 SSR 相比,CSR 应该几乎总是更快。我建议研究一下以提高 CSR 速度。 Link
视情况而定。
如果 SEO 无关紧要 — 例如一个位于登录屏幕后面的应用程序 — 那么 CSR 就可以了,你只需要像 ReactJS
这样的东西
如果您需要好的 SEO:
a) 如果您可以预测内容 以在构建时生成它(例如:博客),那么您需要 SSG(在构建时创建的静态内容)并且应该选择 Gatsby 或 NextJS
b) 如果您无法预测content/possible请求(例如:搜索页面),服务器将需要按需生成页面,因此你需要动态 SSR(根据用户访问时间创建的内容)并且应该选择像 NextJS 这样的东西。
注意:NextJS 允许您在同一项目中有选择地混合使用 3 种主要渲染形式。因此,如果您需要 SEO,这是最佳选择。
目前我的项目分为两部分,一是登录前,一是登录后。
我想实现的是,在登录需要快速和SEO友好之前,我应该选择预渲染还是SSR?
登录后,我们可以选择CSR(这样客户端就可以等待页面加载)。
或者,我可以做两个 CSR,一个用于登录前(快速加载),一旦客户端登录,通过 JWT 令牌,重定向到登录后 CSR 页面?
谢谢
对于需要抓取的页面,CSR 很可能不是一个选项。那么问题就变成了你选择预渲染还是SSR。答案是视情况而定。
SEO 内容是静态的,还是取决于其他后端 API 在给定时间的响应?
如果它是静态的,预渲染应该就足够了。但是如果它依赖于其他 APIs,内容可能会在运行时发生变化,你将不得不做真正的 SSR 来适应它。不过,SSR 在服务器上占用的资源更多。
至于登录后的部分,反正应该不会被机器人爬取,所以对所有登录的页面做CSR是可以的。尽管 CSR 本身并不意味着您的初始加载速度会明显加快,但还有很多因素需要考虑,例如 HTML 文档大小、网络传输延迟、您自己的服务的其他服务的响应时间取决于 BUT,以及使用 service worker 和 app-shell 模型,与 SSR 相比,CSR 应该几乎总是更快。我建议研究一下以提高 CSR 速度。 Link
视情况而定。
如果 SEO 无关紧要 — 例如一个位于登录屏幕后面的应用程序 — 那么 CSR 就可以了,你只需要像 ReactJS
这样的东西如果您需要好的 SEO:
a) 如果您可以预测内容 以在构建时生成它(例如:博客),那么您需要 SSG(在构建时创建的静态内容)并且应该选择 Gatsby 或 NextJS
b) 如果您无法预测content/possible请求(例如:搜索页面),服务器将需要按需生成页面,因此你需要动态 SSR(根据用户访问时间创建的内容)并且应该选择像 NextJS 这样的东西。
注意:NextJS 允许您在同一项目中有选择地混合使用 3 种主要渲染形式。因此,如果您需要 SEO,这是最佳选择。