interna api para obtener getserversideprops en next.js

recién llegados a next.js a menudo se encuentra un dilema cuando se trata de datos entre páginas o componentes. Por ejemplo, cuando se usa GetServerSideProps () para obtener una API interna que devuelve los datos del usuario, es natural pensar que este enfoque es ideal para fines de SEO. Sin embargo, la documentación de Next.js aconseja que use fetch () para llamar a las rutas API dentro de getserverSideProps ().

¿por qué evitar obtener rutas API de API en getServerSideProps ()? y las rutas API se ejecutan en el servidor. Esta solicitud adicional es ineficiente y no proporciona un beneficio adicional.

Práctica recomendada

en lugar de llamar a la API interna de getServerSideProps (), la lógica debe importarse directamente desde la ruta API. Esto permite que getServerSideProps () interactúe directamente con la base de datos, el sistema de archivos u otros recursos sin introducir llamadas API innecesarias.

Ejemplo Refactor

Considere una ruta API utilizada para obtener datos de una API externa:

Esta lógica se puede extraer en una función separada que se puede usar tanto en la ruta API como en GetServerSideProps ():

// páginas/api/user Exportar función async getData () { Const Respuesta = ALEA FETCH (/ * Punto final de API externo */); const jSondata = ALEA APULSE.JSON (); regresar jsondata; } Exportar Handler de funciones Async predeterminado (REQ, RES) { const jSondata = ALEA GetData (); Res.Status (200) .Json (JSondata); }

// pages/api/user
export default async function handler(req, res) {
  const response = await fetch(/* external API endpoint */);
  const jsonData = await response.json();
  res.status(200).json(jsonData);
}

Esto permite que la función getData () se reutilice en getserversideProps ():

// páginas/home import {getData} de './api/user'; Exportar la función async getServerSideProps (context) { const jSondata = ALEA GetData (); // ... }

// pages/api/user
export default async function handler(req, res) {
  const response = await fetch(/* external API endpoint */);
  const jsonData = await response.json();
  res.status(200).json(jsonData);
}

siguiendo estas pautas, los desarrolladores pueden mejorar el rendimiento y la eficiencia de sus aplicaciones Next.js mientras mantienen los beneficios de SEO.