React SSR、NextJS 与 Chrome 无头预渲染
React SSR, NextJS vs Chrome headless prerendering
对于服务器端渲染，我发现了 2 种方法：
- next.js
- chrome 无头预渲染（例如 react-snap）
NextJs 在 GitHub 上有很多明星和一个很棒的社区，但另一种方法（chrome 无头预渲染）似乎更干净并且需要几乎零配置才能工作。
有没有人有和他们两个一起工作的经验？
每一个的主要优缺点是什么？
（前段时间一直在纠结这个问题，想和大家分享一些个人的看法）
SPA 应用中 SSR 的一些优点
- SEO/SMO - 最理想的因素，实现像标准网站一样的 SPA 可抓取性，
- 性能 - SPA 站点的渲染速度更快，同时预渲染 HTML 个节点，
- 资源 - 就像它总是在服务器呈现的站点中一样，SSR 为您的用户利用现有服务器架构的计算能力。
有用的来源：Server-side vs client-side rendering in React apps, Next.js — React Server Side Rendering Done Right.
SEO 的实际价值是无与伦比的，在撰写本文时主要 Google 可以正确抓取 SPA (insights & analysis)，而对于有机搜索来说它可以被认为足够了通常这是不可接受的对于社交媒体，其中的链接摘录不会对您的业务产生不利影响。
性能案例是有限的一个 - React 应用程序（和一般的 SPA）正在有效地在客户端存储站点。首先 运行 通常：安装离线 Web worker，将大量缓存加载到浏览器中。几乎只有在用户第一次加载网站的情况下才能使这个优点可行。
资源的可用性或其优势与应用架构密切相关，在某些情况下，缓存可能比涉及服务器的性能更高。
使用 NextJS/Gatsby/SSR 应用程序框架
JS 的不断发展的本质正在快速推动这些框架需要与进步竞争的问题。这暗示了在一段时间内落后于其技术最佳功能的事实。
其中一个重要的例子是 React-Router v4 更新 之后的炒作，它风靡一时，但在有很多社区的情况下踩踏了像 NextJS Use with React Router 4 #1632 这样的框架压力，作为开发人员，我们被迫使用提供给我们的架构。
这意味着更少的 CRA（以及一般的 React 标准）和更像 NextJS：
- 应用结构，
next/head，Document，<layout>，
@zeit/next-css、@zeit/next-sass、styled-jsx、static async getInitialProps () 模式,next-redux-wrapper、next-redux-saga、<Link prefetch> 来自 next/link,- BE 路由来自
/pages/，文件来自 /static/ 等
并使打补丁的 'feel' 像成熟的 CRA 一样工作。
另一个失败点是标准的无 SSR 应用程序不会很容易地移植到像 NextJS/Gatsby 这样的 SSR 解决方案，它们有自己的规则和架构。顶多一开始就逼着做这样的决定。
无头预渲染
使您的应用程序免受 SSR 应用程序内解决方案的限制。假设 SPA 站点消耗 API 而不在服务器上呈现，因此许多 patterns/packages 还没有准备好从头开始进行 SSR，可能会污染您的标准代码库。
虽然它可能不是最好的优化来为您的应用程序提供 SSR，但如果您寻求 SEO/SEM。
是非常简单直接的解决方案
自动工具（如您提供的 react-snap）可能会遇到一些问题 Caveats，包括正确快照正确 HTML 输出的问题网站（例如，对 SEO 最有价值的网站）。
虽然纯粹用于 SEO 的 SSR 方法没有任何问题，但有一个合理的事实，即在不久的将来，任何爬虫都将在 SPA 的最佳爬网能力方面取得进展，因此在一段时间后，完整的 SSR 解决方案可能不是一个优势。
对于服务器端渲染，我发现了 2 种方法：
- next.js
- chrome 无头预渲染（例如 react-snap）
NextJs 在 GitHub 上有很多明星和一个很棒的社区，但另一种方法（chrome 无头预渲染）似乎更干净并且需要几乎零配置才能工作。
有没有人有和他们两个一起工作的经验？
每一个的主要优缺点是什么？
（前段时间一直在纠结这个问题，想和大家分享一些个人的看法）
SPA 应用中 SSR 的一些优点
- SEO/SMO - 最理想的因素，实现像标准网站一样的 SPA 可抓取性，
- 性能 - SPA 站点的渲染速度更快，同时预渲染 HTML 个节点，
- 资源 - 就像它总是在服务器呈现的站点中一样，SSR 为您的用户利用现有服务器架构的计算能力。
有用的来源：Server-side vs client-side rendering in React apps, Next.js — React Server Side Rendering Done Right.
SEO 的实际价值是无与伦比的，在撰写本文时主要 Google 可以正确抓取 SPA (insights & analysis)，而对于有机搜索来说它可以被认为足够了通常这是不可接受的对于社交媒体，其中的链接摘录不会对您的业务产生不利影响。
性能案例是有限的一个 - React 应用程序（和一般的 SPA）正在有效地在客户端存储站点。首先 运行 通常：安装离线 Web worker，将大量缓存加载到浏览器中。几乎只有在用户第一次加载网站的情况下才能使这个优点可行。
资源的可用性或其优势与应用架构密切相关，在某些情况下，缓存可能比涉及服务器的性能更高。
使用 NextJS/Gatsby/SSR 应用程序框架
JS 的不断发展的本质正在快速推动这些框架需要与进步竞争的问题。这暗示了在一段时间内落后于其技术最佳功能的事实。
其中一个重要的例子是 React-Router v4 更新 之后的炒作，它风靡一时，但在有很多社区的情况下踩踏了像 NextJS Use with React Router 4 #1632 这样的框架压力，作为开发人员，我们被迫使用提供给我们的架构。
这意味着更少的 CRA（以及一般的 React 标准）和更像 NextJS：
- 应用结构，
next/head，Document，<layout>， @zeit/next-css、@zeit/next-sass、styled-jsx、static async getInitialProps ()模式,next-redux-wrapper、next-redux-saga、<Link prefetch>来自next/link,- BE 路由来自
/pages/，文件来自/static/等
并使打补丁的 'feel' 像成熟的 CRA 一样工作。
另一个失败点是标准的无 SSR 应用程序不会很容易地移植到像 NextJS/Gatsby 这样的 SSR 解决方案，它们有自己的规则和架构。顶多一开始就逼着做这样的决定。
无头预渲染
使您的应用程序免受 SSR 应用程序内解决方案的限制。假设 SPA 站点消耗 API 而不在服务器上呈现，因此许多 patterns/packages 还没有准备好从头开始进行 SSR，可能会污染您的标准代码库。
虽然它可能不是最好的优化来为您的应用程序提供 SSR，但如果您寻求 SEO/SEM。
是非常简单直接的解决方案自动工具（如您提供的 react-snap）可能会遇到一些问题 Caveats，包括正确快照正确 HTML 输出的问题网站（例如，对 SEO 最有价值的网站）。
虽然纯粹用于 SEO 的 SSR 方法没有任何问题，但有一个合理的事实，即在不久的将来，任何爬虫都将在 SPA 的最佳爬网能力方面取得进展，因此在一段时间后，完整的 SSR 解决方案可能不是一个优势。