por Luis Quintero Arenas, el 2 de diciembre de 2019
Hoy en día estructurar y optimizar un contenido de un sitio web puede ser muy complejo, por ejemplo al implementar sitios con un buen SEO usando single-page application (SPA), el contenido de nuestros sitios no queda renderizado en la primer carga de un sitio, sino que ésta se carga en tiempo de ejecución. Todo esto resulta en una tarea tediosa y compleja, sin embargo existen varias formas de facilitar esta tarea como lo es el SSR.
¿Qué es SSR?
SSR o Server Side Rendering es una técnica que se basa en la posibilidad de poder renderizar el HTML de nuestros componentes en cadenas de texto en la parte servidor y no en tiempo de ejecución. Estas cadenas serán las respuestas que nuestros servidores de NodeJS devolverán a las peticiones principales de nuestra web y así en un primer cargado de nuestro sitio ya tener toda la información que este nos provee, en vez de funciones que manipulan DOM en el navegador.
¿Qué es Gatsby?
Gatsby construye sitios web eficientes y veloces a la hora de cargar la información. En vez de esperar a generar las páginas cuando éstas sean solicitadas, las preconstruye y le deja el resto a los servidores globales en la nube, listas para ser entregadas de forma instantánea cuando el usuario las visite.
Esta herramienta integra varias de las mejores tecnologías del momento como lo son:
Creando nuestro primer sitio web con Gatsby
Para crear nuestro proyecto en Gatsby solo necesitamos node.js. Se sugiere la descarga de este desde el siguiente link si no se tiene (https://nodejs.org/es/)
1. Instalación
Para instalar gatsby tenemos que correr el siguiente comando en nuestra terminal:npm install -g gatsby-cli
2. Crear nuevo proyecto
Una vez instalado creamos nuestro proyecto con el siguiente comando:gatsby new website
3. Correr nuestro proyecto
Gatsby tiene integrado webpack, lo que nos permite reflejar automáticamente los cambios del sitio en el browser en tiempo real. Para esto vamos a entrar en nuestro proyecto creado y correr el siguiente comando:gatsby develop
Al finalizar nos dice dónde podemos ver el contenido de nuestro sitio web. Adicionalmente, nos da la URL de la interfaz gráfica de graphql
Abrimos nuestro browser y podremos ver nuestro sitio web inicial:
Si das click en el enlace de ir a la página 2 notarás que ya tenemos nuestras rutas definidas.
Si notas con atención en la ruta aparece localhost:8000/page-2 esto es algo que nos ahorrará mucho trabajo a la hora de crear rutas, ya que Gatsby lee el directorio src/pages que se encuentra dentro de la raíz y automáticamente añade las rutas que nuestro proyecto tiene:
Starters Gatsby
Para nuestro ejemplo usamos un starter por default que nos proporciona Gatsby , pero también puedes crear un proyecto con plantillas, las cuales podemos encontrar en este enlace.
Con esto ya tenemos una aplicación sencilla hecha en Gatsby, la cual puede crecer creando tus propias páginas , adicionando páginas dinámicas o uniéndola con un CMS headless.
Para consultar toda la documentación puedes ir a su sitio web.
