Renderizado de Listas con Next.js y Contentful

Curso de Next.js: Sitios Estáticos y Jamstack

Contenido del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

18
Despliegue de Next.js hacia Producción: Variables y Optimización
01:41 min

Bonus

19
Lectura de Archivos en Next.js con Node.js y File System
09:51 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:41

Renderizado de Listas con Next.js y Contentful

Curso de Next.js: Sitios Estáticos y Jamstack

Clase 8 de 19

Clase 8 / 19

Recursos

¿Cómo configuro la página de inicio en Next.js?

Comencemos a concretar lo que hemos aprendido con Next.js creando una página de inicio que lista los ítems más recientes disponibles en Contentful. Primero, vamos a iniciar revisando nuestro archivo pages/index.tsx. Si ya hiciste cambios previos a este archivo para prueba, es buena idea descartarlos. Para ello, puedes eliminar las modificaciones con Git y asegurarte de comenzar con un archivo limpio, al que renombraremos para usarlo como documentación.

A continuación, crea un archivo index.tsx vacío y ábrelo en VS Code. Para verificar el funcionamiento, agrega un simple “Hola” en nuestro componente y ejecuta el servidor de Next.js, especificando tu space ID y access token como variables de entorno para que funcione la API de Contentful.

import React from 'react';

export default function Home() {
  return <div>Hola</div>;
}

¿Cómo obtengo y guardo datos desde la API de Contentful?

Para mostrar una lista de plantas desde nuestra API, utilizaremos el método getPlantList. Este método emplea promesas y HTTP, así que se integrará utilizando useEffect de React para hacer la llamada desde el cliente.

Dentro de Home, usaremos useEffect para traer nuestra lista desde la API limitando a diez resultados. No olvides verificar que la conexión esté estable y funcione usando console.log.

También crearemos un estado con useState para almacenar los datos obtenidos:

import React, { useEffect, useState } from 'react';

// Supongamos que esta es nuestra función de consulta a la API
import { getPlantList } from './api'; 

export default function Home() {
  const [data, setData] = useState([]); // Estado inicial como array vacío

  useEffect(() => {
    getPlantList().then(receivedData => {
      // Actualiza el estado con los datos recibidos
      setData(receivedData);
    });
  }, []);

  return <div>Hola</div>;
}

¿Cómo renderizo los datos obtenidos?

Con nuestra lista de plantas lista, el siguiente paso es renderizar los datos. Podríamos utilizar un map en data para mostrar cada ítem, con su nombre y su imagen.

return (
  <div>
    {data.map(item => (
      <div key={item.id}>
        <h2>{item.plantName}</h2>
        <img src={item.image.url} alt={item.plantName} />
      </div>
    ))}
  </div>
);

Uso de componentes de React preconstruidos

No es necesario reinvertar la rueda al crear estos componentes. El proyecto ya incluye un componente llamado PlantCollection dentro del folder components, que se encarga de renderizar las plantas. Puedes usarlo de la siguiente manera:

import PlantCollection from './components/PlantCollection';

return (
  <PlantCollection plants={data} variant="square" />
);

¿Qué tipo de renderizado hemos implementado?

Finalmente, el método useEffect se ejecuta solo en el navegador, lo que significa que estamos usando client side rendering (CSR). Esto implica que el renderizado inicial es gestionado en el cliente, a diferencia del static rendering o server-side rendering (SSR). En la próxima lección, exploraremos cómo mover este proceso hacia un static rendering.

Introducción: rendering modes de Next.js

Creación de sitios estáticos con Next.js y Jamstack

Modos de Rendering en Next.js: Cliente, Servidor y Estático

Arquitectura del proyecto

Arquitectura Jam Stack con Next.js y GraphQL

Configuración de Contentful: Creación de Cuenta y API Tokens

Importación de Datos y Configuración en Contentful

Configuración y uso inicial de un proyecto Next.js con Contentful

Uso de GraphQL y Autogeneración en Next.js con Contentful

Static Generation

Renderizado de Listas con Next.js y Contentful

"Uso de getStaticProps en Next.js para Renderizado en Servidor"

Páginas Dinámicas en Next.js: Renderizado de Plantas y Entradas

Uso de getStaticPaths y getStaticProps en Next.js para páginas dinámicas

Ventajas y desventajas de Static Site Generation en Next.js

Incremental Static Generation

Configuración de Incremental Static Generation en Next.js

Uso del Fallback en Next.js: Estrategias y Aplicaciones

Estrategia Stale-While-Revalidate en Next.js

Ventajas y desventajas del Incremental Static Generation en Next.js

Server Side Rendering con Next.js: Ventajas y Desventajas

Siguientes pasos

Despliegue de Next.js hacia Producción: Variables y Optimización

Bonus

Lectura de Archivos en Next.js con Node.js y File System

Renderizado de Listas con Next.js y Contentful

Progreso del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

Bonus

Recursos

Recursos