¡Este curso esta genial! Me aclaro un montón de dudas.
Fundamentos de SSR
Renderizado Server-Side con ReactJS y Next.js
Problemas y soluciones en Single Page Applications (SPA)
Creación de SPA con Create React App y efectos del JavaScript desactivado
Diferencias entre Client-side y Server-side Rendering
Server Side Rendering: Ventajas y Desventajas Detalladas
Crea tu primer app con SSR
Renderizado Server-Side con React y Express
Configuración de Webpack para proyectos TypeScript en Node.js
Creación de Servidor Express con TypeScript paso a paso
Plantillas HTML Dinámicas con TypeScript
Renderizado y Hidratación de React en Servidor y Cliente
Renderizado server-side e hidratación con React y Express
Peticiones asíncronas con Axios en Node.js y React
"Hidratación en Server-Side Rendering con React"
Renderizado de estilos en el servidor con Style Components
Bonus
Configuración de Webpack para Hot Module Replacement en Express
Arquitectura Server-Side Rendering: Comparativa y Análisis con Next.js
Mejoras de Proyectos con API de NASA
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Durante este emocionante ejercicio, vamos a comparar el motor que desarrollamos con el famoso framework Next.js. Esta evaluación se centrará en aspectos clave del rendimiento y las características estructurales, que nos ayudarán a entender mejor tanto nuestras fortalezas como áreas de mejora. Al hacerlo, te aseguro que tu confianza al trabajar con cualquiera de estas tecnologías incrementará significativamente.
La comparación comienza con el routing. En nuestro motor, el routing está sincronizado entre el servidor y la aplicación, lo que se maneja a través de React Router DOM. Esta técnica implica que el routing se establece manualmente en nuestro "containers app".
Por otro lado, Next.js aprovecha un sistema de routing basado en archivos mucho más conveniente. Simplemente organizando los archivos dentro de la carpeta "pages", se crean rutas automáticamente. Por ejemplo:
Este enfoque de archivo proporciona una gran ventaja en simplicidad y organización.
Otra comparación crítica es cómo ambos frameworks manejan la personalización de documentos. En nuestro motor, la personalización ocurre a través de un "documento personalizado" en el template del render. Aquí se inyectan estilos, HTML, y otras configuraciones esenciales.
Next.js aborda la personalización a través de la estructura de la app misma. Aunque no genera un "template" en formato string como el nuestro, Next.js permite la configuración del documento principal mediante la app, y se pueden agregar layouts por defecto.
El prefetching es una técnica esencial de Server Side Rendering que optimiza el tiempo de carga. Nuestro motor realiza prefetching al cargar scripts con el servidor y, si el JavaScript está desactivado, la información pedida del servidor no se visualiza hasta que este se active nuevamente.
Next.js, por su parte, destaca con un enfoque más avanzado. Gracias al sofisticado equipo de desarrollo de Vercel, han logrado implementar un prefetching tan eficiente que los loaders son prácticamente inexistentes. Además, poseen un sólido sistema de placeholders para imágenes en carga, aumentando significativamente la experiencia del usuario.
Al analizar el bundle de Next.js, encontramos su estructura de almacenamiento en ".next", que cuenta con un robusto sistema de caché y técnicas avanzadas de code splitting. Esta arquitectura fue diseñada para maximizar la eficiencia y el rendimiento general del framework. Aparte, cuenta con una organización muy similar a la que implementamos, incluyendo:
Este es un testimonio del nivel de sofisticación que se puede alcanzar con Next.js comparado con lo que logramos en un curso, ¡lo cual no deja de ser impresionante!
Los conceptos clave aprendidos a lo largo de este análisis son esenciales para comprender el server-side render. Al profundizar en estas comparaciones, las bases y estructuras esenciales detrás de herramientas como Next.js se aclaran enormemente. Si te animas a seguir explorando este framework, aprovecha los cursos disponibles en Platzi, y recuerda que enfrentarás con éxito plugins, tecnologías adicionales y posibles problemas al familiarizarte con el core del rendering en servidores. Conociendo todo esto, ¡el mundo del desarrollo web está a tus pies!
Aportes 2
Preguntas 0
¡Este curso esta genial! Me aclaro un montón de dudas.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?