From d343c5c6b5cc5a4fbb19b1fdcbf07a08e5606be1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Carlos=20Manzanero=20Dom=C3=ADnguez?= Date: Tue, 8 Oct 2024 20:03:05 -0600 Subject: [PATCH] finish translation of first post and maked a draft --- src/content/blog/en/website-2.0.mdx | 3 +- src/content/blog/es/website-2.0.mdx | 64 +++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/content/blog/es/website-2.0.mdx diff --git a/src/content/blog/en/website-2.0.mdx b/src/content/blog/en/website-2.0.mdx index 2f120e9..324bcd9 100644 --- a/src/content/blog/en/website-2.0.mdx +++ b/src/content/blog/en/website-2.0.mdx @@ -1,5 +1,5 @@ --- -title: The reason to create a version 2.0 of my website +title: The Reason to Create a Version 2.0 of my Website description: I commited some errors when creating the first version of my website, here I will share what I have learned. tags: [Tech] image: /blog/website-2.0/banner.png @@ -7,6 +7,7 @@ imageCaption: Tech Stack of this website. Next.js, Vercel, React.js, TypeScript date: 2023-4-7 author: Juan Manzanero rss: true +draft: true --- ![Tech stack](@/assets/blog/website-2.0/banner.png) _Tech Stack of this website. diff --git a/src/content/blog/es/website-2.0.mdx b/src/content/blog/es/website-2.0.mdx new file mode 100644 index 0000000..d113ffa --- /dev/null +++ b/src/content/blog/es/website-2.0.mdx @@ -0,0 +1,64 @@ +--- +title: La Razón para Crear una Versión 2.0 de mi Website +description: Cometí algunos errores al crear la primera versión de mi sitio web, aquí compartiré lo que he aprendido. +tags: [Tech] +image: /blog/website-2.0/banner.png +imageCaption: Tech Stack usado para este sitio web. Next.js, Vercel, React.js, TypeScript and TailwindCSS +date: 2023-4-7 +author: Juan Manzanero +rss: true +draft: true +--- + +![Tech stack](@/assets/blog/website-2.0/banner.png) _Tech Stack of this website. +Next.js, Vercel, React.js, TypeScript and TailwindCSS_ + +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](https://nextjs.org/)** es un **meta-framework** de **Node.js** que utiliza **[React.js](https://react.dev/)** 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](https://tailwindcss.com/)** 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](https://vercel.com/)** 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](https://vercel.com/docs/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!