Platzi blogAdvertencia:
Este proyecto no es oficial de Platzi, es solo un ejercicio de programacion
Historia
Después de mucho tiempo de jugar con código escribiendo aplicaciones web tradicionales con PHP y single page aplicaciones he sentido la curiosidad de aprender a profundidad una de las librerías para frontend más populares reactJs, desde su integración con redux hasta SSR (server Side Render).
Al principio no tenía bien claro que aplicación construir, me pase algunas horas revisando los proyectos de platzi connect tratando de inspirarme en alguno de los proyectos de la comunidad…
Después de leer varios artículos en el blog de platzi me llamo mucho la atención su diseño y en especial su contenido, construir un blog como ese sería el reto perfecto, así que me dije a mi mismo manos a la obra y he empezado a ocupar mi tiempo libre en crear una réplica del blog de platzi basado en la técnica de isomorphic application (técnica que combina Server Side Render y Client Side Render).
Mi intención no es plagiar el contenido del blog de platzi es solo un ejercicio de programación… Si platzi decide que esta aplicación viola sus términos por favor háganmelo saber (armandodejesus678@gmail.com) y pondré la aplicación Offline de inmediato.
BackEnd
El back-end no es más que una API REST construida con PHP junto el motor de base de datos MYSQL, Los datos de los post son consumidos por primera vez desde platzi.com (la extracción de datos puede tardar unos segundos), luego son guardados en una base de datos para que las próximas peticiones se consuman desde ahí. Dichos datos son actualizados si han pasado 24 horas desde la última actualización, en la próxima petición del usuario.
FrontEnd
La aplicación fue construida sin usar ningún framework como Gatsby o NextJs, a pesar de que nextJs es ideal para implementar SSR esta trae consigo algunas limitaciones además NextJs se encarga de solucionar todas las partes difíciles como el fetch de datos desde el servidor, y eso le quitaría toda la diversión XD… Así que para mejor aprovechamiento didáctico he configurado todo desde cero, la configuración de webpack, la estructura de archivos y todo lo que haga falta…
Server Side Render
Esta aplicación cuenta con serverSideRender por lo tanto la primera solicitud es renderizado desde el backend y el resto de la navegación el render ocurre en el cliente (SPA). Esto nos garantiza que la aplicación siempre funcionara aunque el usuario tenga JavaScript deshabilitado o si por alguna razón falla la ejecución de JavaScript en el lado del cliente. Si eres una persona curiosa por favor siéntete libre experimentar deshabilitando Javascript en tu navegador.
Conclusiones
Durante el desarrollo de esta aplicación me enfrente a varios problemas técnicos y un problema que me gustaría destacar es el fetch de datos desde el servidor SSR, es decir cuando los componentes necesitan datos de una API.
En el lado del cliente esto lo hacemos normalmente usando useEffect () o componentDidMount (), pero en el lado del servidor nunca se ejecutan estos métodos por lo que el servidor solo nos entrega componentes vacíos con un mensaje de “cargando…”, y lo que nosotros esperamos es que el servidor realice las peticiones necesarias al API, espera la respuesta y finalmente nos entregue un HTML completo con todos los datos.
Renderizar simples componentes en el servidor es muy fácil, el problema ocurre cuando ciertos componentes necesitan traer datos desde una API. NextJs con su famoso método getInitialProps () soluciona este problema por nosotros, pero dicho método solo lo tenemos disponible cuando usamos NextJs.
Pronto escribiré un artículo detallado y a profundidad sobre este problema y sus posibles soluciones… Mientras tanto disfruta de platzi-blog