搜索引擎索引如何为REACT等JavaScript Web应用程序工作？

我打算为我的应用程序实现react.js.由于我是新手,我有一个疑问,谷歌将如何索引反应组件？
在谷歌搜索中使应用程序正确可见所需的最佳实践是什么.

任何人有任何想法请帮助我.

解决方法:

所以我可以肯定地说,我已经通过API调用获得了一个反应SPA,以便在googlebot(Fetch和Render)中完美呈现.所以这不是一项不可能的任务,但我会说没有太多的文档可以帮助你.

既然听起来你有一个新的应用程序,我会概述你可能会失败的两个途径.

服务器端预渲染(SSR)

从服务器端预渲染(SSR)开始并坚持下去.反应中有很多方法可以做到这一点,这最终意味着你需要坚持支持SSR的同构库.

然而,通过沿着SSR路径下去,谷歌索引的可能性要高得多,因为你根本不需要依赖googlebot和你的JS一起工作.

客户端渲染(一个普通的JS应用程序)

只需构建一个没有SSR的正常React应用程序..基本上像往常一样.好处是您不必处理任何增加的SSR复杂性,并且您不仅限于同构的库.基本上这是最简单的,但你必须希望你的JS编译并由Googlebot正确运行.

我的观察

我会说服务器端预渲染有时很难开始工作,因为许多库可能不支持它,这反过来又引入了许多你不想处理的复杂性.

客户端渲染路线真的像往常一样,我可以确认它实际上与Googlebot一起工作.继承人我做了什么让客户端渲染工作：

>尽早将“babel-polyfill”添加到我的导入列表中
>内联我的Javascript以减少总体加载时间并最大限度地减少不必要的调用.我用Razor (C#)做了这个,但你可以用你想要的任何方式做到这一点.
>添加了对财务时间polyfill的外部调用(不确定是否有必要)
> NODE_ENV =生产也会有所帮助.它会减少你的捆绑的总体大小

对于C#上的任何人来说,这看起来可能是这样的：

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

<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")

标签：javascript,reactjs,react-redux,babeljs,seo
来源： https://codeday.me/bug/20190928/1826993.html