API interna busca com getServersideProps em next.js

recém -chegados a Next.js frequentemente encontram um dilema ao lidar com dados entre os dados entre páginas ou componentes. Por exemplo, ao usar o getServersideProps () para buscar uma API interna que retorne dados do usuário, é natural pensar que essa abordagem é ideal para fins de SEO. No entanto, a documentação Next.js aconselha -se a usar o Fetch () para chamar rotas de API em getServersideProps (). As rotas de API são executadas no servidor. Esta solicitação extra é ineficiente e não fornece benefícios adicionais. Isso permite que o getServersideProps () interaja diretamente com o banco de dados, o sistema de arquivos ou outros recursos sem introduzir chamadas de API desnecessárias. exportar manipulador de função assíncrona padrão (req, res) { const Response = aguarda busca (/ * endpoint externo da API */); const jSondata = Aguarda Response.json (); Res.status (200) .json (JSONDATA); }

Essa lógica pode ser extraída em uma função separada que pode ser usada na rota da API e GetServersideProps (): Exportar função assíncrona getData () { const Response = aguarda busca (/ * endpoint externo da API */); const jSondata = Aguarda Response.json (); devolver jsondata; } exportar manipulador de função assíncrona padrão (req, res) { const jsondata = aguarda getData (); Res.status (200) .json (JSONDATA); }

Isso permite que a função getData () seja reutilizada em getServersideProps ():

// páginas/home importar {getData} de './api/user'; Exportar função assíncrona getServersideProps (contexto) { const jsondata = aguarda getData (); // ... } Seguindo estas diretrizes, os desenvolvedores podem melhorar o desempenho e a eficiência de seus aplicativos Next.js, mantendo os benefícios de SEO.