Bagaimana untuk Mengambil API Dalaman dan Melaksanakan Caching dalam getServerSideProps() Next.js?

Mengambil API Dalaman dalam getServerSideProps: Amalan Terbaik dan Caching

Dalam Next.js, mengurus data antara halaman dan komponen dengan berkesan adalah penting. Walau bagaimanapun, amalan tertentu harus diikuti untuk memastikan amalan pengekodan yang baik dan pematuhan SEO. Artikel ini menangani isu melaksanakan pengambilan API dalaman dalam getServerSideProps().

Menggunakan fetch() dalam getServerSideProps()

Bertentangan dengan pemahaman sebelumnya, dokumentasi Next.js menasihatkan agar tidak menggunakan fetch( ) untuk memanggil laluan API dalaman dalam getServerSideProps(). Sebaliknya, ia mencadangkan untuk memindahkan logik daripada laluan API terus ke getServerSideProps(). Ini menghapuskan permintaan tambahan yang tidak perlu kerana kedua-dua laluan getServerSideProps() dan API dilaksanakan pada pelayan.

Kelebihan Mengekstrak Logik API

Memisahkan logik pengambilan daripada laluan API membenarkan penggunaan semulanya bukan sahaja dalam laluan API itu sendiri tetapi juga dalam getServerSideProps(). Pendekatan ini memudahkan pengurusan pangkalan kod dan meningkatkan fleksibiliti.

Pertimbangan Caching

Caching memainkan peranan penting dalam meningkatkan prestasi. Caching sebelah pelanggan menggunakan teknik seperti SWR adalah mudah. Walau bagaimanapun, mencapai caching pada pelayan memerlukan pendekatan yang berbeza. Satu teknik adalah untuk melaksanakan logik caching terus dalam getServerSideProps(), memanfaatkan mekanisme cache sebelah pelayan seperti Redis atau Memcached.

Contoh Refactor

Pertimbangkan contoh berikut:

// pages/api/user.js
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);
}

Dalam keadaan ini, fungsi getData(), yang merangkumi logik pengambilan, boleh digunakan dalam pengendali laluan API dan dalam getServerSideProps(). Ini membolehkan kod yang lebih bersih dan pemerolehan data yang cekap.

Atas ialah kandungan terperinci Bagaimana untuk Mengambil API Dalaman dan Melaksanakan Caching dalam getServerSideProps() Next.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!