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

¿Qué es GetStaticProps en Next.js y cómo nos beneficia?

GetStaticProps es una de las herramientas más importantes y poderosas de Next.js. Este método permite mover el proceso de fetching de datos del cliente al servidor de manera eficiente y mejora el rendimiento de las páginas web al prerenderizar contenido. La implementación de GetStaticProps puede ser un cambio significativo que mejora la experiencia de usuario y el SEO.

¿Cómo implementamos GetStaticProps en nuestro proyecto?

Para comenzar a usar GetStaticProps, es esencial entender que este método se exporta explícitamente desde cualquier componente que sea una página dentro de la carpeta pages de Next.js. La función debe estar claramente definida y retornar los props necesarios para el componente que deseamos alimentar.

export const getStaticProps = async () => {
    const plants = await getPlants(); // Llamada a una API o fuente de datos
    return { 
        props: { plants } 
    };
};

En este ejemplo, getPlants es una función asíncrona que se encarga de obtener los datos. Posteriormente, devolvemos un objeto con los props que pasarán al componente correspondiente.

¿Cómo integramos TypeScript con GetStaticProps en Next.js?

Cuando trabajamos con TypeScript, Next.js nos proporciona herramientas adicionales para tipar nuestras funciones y asegurarnos de que los datos que gestionamos son los correctos. Algunas de las utilidades importantes incluyen GetStaticProps y InferGetStaticPropsType.

import { InferGetStaticPropsType, GetStaticProps } from 'next';

type HomeProps = {
    plants: Plant[]; // Array de Plantas tipado
};

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

Utilizando InferGetStaticPropsType, podemos inferir el tipo de datos que el componente debería recibir, optimizando la integración de TypeScript.

¿Qué beneficios obtenemos al prerenderizar en el servidor?

El cambio radical que trae el uso de GetStaticProps es que movemos la responsabilidad de empaquetar el HTML desde el cliente al servidor. Esto quiere decir que el HTML enviado al cliente ya incluye el contenido renderizado, mejorando la carga del sitio y su capacidad de ser indexado por motores de búsqueda.

¿Cuál es la diferencia entre renderizar en el cliente y el servidor?

Para ilustrar esta diferencia, comparemos dos situaciones: una en la que la página se construye utilizando useEffect en el cliente y otra donde GetStaticProps maneja la prerenderización en el servidor.

• Renderizado en cliente: Los datos se obtienen y se integran al HTML una vez la página termina de cargarse en el navegador del usuario. Esto suele llevar a tiempos de carga más extensos y menos consistentes.

• Prerenderización con GetStaticProps: Los datos llegan con el HTML prerenderizado desde el servidor, asegurando tiempos de carga más rápidos y consistentes al entregar contenido ya listo.

¡Experimenta el poder de la prerenderización con Next.js! Todo funciona de manera fluida y eficiente, mejorando tanto la experiencia del desarrollador como del usuario.

¿Cómo aplicar lo aprendido a diferentes componentes?

La implementación de GetStaticProps puede extenderse no solo a plantas, sino también a otros elementos como autores y categorías. En tu API con la que ya tienes interfaces y métodos listos gracias a GraphQL, podrás hacer algo similar siguiendo estos pasos.

¿Cómo se estructura un componente usando hooks?

La clave está en saber manejar hooks personalizados que llamen a dichas APIs dentro del efecto correspondiente. Aquí te mostramos un ejemplo sencillo:

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

    useEffect(() => {
        getAuthorList()
            .then(authors => {
                setData(authors);
                setStatus('success');
            })
            .catch(error => setStatus('error'));
    }, []);
    
    return { data, status };
};

Te alentamos a que pruebes esta metodología en varios aspectos de tu proyecto, utilizando toda la flexibilidad que Next.js y sus herramientas te ofrecen. ¡Continúa explorando y mejorando cada día más! Recuerda que el código detallado y los cambios específicos que hemos discutido están disponibles en los commits del proyecto.