внутренний API получает с помощью GetServersIdeProps in next.js

новички в next.js часто сталкивается с дилим при работе с данными между страницами или компонентами. Например, при использовании getserversideprops () для получения внутреннего API, который возвращает пользовательские данные, естественно думать, что этот подход идеально подходит для целей SEO. Тем не менее, документация Next.js консультирует против использования fetch () для вызова маршрутов API в GetServersIdeProps ().

Зачем избегать извлечения маршрутов API в getServersideProps ()? и маршруты API выполняются на сервере. Этот дополнительный запрос неэффективен и не предоставляет дополнительного преимущества.

Рекомендуемое практика

вместо вызова внутреннего API из getserversideprops (), логика должна быть непосредственно импортирована с маршрута API. Это позволяет GetserverSideProps () напрямую взаимодействовать с базой данных, файловой системой или другими ресурсами без введения ненужных вызовов API. Экспорт по умолчанию async -обработка функции (req, res) { const response = wat fetch (/ * Внешняя конечная точка API */); const jsondata = await response.json (); res.status (200) .json (jsondata); }

] Эта логика может быть извлечена в отдельную функцию, которую можно использовать как в маршруте API, так и в GetserverSideProps ():

// pages/api/user Экспорт асинхронная функция getData () { const response = wat fetch (/ * Внешняя конечная точка API */); const jsondata = await response.json (); вернуть Jsondata; } Экспорт по умолчанию async -обработка функции (req, res) { const jsondata = wait getData (); res.status (200) .json (jsondata); }

это позволяет повторно использовать функцию getData () в getServersIdeprops ():

// pages/home Импорт {getData} от './api/user'; Экспортная функция Async GetServerSideProps (context) { const jsondata = wait getData (); // ... }

Следуя этим руководящим принципам, разработчики могут повысить производительность и эффективность своих приложений.