服务器端渲染的优势和起源

注：本文最初发表于我的个人博客。我将其重新发布于此，供 DEV 社区使用。

服务器端渲染（简称 SSR）是一个经常被误解的概念。它是什么？为什么要学习它？我希望通过一个关于服务器端渲染起源的故事来回答这些问题。

优势

在我开始讲述 SSR 的故事和解释之前，有必要先了解一下它的好处。你为什么要关注它？

🔎 搜索引擎优化：内容可被搜索引擎抓取，因此您的网站和网页将出现在 Google 搜索结果中。

📣 社交媒体优化：当人们在 Twitter、Facebook 等平台上发布您的链接时，会显示一个漂亮的预览，其中包含页面标题、描述和图片。

🏎 性能：服务器端渲染的页面将加载得更快，因为内容可以更快地提供给浏览器。

😊 用户体验：与性能类似，内容可以更快提供，因此用户无需等待查看空白页或加载微调器。

我还做了一个播客节目，解释了 SSR 的这些好处：

起源故事

事实上，自从 Java、PHP、Python 和 Ruby 等服务器编程语言出现以来，服务器端渲染就一直存在。如果您曾经在index.php文件或整个 Ruby on Rails 应用程序中编写过动态代码，那么您就已经使用过服务器端渲染了。

这样理解这个概念就容易多了。假设我有一个 PHP 网站，需要从数据库中检索游戏列表。代码可能像这样：

<?php

$game1 = getFirstGameFromDatabase();
$game2 = getSecondGameFromDatabase();

echo "<ul><li>$game1</li><li>$game2</li></ul>";

数据正在服务器上检索并格式化为 HTML 列表。只要您在浏览器中查看此页面，就无需等待任何 JavaScript 运行。数据已经可用，您将立即看到游戏列表。

这对包括搜索引擎和社交媒体在内的所有人来说都是一件好事。数据已经存在于页面源代码中，因此像谷歌甚至 Facebook 这样的网络爬虫可以解析这些内容并显示搜索结果或链接预览。

几十年来，网站都是以这种方式构建的，但我们没有预见到网站的革命性变化——全部使用 JavaScript 在客户端编写。

JavaScript 革命

浏览器功能不断增强，这意味着现在使用 JavaScript 可以实现的功能比 10 年前多得多。那么，开发人员开始做什么呢？用客户端 JavaScript 编写整个网站和 Web 应用。

是的，我主要指的是单页应用 (SPA) 框架的使用。虽然后来出现了许多类似的框架，但 Angular 是推广这种方法的主要工具。想象一下，你可以通过 Ajax 获取一些数据，在标记中添加一些特殊属性，然后你就拥有了一个动态网站，而无需费心处理 PHP 和服务器。

但有一个大问题。你的初始 HTML 不再包含服务器在页面中顺利获取并返回给我们的所有数据。

现在你所拥有的只是这些：

<!-- 😭 My beautiful content is gone! -->
<div id="app"></div>

我敢肯定谷歌对此很不高兴，用户也一样。如果网速慢，JavaScript 可能需要一段时间才能使这个页面可用。

注意：在您说“但是 Google 现在可以抓取 JavaScript！”之前，请记住它存在局限性，并且并非所有网络爬虫都这样做。

如果我说我们应该停止以这种方式构建应用程序，那将是一个相当悲哀的结局，尤其是当它对开发人员如此高效的时候。我们能鱼与熊掌兼得吗？

通用 JavaScript

现在一切都已经整合到了一起。如果我们采用传统的服务器端渲染方法，并将其与 JavaScript 结合起来，会怎么样？

是的，完全可以！这都要归功于Node.js，它实现了所谓的“通用 JavaScript”：既可以在浏览器上运行，也可以在服务器上运行的代码。

假设我们有这样一个简单的 React 组件：

function GamesList({ game1, game2 }) {
  return <ul><li>{game1}</li><li>{game2}</li></ul>;
}

将组件渲染到页面如下：

const games = <GamesList game1="mario" game2="pacman" />;
ReactDOM.render(games, document.getElementById('app'));

这一切都是在客户端完成的。我们如何在服务器端实现同样的功能呢？React 提供了一种方法：

return ReactDOMServer.renderToString(games);

现在，我们不用再传回一个空的 div，而是可以让 Node.js 服务器返回 React 组件的完整 HTML！这和我们之前的 PHP 代码类似。

我确实没有在这个例子中提取数据，但请注意，在服务器端的组件中获取数据是绝对可能的。

注意：你不会失去 SPA 的好处

单页应用程序 (SPA) 之所以受欢迎，不仅因为它开发速度快，还因为它的客户端路由功能。这为最终用户提供了快速的导航体验，而这绝对是我们在开始服务器端渲染时不想失去的体验。值得庆幸的是，您仍然可以选择在客户端使用这些框架来提供这种体验。这意味着初始渲染使用服务器端渲染 (SSR)，但后续导航就像 SPA 一样。

在现实世界中的应用

我希望这篇文章能帮助你理解什么是服务器端渲染，以及为什么要使用它。不过，你可能想知道如何实际使用它。

虽然你可以从零开始尝试让你的应用在 Node.js 上运行，但这需要大量的工作。你必须弄清楚如何正确地实现数据获取、状态融合、CSS 提取以及许多其他功能。

值得庆幸的是，有框架可以解决这一问题：

• 对于 React 项目，我强烈推荐Next.js。
• 对于 Vue.js 项目，请查看Nuxt.js。

另一种既能享受服务器端渲染的优势，又能避免 Node.js 服务器的麻烦的方法是使用静态站点生成器。当然，它也存在一些限制，例如无法实现动态的按需路由（例如用户配置文件），但除此之外，我强烈推荐你看看GatsbyJS。我的个人网站就是由 Gatsby 支持的，我也写过关于它的文章。

我还应该提一下预渲染，它本质上就是你自己的可以解析 JavaScript 的网络爬虫。之后，这些标记的结果会被提供给合适的用户代理，例如搜索引擎。这样做的好处是你无需改变应用的编写方式。Prerender.io是一个提供此功能的热门服务。不过请记住，你仍然需要维护服务器或付费使用服务，而且你不会因此获得任何性能提升。

关于哪个选项最好，没有明确的答案，您只需权衡每个选项的优点和缺点，并决定哪个选项对您来说值得。