Arquitectura Server-Side Rendering: Comparativa y Análisis con Next.js

¿Cómo comparar nuestro motor con Next.js?

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.

¿Qué diferencias existen en el routing?

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:

• Un archivo llamado "galaxias.js" se convierte en la ruta /galaxias.
• "index.js" representa la página inicial (/).
• "tienda.js" generaría la ruta /tienda.

Este enfoque de archivo proporciona una gran ventaja en simplicidad y organización.

¿Cómo personalizamos documentos en ambos frameworks?

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.

¿En qué se diferencian las estrategias de prefetching?

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.

¿Qué nos enseña el análisis del bundle en Next.js?

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:

• Cliente y servidor desarrollados paralelamente.
• Un "webpack" para organizar su estructura, similar a nuestra "carpeta dist".

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!

¿Qué aspectos fundamentales podemos aprender?

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!