No processo de desenvolvimento de uma Next.js aplicação, a busca de dados de APIs é um aspecto crucial para a exibição de conteúdo dinâmico. Este artigo orientará você sobre como buscar getStaticProps dados estáticos durante o processo de construção e como getServerSideProps buscar dados de APIs em cada solicitação.
Usando getStaticProps
getStaticProps é um método integrado Next.js que suporta a busca de dados estáticos durante o processo de construção. Ele permite criar páginas estáticas com dados consultados, que são pré-renderizados antes da implantação do aplicativo. Aqui está um exemplo 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,
},
};
}
No exemplo acima, usamos fetch para consultar dados de uma API e retornar os dados como acessórios.
Usando getServerSideProps
getServerSideProps é outro método Next.js que permite buscar dados de APIs em cada solicitação. Isso garante que o conteúdo esteja sempre atualizado e dinâmico. Aqui está um exemplo de uso getServerSideProps:
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
O getServerSideProps método consultará dados da API sempre que uma solicitação for feita à página.
Conclusão
Nesta seção, você aprendeu como buscar dados de APIs em seu Next.js aplicativo com eficiência. Usando getStaticProps e getServerSideProps, você pode exibir conteúdo estático e dinâmico de maneira flexível em seu aplicativo.