Hydrate y estado de Redux desde Express

Clase 12 de 22 • Curso de Server Side Render con Express

Luis Gerardo López Hernández

student•

script para setResponse

        <script>
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
        </script>```

Manuel Rivera

student•

Mi viejo compañero Luis, siguiendo tus pasos bro jajaja

Luis Gerardo López Hernández

student•

como te ha ido? hasta que te apareces broo jajajaj

Pablo Verduzco

student•

Gran manera de resumir renderToString e hydrate, definitivamente todo queda más claro 😄

Carlos Rivas

student•

Hydrate y estado de Redux desde Express

En este punto, la aplicación ya esta siendo servida mediante SSR pero de una manera ineficiente. Actualmente se están realizando dos renderizados: uno en el servidor que carga solamente el html y css (sin eventos asociados) para ser servido como respuesta y luego otro en el browser (como normalmente lo haría). Para solventar esto, se debe configurar la aplicación desde el front para que hidrate (complemente) lo que viene precargado como respuesta del servidor.

En el index de la carpeta frontend se debe reemplazar la funcion render de ReactDOM por hydrate:

ReactDOM.hydrate(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('app'),
);

El initialState de la aplicación esta siendo declarado 2 veces, siendo esto una forma ineficiente de utilizarlo. Para optimizar esta situacion se debe definir un estado base (preloadedState) en la funcion que inicializa el store y crea el string renderizado de la app. Luego se debe enviar como parametro ese estado a la funcion setResponse para que esta lo incluya dentro del cuerpo de la respuesta del servidor.

const renderApp = (req, res) => {

  const store = createStore(reducer, initialState);
  const preloadedState = store.getState();

  const html = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={{}}>
        {renderRoutes(serverRoutes)}
      </StaticRouter>
    </Provider>,
  );

  res.send(setResponse(html, preloadedState));
};

Para poder enviar el estado base (preloadedState) en la respuesta, se debe guardar de la siguiente forma:

const setResponse = (html, preloadedState) => {
  return (`
  <!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="assets/app.css" type="text/css">
      <title>Platzi Video</title>
    </head>
    <body>
      <div id="app">${html}</div>

      <script>
        window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
      </script>

      <script src="assets/app.js" type="text/javascript"></script>
    </body>
  </html>
  `);
};

Ahora en el archivo index.js de la carpeta frontend se debe eliminar la referencia al initialState: import initialState from './initialState'; y luego se llama al preloadedState definido desde el servidor. Con ese mismo estado precargado se debe crear el store y luego por temas de seguridad ha de ser eliminado:

const preloadedState = window.__PRELOADED_STATE__;
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, preloadedState, composeEnhancers());

delete window.__PRELOADED_STATE__;

Jose Anibal Garcia Giraldo

student•

Si alguien de pronto tuvo un error al desplegar el JS recuerden que SIEMPRE debe ir primero el script que trae el state, antes del script con el css y el JS de la siguiente forma.

Estaba pasándolo al revés y por eso la pasé bastante con un error pendejillo jeje :D

Ernán Alexander Velásquez Ramírez

student•

También me pasó

Danilo Valenzuela

student•

Gran analogía :V

Garcia Gar

student•

Me esta saliendo este error alguien que me pueda decir porque sale Gracias

react-dom.development.js:88 Warning: Expected server HTML to contain a matching <div> in <div>. in div (created by Layout) in Layout (created by App) in Router (created by BrowserRouter) in BrowserRouter (created by App) in App in Router in Provider

Carlos Sampol

Team Platzi•

Podrias darme mas detalle de tu error ? Puede que estes exportando algo que no es.

Danilo Valenzuela

student•

Me sale el mismo error y no he podido solucionarlo, el SSR funciona bien (quitando el JS del Browser), cuando se rehidrata el estado es cuando se craseha.

Enrique Yael C

student•

si tengo puesto el "hydrate" no me carga algunas imagenes ni esyilos, cuando recargo la pagina. solo con el "render" :c

Wilson Fernando Antury Torres

student•

Primero se envía un string con html y css, después se hidrata con javascript y el preloaded state? de ésta forma el cliente puede ver el html y css antes de tener la pagina totalmente interactiva. Estoy bien?

Carlos Sampol

Team Platzi•

Asi es. Estas en lo correcto.

Wandy Rafael Santana Evangelista

student•

Hola Devs: Aqui tienen la lectura del ReactDOM.hydrate(): Click Aqui

Daniel Hernández

student•

al hacer delete window.PRELOADED_STATE; ya no lo hace visible desde la consola, pero si yo inspecciono el DOM desde el browser puedo ver el script cuando se asigna window.PRELOADED_STATE. Es esto seguro?, hay una manera de remover ese script?

Carlos Sampol

Team Platzi•

Si quieres eliminar el script puedes asignarle un id y en lo que se monte el cliente eliminas del DOM el script.

Garcia Gar

student•

Ejemplo de como se puede eliminar ese script que comentan de DOM

Carlos David Ramírez Gómez

student•

Implementé el SSR a un proyecto existente, y no me está funcionando el useEffect, alguien sabe qué puede ser?

Diego Francisco Luna Lopez

student•

Estoy igual amigo.

Andres Gazui

student•

Tengo un pequeño problema, no me carga mi estado dentro del window.PRELOADED_STATE , ya revisé las variables en el servdior y en el index y todo está tal cual, incluso el preloaded está llegando al string que se está retornando para renderizar.

El string que se renderia:

const setResponse = (html, preloadedState) => {
    return (`
    <!DOCTYPE html>
    <html lang="es">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="assets/app.css" type="text/css">
            <title>Platzi Video</title>
        </head>
        <body>
            <div id="app">${html}</div>
            <script>
                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
                    /</g,
                    '\\u003c'
                )}
            </script>
            <script src="assets/app.js" type="text/javascript"></script>
        </body>
    </html>
    `);

Y acá las variables en el index, donde window.PRELOADED_STATE aparece como undefine o sea que no se está cargando

const preloadedState = window.__PRELOADED_STATE__;
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
const store = createStore(reducer, preloadedState, composeEnhancers)

delete window.__PRELOADED_STATE__;

Carlos Salas Torres

student•

El ordern de los tags debe ser el siguiente:

<script>
	window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g,\\u003c')}
</script>
 <div id="app">${html}</div>

Cristofher Jumbo Jimenez

student•

wow todo mas claro la verdad. Hydrate para evitar el doble render y luego window.preload_state para de pre-cargar el estado del que se alimenta el redux.

Eriksen Lezama

student•

Me surge la duda al momento de eliminar el PREALOADED_STATE del window. ¿Realmente lo hacemos bien de esta forma? si hago una búsqueda en el código y pongo un punto de ruptura antes de eliminarlo puedo inspeccionar el initialState. ¿o al enviar a producción o en unas clases siguientes hay más pasos que evitan que esto pueda hacerse?

José María Cuevas Ramírez

student•

Me parece que es la mejor manera de hacerlo porque en la documentación oficial de Redux así es como te indican que lo hagas

Victor Hugo Muñoz Hernández

student•

Si no queremos que se acceda al window.PRELOADED_STATE, no importa que todos esos datos aparezcan al momento de inspeccionar el html? Basta con eliminar la variable?

Jose Anibal Garcia Giraldo

student•

¿En este momento nuestra aplicación debería estar funcionando a la perfección, incluso deshabilitando JS en el navegador?

Erik Elyager

student•

Si todo ha sido "hidratado desde el server sí" prueba tu mismo y nos cuentas, dale deshabilitar el JS en tu navegador.

Jose Anibal Garcia Giraldo

student•

Si todo correcto!, de hecho al principio no se hidrataba porque tenía un typo :D, pero incluso deshabilitando JS funciona

Wilmer Garzon Cabezas

Team Platzi•

Me fascina cuando dice la frase "Vamos a hacer una recapitulacion', Excelent Teacher!!!

john fredy quimbaya orozco

student•

Después de mucho luchar se pudo estabilizar el proyecto, todos los errores eran por las librerías de babel las actualice todas y se solucionó el problema

Ismael Grimaldo Vega

student•

mind blowing

Naldo Duran

student•

✌

Hydrate y estado de Redux desde Express

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas