Mengapa Saya Perlu Mengelak Menggunakan Fetch untuk API Dalaman dalam getServerSideProps()?

Pengambilan API Dalaman dengan getServerSideProps dalam Next.js

Pendatang baru ke Next.js sering menghadapi dilema apabila berurusan dengan pengambilan data antara halaman atau komponen. Sebagai contoh, apabila menggunakan getServerSideProps() untuk mengambil API dalaman yang mengembalikan data pengguna, adalah wajar untuk berfikir bahawa pendekatan ini sesuai untuk tujuan SEO. Walau bagaimanapun, dokumentasi Next.js menasihatkan agar tidak menggunakan fetch() untuk memanggil laluan API dalam getServerSideProps().

Mengapa Elakkan Mengambil Laluan API dalam getServerSideProps()?

Memanggil laluan API dalaman dengan fetch() dalam getServerSideProps() adalah tidak perlu kerana kedua-duanya getServerSideProps() dan laluan API dilaksanakan pada pelayan. Permintaan tambahan ini tidak cekap dan tidak memberikan faedah tambahan.

Amalan Disyorkan

Daripada memanggil API dalaman daripada getServerSideProps(), logik harus diimport terus daripada Laluan API. Ini membolehkan getServerSideProps() berinteraksi secara langsung dengan pangkalan data, sistem fail atau sumber lain tanpa memperkenalkan panggilan API yang tidak perlu.

Contoh Refactor

Pertimbangkan laluan API yang digunakan untuk mengambil data daripada API luaran:

// 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);
}

Logik ini boleh diekstrak ke dalam fungsi berasingan yang boleh digunakan dalam kedua-dua laluan API dan getServerSideProps():

// pages/api/user
export async function getData() {
  const response = await fetch(/* external API endpoint */);
  const jsonData = await response.json();
  return jsonData;
}

export default async function handler(req, res) {
  const jsonData = await getData();
  res.status(200).json(jsonData);
}

Ini membolehkan fungsi getData() digunakan semula dalam getServerSideProps():

// pages/home
import { getData } from './api/user';

export async function getServerSideProps(context) {
  const jsonData = await getData();
  //...
}

Oleh mengikut garis panduan ini, pembangun boleh meningkatkan prestasi dan kecekapan aplikasi Next.js mereka sambil mengekalkan faedah SEO.

Atas ialah kandungan terperinci Mengapa Saya Perlu Mengelak Menggunakan Fetch untuk API Dalaman dalam getServerSideProps()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!