搜索引擎索引如何为 REACT 等 JavaScript Web 应用程序工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42358158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does Search Engine indexing work for JavaScript web applications like REACT?
提问by suyesh
I am planning to implement react.js for my application. As I am new to react I have a doubt that, how google will index the react components? And what are the best practice needed to make application properly visible in google search.
我计划为我的应用程序实现 react.js。由于我是反应的新手，我怀疑谷歌将如何索引反应组件？以及使应用程序在谷歌搜索中正确可见所需的最佳实践是什么。
Any one has any idea please help me on this.
任何人有任何想法请帮助我。
回答by WillHua
So I can safely say that I have gotten a react SPA with API calls to render perfectly in googlebot (Fetch and Render). So this is not an impossible task but I will say there isn't much documentation to help you along the way.
所以我可以肯定地说，我已经获得了一个带有 API 调用的 React SPA，可以在 googlebot 中完美呈现（Fetch and Render）。所以这不是一项不可能完成的任务，但我会说没有太多文档可以帮助您。
Since it sounds like you've got a new app, I'll outline both avenues you can potentially go down.
由于听起来您有一个新应用程序，我将概述您可能会走的两条途径。
Server Side Pre-rendering (SSR)
服务器端预渲染 (SSR)
Start with Server side pre-rendering (SSR) and stick to it. There are a lot of ways to do this in react and this ultimately means you'll need to stick with isomorphic libraries which support SSR.
从服务器端预渲染 (SSR) 开始并坚持下去。在 React 中有很多方法可以做到这一点，这最终意味着您需要坚持使用支持 SSR 的同构库。
However, by going down the SSR path the chances of being indexed by google are significantly higher since you don't have to rely on the googlebot working with your JS at all.
但是，通过沿着 SSR 路径走下去，被 google 编入索引的机会要高得多，因为您根本不必依赖 googlebot 与您的 JS 一起工作。
Client Side Rendering (A normal JS app)
客户端渲染（一个普通的 JS 应用程序）
Just build a normal React App with no SSR.. basically business as usual. The benefits are that you don't have to deal with any added complexity of SSR and you aren't restricted to libraries that are isomorphic. Basically this is the easiest but you have to hope your JS compiles and is run correctly by the Googlebot.
只需构建一个没有 SSR 的普通 React 应用程序......基本上一切照旧。好处是您不必处理任何增加的 SSR 复杂性，并且您不受同构库的限制。基本上这是最简单的，但您必须希望您的 JS 能够编译并由 Googlebot 正确运行。
My observations
我的观察
I will say server side pre-rendering is incredibly hard to get working sometimes since a lot of libraries might not support it and this in turn introduces a lot of complexity that you don't want to deal with.
我会说服务器端预渲染有时非常难以工作，因为很多库可能不支持它，这反过来又引入了很多你不想处理的复杂性。
The client side rendering route is just business as usual really and I can confirm that it does in fact work with Googlebot. Heres what I did to get client side rendering working:
客户端渲染路线真的像往常一样，我可以确认它确实可以与 Googlebot 一起使用。这是我为让客户端渲染工作所做的工作：
Added 'babel-polyfill' to my imports list as early as possible
Inlined my Javascript to reduce the overall load time and minimise unnecessary calls. I did this with Razor (C#)but you can do this any way you want.
Added an external call to the Financial times polyfill (not sure if this ones necessary)
NODE_ENV=production will also help here. It'll cut the overall size of your bundle down
尽早将 'babel-polyfill' 添加到我的导入列表中
内联我的 Javascript 以减少整体加载时间并最大程度地减少不必要的调用。我用Razor (C#)做到了这一点，但你可以以任何你想要的方式做到这一点。
添加了对金融时报 polyfill 的外部调用（不确定是否需要）
NODE_ENV=production 在这里也有帮助。它会减少捆绑包的整体大小
For anyone on C#, this is what it looks this might look like:
对于 C# 上的任何人来说，这就是它的样子：
clientWithRender.jsx (the entry point of my jsx)
clientWithRender.jsx（我的 jsx 的入口点）
import React from "react";
import ReactDOM from "react-dom";
import 'babel-polyfill';
import App from "./App/App.jsx";
import { Router, Route, indexRouter, hashHistory } from "react-router";
ReactDOM.render(
<App></App>,
document.getElementById('App'));
Index.cshtml
索引.cshtml
<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")
回答by mikegeyser
If you take a look at this article from 2015 on the Google Webmaster Central Blogyou can see that google recommends not doing anything different for SEO on a single page (or as they called it AJAX) application - which would include react.
如果您查看2015 年在 Google 网站管理员中心博客上发表的这篇文章，您会发现 google 建议不要在单个页面（或他们称之为 AJAX）应用程序上对 SEO 做任何不同的事情——这将包括反应。
They don't go into a lot of detail there about how they do it, but as long as your application is built semantically and renders very quickly - it should rank.
他们没有详细介绍他们如何做到这一点，但是只要您的应用程序是按语义构建的并且渲染速度非常快 - 它应该排名。
They place a lot of emphasis on performance, with faster render time leading to higher rankings. This puts all single page applications at a major disadvantage over server side rendering.
他们非常重视性能，更快的渲染时间会导致更高的排名。这使得所有单页应用程序都处于服务器端渲染的主要劣势。
If you want some more specific guidance - this seems like a really good place to start.
如果您需要一些更具体的指导 -这似乎是一个非常好的起点。
