Sekiranya Anda Menggunakan `fetch()` untuk Panggilan API Dalaman dalam `getServerSideProps` (Next.js)?

Pengambilan API Dalaman dengan getServerSideProps? (Next.js)

Dalam Next.js, fungsi getServerSideProps membolehkan anda mengambil data daripada pelayan sebelum memaparkan halaman, menjadikannya sesuai untuk SEO. Walau bagaimanapun, dokumentasi rasmi menasihatkan agar tidak menggunakan fetch() untuk memanggil laluan API dalaman dalam getServerSideProps.

Sebab Pengelakan

Memanggil laluan API dalaman daripada getServerSideProps adalah berlebihan kerana kedua-duanya dijalankan pada pelayan. Sebaliknya, logik daripada laluan API hendaklah dilaksanakan secara langsung dalam getServerSideProps untuk mengelakkan permintaan HTTP yang tidak diperlukan.

Pendekatan Alternatif

Untuk menggunakan logik daripada laluan API dalam getServerSideProps :

• Ekstrak logik pengambilan (cth., akses pangkalan data atau panggilan API luaran) ke dalam fungsi berasingan yang boleh dikongsi oleh kedua-dua laluan API dan getServerSideProps.
• Dalam laluan API, panggil fungsi kongsi ini untuk mengambil dan mengembalikan data.
• Dalam getServerSideProps, panggil fungsi kongsi yang sama untuk mengambil data terus daripada pelayan.

Contoh

halaman/api/user.js (laluan API dengan logik dikongsi)

import { getData } from "./userData";

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

pages/home.js (getServerSideProps menggunakan kongsi logik)

import { getData } from "./api/user";

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

Atas ialah kandungan terperinci Sekiranya Anda Menggunakan `fetch()` untuk Panggilan API Dalaman dalam `getServerSideProps` (Next.js)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!