javascript - create - server side rendering react redux

¿Cómo funciona la indexación del motor de búsqueda para aplicaciones web de JavaScript como REACT?

Question

Estoy planeando implementar react.js para mi aplicación. Como soy nuevo en reaccionar, tengo una duda de que, ¿cómo indexará Google los componentes de reacción? ¿Y cuáles son las mejores prácticas necesarias para que la aplicación se vea correctamente en la búsqueda de Google?

Cualquiera tiene alguna idea por favor ayudame en esto.

Answer 1

Así que puedo decir con seguridad que obtuve una respuesta a SPA con llamadas a la API para renderizar perfectamente en googlebot (Fetch y Render). Entonces, esta no es una tarea imposible, pero diré que no hay mucha documentación que lo ayude en el camino.

Ya que suena como si tuvieras una nueva aplicación, describiré las dos vías en las que puedes ir.

Pre-renderización del lado del servidor (SSR)

Comience con la renderización previa del lado del servidor (SSR) y apéguese a ella. Hay muchas formas de reaccionar y esto significa que, en última instancia, tendrá que seguir con las bibliotecas isomorfas que admiten SSR.

Sin embargo, al ir por la ruta SSR, las posibilidades de que Google lo indexe son significativamente más altas, ya que no tiene que confiar en que Googlebot trabaje con su JS.

Representación del lado del cliente (una aplicación JS normal)

Simplemente cree una aplicación React normal sin SSR ... básicamente, como siempre. Los beneficios son que no tiene que lidiar con ninguna complejidad adicional de SSR y no está restringido a bibliotecas isomorfas. Básicamente, esto es lo más fácil, pero debes esperar que tu JS se compile y se ejecute correctamente por Googlebot.

Mis observaciones

Diré que la renderización previa del lado del servidor es increíblemente difícil de trabajar, ya que muchas bibliotecas pueden no admitirlo y esto, a su vez, introduce una gran complejidad con la que no desea lidiar.

La ruta de representación del lado del cliente es realmente normal, y puedo confirmar que, de hecho, funciona con Googlebot. Aquí está lo que hice para que el lado del cliente funcionara:

1. Agregué ''babel-polyfill'' a mi lista de importaciones lo antes posible

2. Incorporó mi Javascript para reducir el tiempo total de carga y minimizar llamadas innecesarias. Hice esto con Razor (C #) pero puedes hacerlo de la forma que quieras.

3. Se agregó una llamada externa al polyfill de Financial times (no estoy seguro si es necesario)

4. NODE_ENV = la producción también ayudará aquí. Se reducirá el tamaño total de su paquete

Para cualquier persona en C #, este es el aspecto que podría tener:

clientWithRender.jsx (el punto de entrada de mi 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")

Answer 2

Si echa un vistazo a este artículo de 2015 en el Blog de Google Webmaster Central , puede ver que Google recomienda no hacer nada diferente para SEO en una aplicación de una sola página (o como la llamaron AJAX), que incluiría reaccionar.

No entran en muchos detalles sobre cómo lo hacen, pero siempre y cuando su aplicación esté compilada semánticamente y se presente muy rápidamente, debería clasificar.

Ponen mucho énfasis en el rendimiento, con un tiempo de procesamiento más rápido que conduce a una clasificación más alta. Esto pone a todas las aplicaciones de una sola página en una desventaja importante sobre la representación del lado del servidor.

Si desea una orientación más específica, este es un buen lugar para comenzar .