您的渲染方式会影响您的 SEO（CSR 与 SSR 与动态渲染）

Highway Under Construction

最近我做了一个关于渲染如何影响 SEO 的小演讲。我从几张幻灯片开始 动态渲染架构 ，并试图朝着第一原则倒退。我或多或少地了解了互联网的历史。一路走来，我意识到有很多网络基础知识经常被掩盖。 我们有很棒的工具，比如 React 和服务器端渲染 (SSR)，但是这些工具为一些工程师可能不理解的问题提供了解决方案。 自 90 年代以来，并不是每个人都在构建网站，因此 NextJS 之类的工具解决的很多问题都没有得到很好的理解。让任何面试候选人比较 CSR 和 SSR，你不可避免地会得到 SSR 更适合 SEO 的答案。但为什么？ 为什么 SSR 在 SEO 方面有所作为？

这篇文章将尝试从 Web 的基础开始回答这个问题。我们将看看：

什么是网站？什么是爬虫？
什么是渲染？什么是 CSR 和 SSR？
这对 SEO 有何影响？
我在生产中看到了什么？

这主要来自我的笔记，所以期待更多的叙述而不是精致和完美的东西。在此过程中，我已经链接到有用的资源。试着继续从根本上思考问题。如果您在阅读“啊哈，但是 xyz 库解决了这个问题！”时对自己进行了思考！然后问问自己它是如何解决的。拉扯线程可能是学习的好方法。

什么是网站？

我能想象的最简单的网站是一个单一的静态 html 文件。

堆栈闪电链接

HTML 是标记——它可以包含文本、图像、视频、css、Javascript 等内容。您可以将标签放在其他标签中（如正文中的 h3），这使其具有层次结构。就其本身而言，阅读起来很无聊，因此我们使用 Chrome 或 Firefox 等网络浏览器来查看它。

Nice pixels!

一个观察结果是 浏览器将 HTML 转换为屏幕上的像素。 它获取 HTML，解析它，构建一个内存数据结构来表示它并与之交互（ 一颗树 ——还记得我们说过 HTML 是嵌套/分层的吗？），做一些数学来计算布局，然后 画它 屏幕上。

我写了 HTML，现在呢？

至此，我们的内容有了 HTML，并且有一个浏览器来显示它。人类（和机器人）现在在 Internet 上查看我们的页面。

但是，如果您曾经发布过自己的博客或网站，那么您可能对这种视觉效果很熟悉。

If you build it…they might not come

可悲的是，简单地把东西放到互联网上就像往大海里丢了一块鹅卵石——涟漪并不那么明显。我们需要一种将流量引导到我们网站的方法。人们如何找到网站？通过使用搜索引擎！搜索引擎如何找到网站？通过爬行。

什么是网络爬虫？

系统设计面试时间——我们需要构建一些东西来抓取和索引互联网。这存在（谷歌），所以它必须是可能的。一个如何工作？或许是这样的：

1. 获取一个非常大的种子 URL 列表/队列（可能是 1000、10,000 等等）
2. 弹出第一个 URL。发出 HTTP GET 请求并下载该站点的 HTML。
3. 解析 HTML。看着那（这中的标签、标题和内容。 尝试创建一个小摘要或 片段 本站的 . （还以某种方式存储和索引所有这些内容。暂时超出范围。）
4. 在解析 HTML 时，找到所有超链接标签。看看他们的 链接 属性，并提取它们指向的 URL。在步骤 1 中将其添加到队列中
5. 回到步骤 1，然后循环。

这是一个严重的过度简化，但它是一种学习爬行的原始方式。如果需要，您可以编写一个小脚本来执行此操作。 Google 编写了一个更复杂的爬虫，称为 GoogleBot，将在本文中出现。

基于第 3 步，我们可以说（除其他外） 爬虫将 HTML 转换为搜索结果片段。

GoogleBot turning HTML into search results

现在，要记住的一个关键点是 爬虫使用 HTML .如果我们希望我们的一方被抓取和索引，我们必须为他们提供 HTML。这似乎很明显，但多年来 Web 开发已经发生了变化。您最后一次编写 HTML 文件是什么时候？这些天来，我们的大部分开发都是使用 Javascript 库完成的，比如 React 或 Angular。重要的是要了解将代码转换为爬虫可以读取的 HTML 需要一些额外的步骤。为了更好地理解这一事实，让我们快速浏览一下 Web 开发的历史。

Web 开发的历史：静态的 90 年代

在 90 年代，网站大多是静态的，每个人的生活都比较简单。网站通常具有以下结构。

The server returns static HTML files.

存储在服务器上的多个 HTML 文件。请记住，这些都是静态的——没有动态数据。一位开发人员编写了一些 HTML，上传了文件，然后就收工了。

Get your tickets! https://park.org/main.html

机器人和人类会看到同一个网站。不用担心隐形。机器人被赋予了 HTML，所以他们很高兴。 记住，像 HTML 这样的机器人 .

Web 开发的历史：动态的 2000 年代

随着时间的推移，互联网逐渐成熟，人们将它用于更多的事情（它甚至出现了灾难性的泡沫和崩溃！）。电子商务和 myspace 等社交媒体的兴起意味着网站需要处理用户名、产品库存、个人资料图片等动态数据。

静态 HTML 无法处理此问题。 HTML 只是标记——它没有可执行的形式，甚至还没有接近 图灵完备性 .这导致了像 PHP 这样的语言的兴起。方法很简单。

1. 将数据存储在数据库中
2. 使用服务器上的 PHP 文件 (index.PHP) 来响应请求，从数据库中提取数据，将数据嵌入 HTML，并将其返回给任何请求它的人。

PHP would process data and generate HTML to the requestor.

这个过程运行得很好，并且具有将完全填充的 HTML 文件返回给用户/机器人的优点。这意味着机器人仍在获取 HTML，并且可以进行解析、片段和 SEO。

Web 开发的历史：2010 年代的 Javascripting。在客户端上做所有事情！

随着时间的推移，Javascript 变得更加强大和流行。进步如 谷歌的 V8 引擎 意味着 Javascript 现在性能更高。 ES6 为该语言提供了急需的更新，Angular 和 React 等库开始受到关注。 JS 成为众人瞩目的焦点。

自然地，人们开始考虑将更多的应用程序逻辑转移到 Javascript 中，并在浏览器上执行。一方面，服务器维护起来并不便宜，那么为什么不在用户的浏览器中而不是在服务器上执行所有这些周期呢？

With CSR, do most of the heavy lifting in the browser with JS.

请注意，服务器（或 CDN）现在将返回单个 index.html 文件，而不是多个 HTML 文件（因此称为单页应用程序 - SPA）。这个文件大部分是空的——它只包含一个