理解服务器端渲染

什么是服务器端渲染（SSR）？

这个问题对很多人来说往往比较棘手，答案五花八门，从“它适合静态网站”到“我用它来做博客”不一而足。但它究竟是什么呢？让我们一起来探讨一下，包括它的优缺点以及一些实用链接。

什么是服务器端渲染？

在我们深入解释之前，让我们先简单回顾一下许多现代 Web 应用程序的当前背景。

单页应用程序（SPA）

在我们当前的 Web 生态系统中，由于有大量的前端库和框架，当请求页面时，服务器通常会做出如下响应：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/app.js"></script>
  </body>
</html>

当用户浏览应用程序时，元素<div id="root"></div>将使用 Javascript 注入页面。

这意味着网站的所有 JavaScript 都需要先下载到浏览器才能显示任何内容。这意味着缓慢的网络连接可能会对应用程序的初始加载时间产生很大影响。但是，一旦加载完成，后续页面的加载速度就会很快，网站的交互性也会更强。

服务器端渲染（SSR）

另一方面，当导航到同一页面时，服务器渲染方法会让服务器向浏览器发送一个包含页面内容的可读 HTML 文件。当您导航到另一个页面时，相同的过程会再次发生。

我为什么要使用它？

SSR 有很多优点，仅举几例：

🔎 更好的 SEO

Google 的爬虫在索引网站之前执行 JavaScript 的能力有限，这意味着您的网页内容可能无法被引用。而 SSR 则可以完整地渲染页面，从而全面提升 SEO。

🏎 更快的首次有意义的绘制

如前所述，SSR 不会要求您完全下载网站的 JavaScript，这意味着更快的初始加载速度。这对于硬件较旧或网速较慢的用户来说非常有用。根据您的目标受众，这可能是一个重要因素。

✅ 非常适合静态网站

SSR 非常适合静态网站，例如博客、文档、作品集和登录页面，这些网站的交互性通常有限。

👥 社交媒体优化

每当有人在 Facebook 或 Twitter 上分享您的应用程序时，都会显示它的预览，包括标题、描述和图像。

有什么缺点吗？

当然也存在一些缺点，这完全取决于您正在开发的应用程序类型。

📈 更多服务器请求

每个新页面都需要一个新的服务器请求。虽然这些请求通常很短且轻量，但务必牢记这一点。

🐌 页面渲染速度较慢

SPA 可以更快地注入和渲染每个页面，因为 JavaScript 会在首次访问网站时进行初始加载。而 SSR 则会抓取整个页面，因此渲染速度会稍慢一些。

🕹 互动性较差

想象一下，如果 Trello 或 Gmail 使用 SSR，您必须在每次用户交互时完全重新加载页面，这会影响整体体验。

有用的链接

以下是我推荐的一些链接：

构建 Vue.js 服务器渲染应用程序：Nuxt.js。

构建 React 服务器渲染应用程序：Gatsby.js、Next.js。Firebase团队对 SSR 进行了

精彩的讲解。

我希望您喜欢这篇文章并从中学到一些东西。

欢迎在 Twitter 上关注我@christo_kade，了解我后续文章的更新。我还会分享很多关于 JS 和 CSS 的有趣内容 ✨

喜欢那篇文章的横幅广告吗？看看我为 DEV 制作的横幅广告生成器吧！

文章来源：https://dev.to/christopherkade/understanding-server-side-rendering-3lk5