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

Mengambil API Dalaman dalam getServerSideProps: Mengimbangi SEO dan Amalan Terbaik

Pengenalan:

Dalam Next.js, data komponen boleh dimuatkan pada pelayan menggunakan getServerSideProps(). Ini membantu SEO, kerana prop diambil dan diproses di bahagian pelayan, membolehkan rendering segera. Walau bagaimanapun, menggunakan fetch() untuk mengakses laluan API dalaman dalam getServerSideProps() adalah tidak digalakkan mengikut dokumentasi Next.js. Artikel ini menyelidiki sebab di sebalik pengesyoran ini dan meneroka pendekatan alternatif yang mengekalkan keserasian SEO.

Elakkan Memanggil API Dalaman Terus dengan fetch()

Sementara fetch() boleh digunakan untuk mendapatkan data daripada laluan API dalaman dalam getServerSideProps(), ia dinasihatkan supaya tidak. Sifat sebelah pelayan getServerSideProps() membolehkan anda mengakses logik, pangkalan data dan sumber lain secara langsung tanpa memerlukan permintaan API tambahan.

Menggunakan Semula Logik Laluan API dalam getServerSideProps()

Untuk mengatasinya, pertimbangkan untuk mengekstrak fungsi pengambilan laluan API ke dalam fungsi yang berasingan. Fungsi ini boleh digunakan oleh laluan API dan dalam getServerSideProps(), membolehkan perkongsian logik pengambilan data sambil mengelakkan panggilan API yang tidak perlu.

Contoh:

Dengan mengandaikan laluan API, pages/api/user, mengandungi kod berikut:

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

Kami boleh mengekstrak logik pengambilan data ke dalam fungsi yang dipanggil getData():

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 getServerSideProps(), kami kemudiannya boleh menggunakan getData():

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

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

Dengan melaksanakan pendekatan ini, kami mengekalkan kecekapan dan faedah SEO getServerSideProps() sambil menghormati amalan pengambilan data yang disyorkan yang digariskan oleh Next. js.

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