SSR con react-snap

April 15, 2019 • ☕️ 1 minutos de lectura

Pre-renderizar nuesta app es vital si queremos mejorar el rendimiento SEO de nuestra página.

La mayoría de los robots de los motores de búsqueda no ejecutan el código javascript del lado del cliente y eso hace que los sitios web creados por React no sean visibles en los resultados de los motores de búsqueda, o al menos no, como nos gustaría.

Crearemos un nuevo proyecto con react, o podemos usar uno ya existente… en este caso, crearemos unos nuevo.

npm create-react-app my-app

Ahora instalaremos react-snap, librería que utilizaremos para el pre-render.

npm i react-snap

Ahora editaremos el fichero package.jsony añadiremos a scripts, lo siguiente.

 "scripts": {
    // ...
    "postbuild": "react-snap"
  },

Nuestro src/index.js

import React from "react"
import "./index.css"
import App from "./App"
import { hydrate, render } from "react-dom"
import * as serviceWorker from "./serviceWorker"

const rootElement = document.getElementById("root")
if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement)
} else {
  render(<App />, rootElement)
}
serviceWorker.unregister()

Ahora solo nos queda realizar

npm install
npm run build

A primera vista, parece muy útil… ya veremos los resultados y con proyectos más complejos.