header_lecciones_v5

Usando SSR con Gatsby

por Luis Quintero Arenas, el 2 de diciembre de 2019

h-usando-ssr-con-gatsby

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?

Creando sitios con Gatsby 1

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 sitios con Gatsby 2

Creando sitios con Gatsby 3

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

Creando sitios con Gatsby 4

Abrimos nuestro browser y podremos ver nuestro sitio web inicial:

Creando sitios con Gatsby 5

Si das click en el enlace de ir a la página 2 notarás que ya tenemos nuestras rutas definidas.

Creando sitios con Gatsby 6

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:

Creando sitios con Gatsby 7

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.

Creando sitios con Gatsby 8

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

Nuevo llamado a la acción

Temas:Tecnologia e Innovación

Lecciones Pragma

Lecciones en Academia Pragma

Aquí encontrarás tutoriales técnicos para que apliques en temas de desarrollo de software, cloud, calidad en software y aplicaciones móviles. 

También puedes visitar nuestro Blog con contenido actual sobre Transformación Digital, Marketing, Conocimiento de Usuario y más. 

Blog

Suscríbete a la academia

Descarga la Guía para trabajar con ambientes IBM Websphere Portal