Aplicando history y creando rutas para el servidor

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

Resumen

Vamos a instalar la dependencia history para poder crear un historial del navegador desde el servidor:

yarn add history --exact

Para crear el historial debemos importar el método createBrowserHistory de history.

Joaquin Mayer

student•

Deberían hacer el curso de nuevo, ya que no es posible seguirlo con los archivos de los cursos anteriores.

Me descargue los archivos adjuntos, y aun así, no es posible hacerlo andar

Armando de jesus santiz lopez

student•

Hola, me encanta este curso, está excelente... Pero tengo una duda, porque necesitamos definir 2 veces las mismas rutas ? Entiendo que uno es para el cliente y otro para el servidor, pero routerStatic nos permite reusar las mismas rutas que ya tenemos definidas... Y un pregunta más como manejamos las rutas anidadas con esto ?. Gracias.

Carlos Sampol

Team Platzi•

En realidad se puede usar solo el routerStatic también. Pero, deje la integración con ambas por si se quiere hacer validaciones en rutas solamente del lado del cliente y también para que el estudiante tenga contexto de donde salen las rutas.

Saludos!

Javier Fuentes Mora

teacher•

No le falto la ruta de player??? y como se va a manejar el player/:id

Jorge Humberto Nemogá Pinzón

student•

Este curso se derivo del de React router y redux pero no desde su último commit. Por lo que no está siguiendo los últimos detalles que podríamos tener nosotros.

Igual, así como el comenta el caso del Layout que este no es una ruta. para el player/:id que si es una ruta no sequiere un SSR pues no vamos a conseguir SEO y una mejora de carga para un visor simple de video tal vez no valga la pena.

David Salomon Baena Rubio

student•

Tengo una duda, me daba la impresión de que react-router es una versión mas antigua de react-router-dom, no entiendo muy bien por que se usan los dos paquetes.

Manuel Ojeda

student•

react-router-dom es necesario para poder realizar las modificaciones del DOM con el mismo router, al final lo que utilizamos es react-router-dom

Alejandro Demetrio Cortez Alvarez

student•

Se creo el serverRoutes pero no entiendo dónde se están llamando? o cómo es que el history está llamando esas rutas?

Gabriel De Andrade

student•

Hola! El history no llama a las rutas que preparamos acá, el history lo que nos permite es manejar de manera sencilla la historia de la sesión. El serverRoutes como dice el profesor es parte de la preparación para nuestro servidor, este archivo lo utilizaremos en la clase "Definiendo la función main para el renderizado desde el servidor"

Arantxa Giovanna Rosas Del Valle

student•

¿Me perdí de algo? o en qué momento se usa el archivo serverRoutes.js????

Gabriel De Andrade

student•

Hola Arantxa! No te perdiste de nada :P. El Archivo serverRoutes.js es simplemente para preparar el terreno para nuestro servidor, este lo utilizaremos en la clase "Definiendo la función main para el renderizado desde el servidor"

Daniel Hurtado

student•

El History deberíamos hacerlo en App.js de /routes, ya que haciéndolo en el index estaríamos teniendo un <Router> dentro de otro <Router> lo cual no tiene sentido

Wilson Marino Pablo Mendez

student•

En la clase anterior no habia nada de Redux y ahora si. mmmm 😏😏😒😒 😠😠

Aplicando history y creando rutas para el servidor

Primeros pasos

¡Vamos a renovar este curso!

Introducción y presentación del curso

¿Qué es Server Side Rendering?

Babel, Express y React

Creación del proyecto base

Configuración de ESLint con Webpack

Preparación de Webpack, Babel, PostCSS y Assets

Usando Plugins y vendor file en Webpack

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Agregando variables de sass desde webpack

Aplicando history y creando rutas para el servidor

Haciendo initialState accesible y configurando Redux DevTools

Aplicar Server Side Rendering

Definiendo la función main para renderizado desde el servidor

Aplicando la función main para renderizado desde el servidor y creación del string de HTML

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 el frontend y webpack para producción

Compresión de Assets

Hashes

Cierre del Curso