javascript - React 网站如何被搜索引擎索引?

标签 javascript reactjs

React (JS) 使用 JavaScript 在客户端构建用户界面。我刚刚开始使用它,想知道从搜索引擎的 Angular 索引 React 应用程序是否存在任何问题。

客户端只得到一小段html代码,所有内容都是在客户端生成的。以下是客户端收到的源代码示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="manifest" href="/manifest.json">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  <script type="text/javascript" src="/static/js/bundle.js"></script></body>
</html>

在 Google 等搜索引擎的索引方面,使用 React 接口(interface)有什么缺点吗?这是使用 ajax 的一个巨大缺点。我应该考虑到这一点吗?如果不是,那么 Google 如何处理呢?

最佳答案

网络爬虫只能看到您的 html 页面中的任何内容。它不知道由 React 发送的数据,或者基本上它不会抓取代码的 javascript 部分。您必须使用网络爬虫的服务器端渲染才能查看页面的内容。服务器端渲染意味着,React 在服务器本身上预渲染第一页的 html 内容,因此发送的页面将包含该页面的内容。

This page谈论服务器端渲染及其优缺点

关于javascript - React 网站如何被搜索引擎索引?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48023386/

相关文章:

javascript - Jest 测试 onClick() 得到错误 'Expected mock function to have been called, but it was not called.'

javascript - 如何使用 React JS 删除 UI 组件

javascript - firebase 通过 orderByChild 抓取然后更新结果键

javascript - 为什么此代码不起作用(网址肯定没问题),但什么也没有发生

javascript - 在 Click 事件中从 Google Fusion Tables 访问单个单元格值

javascript - 如何使用 React 测试库测试 React 组件是否返回 null 或其子级?

javascript - reactjs - 如何设置边框样式?

javascript - 具有多重过滤器的同位素

javascript - 我如何将偷看效果从悬停更改为滚动

javascript - 如何使这个 setState 函数非递归