Saya pada dasarnya mengembangkan blog di Next.js. Karena ini adalah tim lain yang bertanggung jawab atas back-end, saat ini saya membuat panggilan API pengambilan dari getStaticProps untuk mendapatkan artikel saya meskipun praktik yang lebih baik adalah membuat kueri basis data secara langsung:

export async function getStaticProps({ params, res }) {
    try {
        const result = await fetch(`${API.baseURL}/get_article/${params.id}`);
        const article = await result.json();

        return {
            props: { article },
        };
    } catch (error) {
        res.statusCode = 404;
        return { props: {} };
    }
}

Meskipun ini bekerja dengan sempurna dalam mode pengembangan, mendapatkan artikel, mengeditnya, dan kemudian mengaksesnya lagi tidak berfungsi dalam produksi (bahkan secara lokal, dengan versi bawaan).

Saya kira itu ada hubungannya dengan Next.js yang menangani cache entah bagaimana ... Apa yang saya lakukan salah? Terima kasih!

1
Thanh-Quy Nguyen 2 Juli 2020, 20:01

1 menjawab

Jawaban Terbaik

Pertama-tama argumen fungsi getStaticProps yaitu objek context tidak memiliki properti bernama res. Jadi res.statusCode = 404; tidak melakukan apa pun di sini.

Dan getStaticProps dimaksudkan untuk digunakan untuk pembuatan situs statis, selain itu untuk rute dinamis, Anda dapat mengekspor fungsi lain getStaticPaths yang akan menghasilkan dan mengembalikan larik jalur dengan rute dinamis parameter yang getStaticProps akan dipanggil pada waktu pembuatan untuk pra-perenderan laman.

Dalam mode pengembangan, metode pengambilan data akan disebut basis per-permintaan sehingga kode Anda berfungsi. Namun dalam mode produksi, ini akan menampilkan halaman statis yang telah dirender sebelumnya yang berarti halaman tersebut akan menampilkan konten seperti yang dirender dan jika Anda mengedit dan memperbarui konten, itu tidak akan tercermin pada halaman.

Jika Anda memutuskan untuk menggunakan pembuatan situs statis, Anda harus membangun kembali seluruh situs setelah memperbarui blog atau Anda harus memiliki semacam logika sisi klien data-fetching yang akan memperbarui blog ketika Anda memperbarui kontennya.

Untuk pengambilan data sisi klien, Anda dapat menggunakan sesuatu seperti swr atau react-query

Berikut adalah beberapa kode-psuedo yang mungkin membantu dengan pra-render halaman,

Untuk rute /article/[articleId]

export async function getStaticPaths() {
  const articles = await /* db query to get the list of articles or fetch from remote API*/

  // generate a list of paths with route params
  const paths = articles.map(article => ({ params: { articleId: article.id }}))

  return {
     paths,
     fallback: false 
     // fallback can be  true if you want to show a fallback version of page 
     // and serve JSON for unknown articles
  }

}


export async function getStaticProps(ctx) {
    try {
        const result = await fetch(`${API.baseURL}/get_article/${params.id}`);
        const article = await result.json();

        return {
            props: { article },
        };
    } catch (error) {
        return {
          props: null
        }
    }
}

Pelajari lebih lanjut cara kerja fallback dalam nilai kembalian fungsi getStaticPaths dokumen.

Alternatif lain adalah menggunakan getServerSideProps sebagai metode pengambilan data yang akan dipanggil pada setiap permintaan halaman, tetapi TTFB(time to first byte) akan lebih tinggi. Jadi untuk situs posting blog, saya tidak akan menyarankan menggunakan getServerSideProps.

4
subashMahapatra 2 Juli 2020, 17:44