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

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:0011:20

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

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

Clase 9 de 19

Clase 9 / 19

Recursos

Transformar la estrategia de obtención de datos en una aplicación Next.js puede marcar una diferencia enorme en rendimiento y SEO. getStaticProps es uno de los métodos más poderosos del framework, y entender cómo funciona permite generar páginas con HTML prerenderizado desde el servidor, en lugar de depender exclusivamente del navegador.

¿Cómo funciona getStaticProps para renderizar en el servidor?

Cuando se trabaja con fetching en el cliente, la información se obtiene mediante un useEffect que se ejecuta en el navegador. Esto significa que el HTML inicial llega vacío y el contenido se carga después. Con getStaticProps, el enfoque cambia por completo: los datos se obtienen en el servidor durante el proceso de construcción y se inyectan como props al componente [01:00].

El procedimiento es directo:

Se elimina el useEffect y el estado local del componente.
El componente pasa a recibir los datos como props.
Se exporta una función llamada getStaticProps desde el archivo de la página.

Esta función debe ser async, ya que realiza operaciones asíncronas como llamadas a una API. Al final, retorna un objeto con la propiedad props, que contiene exactamente lo que el componente necesita para renderizarse [01:30].

typescript export const getStaticProps: GetStaticProps<HomeProps> = async () => { const plants = await getPlants({ limit: 10 })

return { props: { plants, }, } }

Un detalle importante: getStaticProps solo funciona en archivos dentro de la carpeta pages de Next.js. No se puede usar en componentes regulares ni en archivos fuera de esa estructura.

¿Cómo tipar getStaticProps con TypeScript?

Cuando se trabaja con TypeScript, Next.js ofrece dos tipos utilitarios que facilitan la anotación correcta [02:40].

GetStaticProps: se usa para definir el tipo de la función exportada, parametrizándolo con los props que se van a pasar al componente.
InferGetStaticPropsType: permite inferir automáticamente los tipos de los props en el componente de la página.

typescript import { GetStaticProps, InferGetStaticPropsType } from 'next'

type HomeProps = { plants: Plant[] }

export const getStaticProps: GetStaticProps<HomeProps> = async () => { const plants = await getPlants({ limit: 10 }) return { props: { plants } } }

function Home({ plants }: InferGetStaticPropsType<typeof getStaticProps>) { // plants es Plant[] }

De esta forma, TypeScript sabe que plants es un array de tipo Plant sin necesidad de anotaciones manuales adicionales en el componente.

¿Qué diferencia real hay entre renderizado en cliente y servidor?

La prueba más contundente está en el page source del navegador [04:00]. Cuando se usa useEffect para traer datos, al inspeccionar el código fuente HTML no se encuentra el contenido dinámico. Chrome confirma que términos como "watering" o "houseplants" simplemente no existen en el HTML inicial.

En cambio, con getStaticProps, ese mismo contenido ya viene incluido en el HTML que el servidor entrega. Esto tiene consecuencias directas:

SEO mejorado: los motores de búsqueda pueden indexar el contenido sin ejecutar JavaScript.
Rendimiento percibido: el usuario ve el contenido desde el primer instante.
Static rendering: Next.js genera el HTML en tiempo de build, lo que significa respuestas extremadamente rápidas.

¿Cómo extender este patrón a otros datos como autores y categorías?

El mismo enfoque se aplica a cualquier tipo de dato disponible en la API [06:10]. Los métodos auxiliares como getAuthorList o las funciones para categorías ya están preparados en el archivo api/index.ts. Se pueden incorporar dentro de getStaticProps para alimentar componentes como Hero, PlantCollection con variaciones de layout, o un componente de autores.

¿Qué papel juegan los custom hooks en el fetching desde cliente?

Para datos que aún se obtienen en el navegador, se puede construir un custom hook que maneje dos estados: el status de la petición HTTP y el dato obtenido [07:00]. El patrón incluye un useEffect que ejecuta la llamada a la API, guarda la respuesta en el estado y actualiza el status a success. El componente consumidor simplemente verifica data y status para decidir qué renderizar.

Este contraste entre fetching en servidor con getStaticProps y fetching en cliente con hooks es fundamental para decidir la estrategia adecuada según cada caso. ¿Ya probaste mover tus propios datos al servidor? Comparte tu experiencia en los comentarios.

Jhunior Eduardo Guevara Lázaro

Hace 4 años

pages/index.tsx

Utilizamos SSG

import { GetStaticProps, InferGetStaticPropsType } from 'next'

import { Layout } from '@components/Layout'
import { getPlantList } from '@api'
import { Hero } from '@components/Hero'
import { PlantCollection } from '@components/PlantCollection'
import { Authors } from '@components/Authors'

type HomeProps = {
  plants: Plant[]
}

export const getStaticProps: GetStaticProps<HomeProps> = async () => {
  const plants = await getPlantList({ limit: 10 })

  return {
    props: { plants },
    revalidate: 5 * 60, // once every five minutes
  }
}

export default function Home({
  plants,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <Layout>
      <Hero {...plants[0]} className="mb-20" />
      <Authors className="mb-10" />
      <PlantCollection
        plants={plants.slice(1, 3)}
        variant="vertical"
        className="mb-24"
      />
      <PlantCollection
        plants={plants.length > 8 ? plants.slice(3, 9) : plants}
        variant="square"
      />
    </Layout>
  )
}

Para el caso de components/Authors.tsx

Utilizamos Client Sire Rendering

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { getAuthorList, QueryStatus } from '@api'
import { Grid } from '@ui/Grid'
import { Typography } from '@ui/Typography'

type AuthorProps = {
  className?: string
}

export function Authors({ className }: AuthorProps) {
  const { data, status } = useAuthors()

  if (data == null || status !== 'success') {
    const dummyItems = Array.from({ length: 4 }, (_, i) => `item-${i}`)
    return (
      <Grid container spacing={4} className={className} justify="center">
        {dummyItems.map((item) => (
          <Grid
            xs={2}
            item
            key={item}
            className="bg-gray-200 animate pulse"
          ></Grid>
        ))}
      </Grid>
    )
  }

  return (
    <Grid container spacing={4} className={className} justify="center">
      {data.map(({ id, photo, fullName, handle }) => (
        <Grid item key={id}>
          <Link href={`/top-stories/${handle}`}>
            <a title={`See latest stories from ${fullName}`}>
              <img src={photo.url} width={150} />
              <Typography variant="h5" component="p">
                {fullName}
              </Typography>
            </a>
          </Link>
        </Grid>
      ))}
    </Grid>
  )
}

function useAuthors() {
  const [status, setStatus] = useState<QueryStatus>('idle')
  const [data, setData] = useState<Author[] | null>(null)

  useEffect(
    () => {
      setStatus('loading')
      getAuthorList({ limit: 10 })
        .then((returnedData) => {
          setData(returnedData)
          setStatus('success')
        })
        .catch(() => setStatus('error'))
    },
    [
      // Run effect once
    ]
  )

  return {
    status,
    data,
  }
}

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

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

Progreso del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

Bonus

Recursos

Recursos