CSR、SSR 与 SSG

Next.js 和 React 之间的主要区别在于应用程序的呈现方式。开箱即用的 React 完全使用客户端渲染 (CSR) 生成，而 Next.js 使用服务器端渲染 (SSR) 或静态站点生成 (SSG)。

那么CSR、SSR、SSG有什么区别呢？

客户端渲染

当 React 应用程序从服务器发送到客户端时，发送的唯一 HTML 是根 HTML 页面，没有任何页面信息。例如，当运行“create-react-app”时，index.html 会在下面发送。

直到 Javascript 被发送到客户端，任何相关项目才会真正出现在页面上。如果您要在浏览器上禁用 Javascript，则该页面将显示为空白。

为了进一步说明 CSR 流程，请参阅下图了解 React 应用程序是如何发送到浏览器的。

那么这有什么关系呢？

使用这种方法的 Web 应用程序有一些缺点。首先，机器人很难抓取您网站上的信息。许多机器人会查看源 HTML 文件以收集信息，如果根文件为空白，机器人将无法正常运行。在尝试为搜索引擎或 Twitter 机器人优化网站时，这会带来潜在的问题。

此外，CSR 应用程序在页面刷新时完全加载。如果它是一个大型应用程序，用户可能需要一段时间才能真正开始与您的站点进行交互。如果用户使用功能较弱的硬件，或者您担心用户会在片刻后离开您的站点，这可能会带来问题。

CSR 应用程序的主要好处是，一旦加载了所有的 javascript，站点就会运行得非常快。该应用程序的工作方式类似于移动应用程序，信息通过 API 发送，从而创建动态体验。

最后，如果您希望构建一个需要登录的应用程序，并将完全动态的信息发送给用户，那么 CSR 应用程序是一个不错的选择。以 Twitter 或 Instagram 为例，每个人在登录这些平台后都会看到不同的东西，因此静态网站永远无法用于此目的。

服务器端渲染

与客户端呈现应用程序相反，在 SSR 应用程序中，服务器编译所有 Javascript 文件，创建 HTML 页面，并将 HTML 文件发送到客户端。在将初始 HTML 页面发送到浏览器后，React 将在创建交互式应用程序时发挥其魔力。请参阅下图了解 SSR 的工作原理。

这就是 Next.js 派上用场的地方。开箱即用的 Next.js 允许开发人员使用 React 创建应用程序，同时也获得 SSR 应用程序的好处。

Next.js 允许机器人理解页面内容，因为 HTML 最初直接发送到客户端，从而改进了搜索引擎优化。这是双赢的；机器人能够在不牺牲用户体验的情况下自由收集有关页面的信息。

然而，一个缺点是每次用户导航到新页面时，服务器都需要重新呈现内容。这会显着增加服务器负载，使服务器成本更加昂贵。不同的技术总是需要权衡取舍；更好的用户体验或昂贵的服务器成本。

另一个缺点是当用户导航到新页面时，呈现新页面需要时间。如果这些加载时间很长，这可能会损害用户体验，尤其是在网站有大量流量的情况下。

静态站点生成

Next.js 支持的最后一种页面生成类型是静态站点生成 (SSG)。这与 CSR 和 SSR 有很大不同，因为所有 HTML 页面都是在站点的构建/部署期间创建的。如果有一个包含 800 个不同对象的数据库，每个对象都绑定到相应的页面，Next.js 将创建 800 个单独的页面作为静态站点托管。请参考下图。

使用静态站点生成的好处是速度和简单性。由于用户与网站交互时不会进行渲染，因此内容几乎是即时发送的。是的，构建站点需要一段时间，并且可能会占用大量存储空间，但它是用户加载页面的最快选择。从托管的角度来看，由于该站点现在仅包含文档，并且可以完全从 S3 托管，而无需管理完整的服务器和后端的复杂性。

使用静态站点生成的缺点是缺乏用户交互性。如果用户的输入动态地改变了用户的体验，这种方法将不起作用。想一想，如果 Twitter 像一个静态网站一样，如果每个人都看到相同的推文，那就不会很有趣了。

结论

Next.js 证明了开发人员可以为他们的项目挑选最佳渲染过程的工具。对于单页应用程序，开发人员将使用传统的 React 应用程序和客户端渲染；对于每个页面都有不同的内容集并且搜索引擎优化很重要的博客，最好使用服务器端渲染；对于静态的个人作品集网站，静态站点生成将是一个不错的选择，前提是用户互动很少。

最后，Next.js 允许开发人员使用 CSR、SSR 和 SSG 之间的混合方法来全面优化用户与应用程序的交互方式。