-
Notifications
You must be signed in to change notification settings - Fork 5
Description
Con todo el boom de JS en el server y en el cliente, y agregándole el hermoso poder de React, hoy en día tenemos que preocuparnos en que nuestra aplicación comparta código (entre el cliente y el server) al máximo, para esto un problema que he encontrado es cuando cargas una ruta (de react-router) y necesitas data para que la vista pueda renderizarse generalmente se tiende a repetir el código (se repite en el server y en el cliente) que realiza esa carga.
Pongamos de ejemplo que tenemos una ruta /contactos, dicha vista/componente necesita un prop this.props.contactos para generar una lista de contactos, en este escenario veo 2 casos:
- Cuando se entra a dicha ruta por primera vez en el navegador o cuando se realiza un refresh (F5) (tambien conocido como
renderizado del lado del servidor) - Cuando se entra a dicha ruta pero mediante un click a un link en la aplicación, que solo refrescara el contenido y url (con pushState o hashChange) con la ruta solicitada (también conocido como
renderizado del lado del cliente)
Para ambos casos necesitamos asegurar que el código que cargue dicha data de contactos sea uniforme y funcione para el cliente y servidor.
He ido investigando un poco el tema y he encontrado unas cuantas librerías al respecto, y en base a eso quiero discutir las diferentes alternativas que podemos tener ante este problema.
Recuerden que la idea es encontrar una solución que se integre bien con un router (react-router) y flux