Percebi que o Next utiliza um sistema de geração de paginas meio diferente, as paginas são geradas no processo de compilação, paginas estáticas, mas não estou conseguindo entender como faço para fazer uma pagina dinâmica, que consome uma API e atualiza seus dados a partir da API.
Henriik0liveira atualmente existe o método getServerSideProps nativo do NextJS. Ele roda suas requests no lado do servidor em tempo de execução, ou seja, a cada acesso à página da sua aplicação serão feitas todas as requests e processos que estiverem dentro deste método para então ser gerada uma página pré renderizada que será enviada ao usuário.
Dessa forma você tem uma página dinâmica porém que retorna um HTML estático a cada execução.
Para serem geradas páginas estáticas no processo se compilação o método utilizado é getStaticProps.
Mas um detalhe importante é que atualmente o NextJS está em processo de testes de uma nova forma de gerenciar sua estrutura de páginas, rotas e até mesmo quando uma página deve ser estática ou pré renderizada.
Logo essa será a nova forma oficial de se trabalhar com a ferramenta, então recomendo que fique de olho.
Pra entender melhor da uma olhada neste vídeo.
Obrigado!! vou ficar de olho.
Muito obrigado IanMiranda! Seria tipo isso? -
// ... imports
export async function getServerSideProps() {
const request = await fetch("https://dummyjson.com/products");
const data = await request.json();
return {
props: {
datas: data,
},
};
}
export default function Home({ datas }) {
return (
<ul>
{datas.products.map((item) => (
<li key={item.title}>{item.title}</li>
))}
</ul>
);
}
Com isso as <li> já iriam ser criadas com base na atualização da API?
Isso, exatamente assim.