对此，我们将讨论以下内容： 什么是反应？ 使用 React 进行渲染 Google 如何处理页面 React 的常见 SEO 问题 目录 首先，什么是 React？ 使用 React 进行渲染，简史 Google 如何处理页面 React 的常见 SEO 问题 1.选择正确的渲染策略 加载时间 解决方案 2.正确使用状态码 3. 避免使用散列 URL 解决方案 4. 相关时使用 <a href> 链接 解决方案 5. 避免关键 HTML 的延迟加载 解决方案 6.不要忘记基础知识 概括 作者 首先，什么是 React？ React 是由 Meta（以前称为 Facebook）开发的开源 JavaScript 库，用于构建 Web 和移动应用程序。React 的主要特征是它是声明性的、基于组件的，并且允许轻松操作DOM 。 理解组件的最简单方法是将它们视为插件，就像在 WordPress 中一样。这些允许开发人员使用MUI和Tailwind UI等组件库快速构建设计并向页面添加功能。 如果您想了解更多关于为什么开发人员喜欢 React 的信息，请从这里开始。 命令式和声明式编程 反应组分 使用 React 进行渲染，简史 React实现了App Shell 模型。这意味着大多数（如果不是全部）内容默认为客户端呈现 (CSR)。 CSR 意味着服务器不是在来自服务器的初始 HTTP 响应（HTML 源）中发送整个页面内容，而是 HTML 主要包含 React JS 库。 它还包括指向包含JSON 数据的各种 JavaScript 和包含 React 组件的 JS 文件的链接。
通过检查 HTML 源代码
您可以立即得知您的网站正在客户端呈现。为此，请右键单击并选择“查看页面源代码”（或 CTRL + U/CMD + U）。 netlfix.com 主页的 HTML 源代码的屏幕截图。 如果您没有看到很多 HTML 行，则您的应用程序可能正在客户端呈现。 但是，如果您通 象牙海岸 WhatsApp 号码列表 过右键单击并选择“检查元素”（或 F12/CMD + ⌥ + I）来检查元素，您将看到浏览器生成的 DOM（浏览器在其中呈现 JavaScript）。 结果，您可以看到该网站包含大量 HTML。 请注意第一个 <div> 中的 appMountPoint ID。这些元素在单页应用程序 (SPA)中很常见，因此像 React 这样的库知道在哪里插入 HTML。像 Wappalyzer 这样的技术发现工具也非常适合发现库。 编者 注 Ahrefs 的站点审核同时存储服务器发送的原始 HTML 和浏览器中呈现的 HTML，从而可以轻松识别您的站点是否具有客户端呈现的内容。 更好的是，您可以搜索原始 HTML 和渲染的 HTML，以具体查看客户端正在渲染哪些内容。在下面的示例中，您可以看到该站点在客户端呈现关键页面内容，例如 <h1> 标记。 Joshua Hardwick 内容主管 使用 React 构建的网站不同于称为服务器端渲染 (SSR) 的传统方法，后者将使用 PHP 等语言在服务器上渲染内容的繁重工作。 在上面您可以看到服务器如何使用 React 将 JavaScript 渲染为 HTML（稍后会详细介绍）。
这个概念对于使用 PHP
构建的网站（例如 WordPress）是相同的。只是 PHP 被转换为 HTML 而不是 JavaScript。 在 SSR 出现之前，开发人员让它变得更加简单。 他们创建静态的、未更改的 HTML 文档，将它们托管在他们的服务器上，然后立即发送它们。服务器不需要 西班牙 电话号码列表 渲染任何东西，浏览器渲染的也很少。 SPA（包括使用 React 的 SPA）目前正在全面转向这种静态方法。现在，浏览器会在请求 URL 之前将 JavaScript 预渲染为 HTML。这种方法称为静态站点生成（SSG），也称为静态渲染。 事实上，SSR和SSG是相似的。 主要区别在于，SSR 在浏览器请求 URL 时执行渲染，而框架在构建时（当开发人员部署新代码时，或当 Web 管理员请求站点内容时）使用 SSG。 。 SSR 更加动态，但速度较慢，因为服务器在将内容发送到用户浏览器之前呈现内容时存在额外的延迟。 SSG 速度更快，因为内容已经渲染。这意味着您可以立即向用户提供内容（这意味着更快的 TTFB）。
