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.
