En el proceso de desarrollo de una Next.js aplicación, la obtención de datos de las API es un aspecto crucial para mostrar contenido dinámico. Este artículo lo guiará a través del uso getStaticProps para recuperar datos estáticos durante el proceso de compilación y el uso getServerSideProps para recuperar datos de las API en cada solicitud.
Usando getStaticProps
getStaticProps es un método integrado Next.js que admite la recuperación de datos estáticos durante el proceso de compilación. Le permite crear páginas estáticas con datos consultados, que se renderizan previamente antes de implementar la aplicación. Aquí hay un ejemplo básico de uso getStaticProps:
export async function getStaticProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
En el ejemplo anterior, utilizamos fetch para consultar datos de una API y devolver los datos como accesorios.
Usando getServerSideProps
getServerSideProps es otro método Next.js que le permite obtener datos de las API en cada solicitud. Esto asegura que el contenido esté siempre actualizado y dinámico. Aquí hay un ejemplo de uso getServerSideProps:
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
El getServerSideProps método consultará datos de la API cada vez que se realice una solicitud a la página.
Conclusión
En esta sección, aprendió cómo recuperar datos de manera eficiente de las API en su Next.js aplicación. Al usar getStaticProps y getServerSideProps, puede mostrar contenido estático y dinámico de manera flexible en su aplicación.