La Razón para Crear una Versión 2.0 de mi Website

Cometí algunos errores al crear la primera versión de mi sitio web, aquí compartiré lo que he aprendido.

La primera versión de mi sitio web fue uno de mis mayores proyectos hasta ahora, pero ahora que tengo más experiencia como ingeniero Frontend, me doy cuenta de que no hice suficiente investigación para crear un sitio web con un blog.

Renderización del lado del cliente (CSR) vs. Renderización del lado del servidor (SSR) vs. Generación estática (SG)

Al desarrollar una aplicación web, debes pensar en el tipo de renderizado que se debe utilizar, teniendo en cuenta los requisitos de los problemas que deseas resolver.

Generación del lado del cliente (CSG)

Por ejemplo, una aplicación web como una SaaS para crear tareas y administrar personas tendrá páginas dinámicas para mostrar las tareas, actualizar las tarjetas cuando se editan o eliminan, mostrar notificaciones, etc. En esta situación, un CSR sería mejor para renderizar la página cada vez que el usuario solicita acceso para mantener los datos actualizados. Sin embargo, un CSR necesita hidratar la página cuando se solicita, lo que provoca una carga lenta al principio y utiliza más recursos de la PC del usuario.

Renderización del lado del servidor (SSR)

Esto podría resolverse utilizando SSR, que consiste en generar la página en el servidor donde se aloja la aplicación web utilizando toda la potencia que un servidor puede proporcionar. El problema es que se requiere un servidor. Google Cloud proporciona opciones sin servidor como App Engine o Cloud Run, pero deberás aprender sobre estos servicios y cómo implementar el proyecto, por lo que el conocimiento técnico es alto.

La desventaja de CSG y SSR es que, debido a que cada página debe ser renderizada en cada solicitud, los rastreadores web y los motores de búsqueda como Google tardarán más tiempo en obtener información sobre tu página, lo que resultará en una prioridad SEO baja.

Generación estática (SG)

Bueno, si una página no requiere buscar datos para cada solicitud, entonces puedes usar SG, lo que significa que la página se genera cuando construyes el directorio de producción antes de implementarlo. La página se generará en HTML/CSS/JS una vez, y si necesitas actualizar los datos en esa página, deberás hacer los cambios y implementar el proyecto. Sí, deberás ser más cuidadoso al revisar los cambios antes de implementarlos, pero como la página ya está generada, los rastreadores web y el motor de búsqueda de Google obtendrán la información de tu página más rápido, lo que mejorará tu SEO.

Lo interesante de Next.js

En el pasado, se requería pensar si usar CSG completo, SSR o SG, vinculando tu sitio web a sus respectivas secciones, como la aplicación, el blog, etc. Next.js es un meta-framework de Node.js que utiliza React.js para construir la interfaz de usuario, y proporciona CSR, SSR, SG y más, por lo que puedes generar SG obteniendo datos de forma asíncrona, lo que te permite no tener que crear cada página estática.

Este es el enfoque utilizado para este sitio web, en lugar de obtener los datos en cada solicitud, solo obtengo los datos cuando creo la construcción del proyecto.

Cada artículo es una página SG, pero utilizo una plantilla para mantener todos los blogs similares, utilizando la sintaxis markdown para el contenido del blog, y con una extensión de TailwindCSS mantengo los estilos consistentes.

Así que, Next.js te permite elegir el método de renderizado para cada página de tu sitio web, esta característica permite crear sitios web increíbles en el mismo proyecto, manteniendo la coherencia y con tiempos de carga rápidos, Next.js incluso carga de forma perezosa cada página y comienza a cargarse cuando pasas el cursor sobre un enlace como Inicio, Contacto, etc.

¡Explicaré en más detalle la arquitectura de este proyecto en el futuro!

TailwindCSS vs MUI

Elegí usar TailwindCSS para aprender sobre esta biblioteca CSS, y estoy impresionado por lo rápido que hace el desarrollo de los estilos de un proyecto web. MUI proporciona funcionalidades, pero a veces presenta problemas con la hidratación, como en mi sitio web anterior, cuando cargas la página por primera vez, tarda un tiempo en mostrar todos los estilos, ahora ya no ocurre porque TailwindCSS es CSS puro y las páginas son estáticas.

Despliegue en Vercel

Vercel es la empresa detrás de Next.js, y ofrece servicios de hosting optimizados para aplicaciones Node.js, y como estoy aprendiendo sobre desarrollo en la nube, tal vez podría intentar alojar esta web en un servicio en la nube como Cloud Run, pero esta vez elijo utilizar Vercel para obtener las analíticas que son muy útiles, y como el plan hobby me ofrece alojamiento gratuito para proyectos pequeños.

Para implementar, utilizo la Vercel CLI, bastante simple y directo.

¡Más contenido en camino!

Seguiré actualizando con publicaciones, características y más contenido para compartir mi experiencia, y ahora que estoy escribiendo este párrafo, creo que la próxima característica podría ser un boletín para notificar a las personas cuando creo una nueva publicación. ¡Hora de trabajar!