Panduan Lengkap Untuk Incremental Static Regeneration (ISR) With Next.js

Setahun yang lalu, Next.js 9.3 merilis dukungan untuk Static Site Generation (SSG) menjadikannya framework hybrid pertama. Saya telah menjadi pengguna Next.js yang bahagia selama beberapa tahun pada saat ini, tetapi rilis ini menjadikan Next.js sebagai solusi default baru saya. Setelah bekerja dengan Next.js secara ekstensif, saya bergabung dengan Vercel untuk membantu perusahaan seperti Tripadvisor dan Washington Post saat mereka mengadopsi dan menskalakan Next.js.

Pada artikel ini, saya ingin menjelajahi evolusi baru Jamstack: Incremental Static Regeneration (ISR) . Di bawah ini Anda akan menemukan panduan untuk ISR – termasuk kasus penggunaan, demo, dan pengorbanan.

Masalah dengan Pembuatan Situs Statis

Ide di balik Jamstack menarik: halaman statis yang telah dirender sebelumnya yang dapat didorong ke CDN dan tersedia secara global dalam hitungan detik. Konten statis cepat, tahan terhadap waktu henti, dan langsung diindeks oleh crawler. Tetapi ada beberapa masalah.

Jika Anda telah mengadopsi arsitektur Jamstack saat membuat situs statis berskala besar, Anda mungkin terjebak menunggu berjam-jam hingga situs Anda dibuat. Jika Anda menggandakan jumlah halaman, waktu pembuatan juga akan berlipat ganda. Mari pertimbangkan Target.com . Apakah mungkin untuk menghasilkan jutaan produk secara statis dengan setiap penerapan?

Meskipun setiap halaman dibuat secara statis dalam 1 md yang tidak realistis, masih perlu waktu berjam-jam untuk membangun kembali seluruh situs . Untuk aplikasi web besar, memilih pembuatan situs statis lengkap bukanlah hal yang mudah. Tim berskala besar membutuhkan solusi hybrid yang lebih fleksibel dan dipersonalisasi.

Sistem Manajemen Konten (CMS)

Bagi banyak tim, konten situs mereka dipisahkan dari kode. Menggunakan CMS Headless memungkinkan editor konten untuk mempublikasikan perubahan tanpa melibatkan pengembang. Namun, dengan situs statis tradisional, proses ini bisa lambat.

Pertimbangkan toko e-niaga dengan 100.000 produk. Harga produk sering berubah. Saat editor konten mengubah harga headphone dari $ 100 menjadi $ 75 sebagai bagian dari promosi, CMS mereka menggunakan webhook untuk membangun kembali seluruh situs. Tidaklah mungkin menunggu berjam-jam hingga harga baru direfleksikan.

Bangunan panjang dengan perhitungan yang tidak perlu mungkin juga menimbulkan biaya tambahan. Idealnya, aplikasi Anda cukup cerdas untuk memahami produk mana yang berubah dan secara bertahap memperbarui halaman tersebut tanpa perlu membangun ulang sepenuhnya .

Incremental Static Regeneration (ISR)

Next.js memungkinkan Anda untuk membuat atau memperbarui halaman statis setelah Anda membangun situs Anda. Incremental Static Regeneration (ISR) memungkinkan pengembang dan editor konten menggunakan pembuatan statis per halaman, tanpa perlu membangun ulang seluruh situs . Dengan ISR, Anda dapat mempertahankan manfaat statis sambil menskalakan jutaan halaman.

Halaman statis dapat dibuat pada waktu proses (sesuai permintaan), bukan pada waktu pembuatan dengan ISR. Dengan menggunakan analitik, pengujian A / B, atau metrik lainnya, Anda dilengkapi dengan fleksibilitas untuk membuat kompromi Anda sendiri pada waktu pembuatan.

Pertimbangkan toko e-commerce sebelumnya dengan 100.000 produk. Pada 50ms realistis untuk membuat setiap halaman produk secara statis, ini akan memakan waktu hampir 2 jam tanpa ISR . Dengan ISR, kita dapat memilih dari:

  • Build Lebih Cepat
    Hasilkan 1.000 produk paling populer pada waktu pembuatan. Permintaan yang dibuat untuk produk lain akan menjadi cache miss dan secara statis menghasilkan on-demand: build 1 menit.
  • Tingkat Hit Cache Lebih Tinggi
    Hasilkan 10.000 produk pada waktu build, memastikan lebih banyak produk disimpan dalam cache sebelum permintaan pengguna: build 8 menit.

Mari kita telusuri contoh ISR untuk halaman produk e-niaga.

Mulai

Mengambil Data

Jika Anda belum pernah menggunakan Next.js sebelumnya, saya sarankan membaca Memulai Dengan Next.js untuk memahami dasar-dasarnya. ISR menggunakan API Next.js yang sama untuk menghasilkan halaman statis: getStaticProps . Dengan menentukan revalidate: 60 , kami memberi tahu Next.js untuk menggunakan ISR untuk halaman ini.

  1. Next.js dapat menentukan waktu validasi ulang per halaman. Mari kita atur ke 60 detik.
  2. Permintaan awal ke halaman produk akan menampilkan halaman cache dengan harga asli.
  3. Data untuk produk diperbarui di CMS.
  4. Setiap permintaan ke halaman setelah permintaan awal dan sebelum 60 detik akan di-cache dan seketika.
  5. Setelah jendela 60 detik, permintaan berikutnya masih akan menampilkan halaman cache (basi). Next.js memicu regenerasi halaman di latar belakang .
  6. Setelah halaman berhasil dibuat, Next.js akan membuat cache tidak valid dan menampilkan halaman produk yang diperbarui. Jika regenerasi latar belakang gagal, halaman lama tetap tidak berubah.
 // pages/products/[id].js export async function getStaticProps({ params }) { return { props: { product: await getProductFromDatabase(params.id) }, revalidate: 60 } }

Menghasilkan Paths

Next.js menentukan produk mana yang akan dihasilkan pada waktu pembuatan dan produk mana yang sesuai permintaan. Mari kita hanya menghasilkan 1.000 produk paling populer pada waktu getStaticPaths dengan memberi getStaticPaths daftar 1.000 ID produk teratas.

Kita perlu mengonfigurasi bagaimana Next.js akan "fallback" saat meminta salah satu produk lain setelah build awal. Ada dua opsi untuk dipilih: blocking dan true .

  • fallback: blocking (lebih disukai)
    Saat permintaan dibuat ke halaman yang belum dibuat, Next.js akan merender halaman di server pada permintaan pertama. Permintaan selanjutnya akan menyajikan file statis dari cache.
  • fallback: true
    Saat permintaan dibuat ke halaman yang belum dibuat, Next.js akan segera menyajikan halaman statis dengan status pemuatan pada permintaan pertama. Saat data selesai dimuat, halaman akan dirender ulang dengan data baru dan di-cache. Permintaan selanjutnya akan menyajikan file statis dari cache.
 // pages/products/[id].js export async function getStaticPaths() { const products = await getTop1000Products() const paths = products.map((product) => ({ params: { id: product.id } })) return { paths, fallback: 'blocking' } }

Pengorbanan

Next.js berfokus pertama dan terutama pada pengguna akhir. "Solusi terbaik" bersifat relatif dan bervariasi menurut industri, audiens, dan sifat aplikasi. Dengan mengizinkan pengembang untuk beralih di antara solusi tanpa meninggalkan batasan kerangka kerja, Next.js memungkinkan Anda memilih alat yang tepat untuk proyek tersebut.

Rendering Sisi Server

ISR tidak selalu menjadi solusi yang tepat. Misalnya, umpan berita Facebook tidak dapat menampilkan konten basi. Dalam contoh ini, Anda ingin menggunakan SSR dan kemungkinan header cache-control Anda sendiri dengan kunci pengganti untuk membuat konten tidak valid. Karena Next.js adalah framework hybrid, Anda dapat membuat tradeoff itu sendiri dan tetap berada di dalam framework.

 // You can cache SSR pages at the edge using Next.js // inside both getServerSideProps and API Routes res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate');

SSR dan edge caching mirip dengan ISR (terutama jika menggunakan stale-while-revalidate ) dengan perbedaan utama pada permintaan pertama. Dengan ISR, permintaan pertama dapat dijamin statis jika dirender sebelumnya. Meskipun database Anda tidak berfungsi, atau ada masalah saat berkomunikasi dengan API, pengguna Anda masih akan melihat halaman statis yang ditayangkan dengan benar. Namun, SSR akan memungkinkan Anda untuk menyesuaikan halaman Anda berdasarkan permintaan yang masuk.

Catatan : Menggunakan SSR tanpa caching dapat menyebabkan kinerja yang buruk. Setiap milidetik penting saat memblokir pengguna untuk melihat situs Anda, dan ini dapat memberikan efek dramatis pada TTFB (Time to First Byte) Anda.

Pembuatan Situs Statis

ISR tidak selalu masuk akal untuk situs web kecil. Jika periode validasi ulang Anda lebih lama dari waktu yang dibutuhkan untuk membangun kembali seluruh situs Anda, Anda mungkin juga menggunakan pembuatan situs statis tradisional.

Rendering Sisi Klien

Jika Anda menggunakan React tanpa Next.js, Anda menggunakan rendering sisi klien. Aplikasi Anda melayani status pemuatan, diikuti dengan meminta data di dalam JavaScript di sisi klien (misalnya useEffect ). Meskipun ini meningkatkan pilihan Anda untuk hosting (karena tidak ada server yang diperlukan), ada pengorbanan.

Kurangnya konten pra-render dari HTML awal menyebabkan Pengoptimalan Mesin Telusur (SEO) yang lebih lambat dan kurang dinamis. Juga tidak mungkin menggunakan CSR dengan JavaScript dinonaktifkan.

Opsi Penggantian ISR

Jika data Anda dapat diambil dengan cepat, pertimbangkan untuk menggunakan fallback: blocking . Kemudian, Anda tidak perlu mempertimbangkan status pemuatan dan halaman Anda akan selalu menampilkan hasil yang sama (terlepas dari apakah itu di-cache atau tidak). Jika pengambilan data Anda lambat, fallback: true memungkinkan Anda untuk segera menampilkan status pemuatan kepada pengguna.

ISR: Bukan Hanya Caching!

Meskipun saya telah menjelaskan ISR melalui konteks cache, ISR dirancang untuk mempertahankan halaman yang Anda buat di antara penerapan. Ini berarti Anda dapat memutar kembali secara instan dan tidak kehilangan halaman yang Anda buat sebelumnya.

Setiap penerapan dapat dikunci dengan ID, yang digunakan Next.js untuk mempertahankan halaman yang dibuat secara statis. Saat Anda melakukan rollback, Anda dapat mengupdate kunci agar mengarah ke penerapan sebelumnya, memungkinkan penerapan atomic. Ini berarti Anda dapat mengunjungi penerapan yang tidak dapat diubah sebelumnya dan penerapan tersebut akan berfungsi sebagaimana mestinya.

  • Berikut contoh mengembalikan kode dengan ISR:
  • Anda memasukkan kode dan mendapatkan ID penerapan 123.
  • Halaman Anda salah ketik "Majalah Smshng".
  • Anda memperbarui halaman di CMS. Tidak perlu penerapan ulang.
  • Setelah halaman Anda menampilkan "Majalah Smashing", itu tetap ada di penyimpanan.
  • Anda mendorong beberapa kode buruk dan menyebarkan ID 345.
  • Anda memutar kembali ke ID penerapan 123.
  • Anda masih melihat "Majalah Smashing".

Halaman statis yang dikembalikan dan dipertahankan berada di luar cakupan Next.js dan bergantung pada penyedia hosting Anda. Perhatikan bahwa ISR berbeda dari rendering server dengan Cache-Control karena, menurut desain, cache kedaluwarsa. Mereka tidak dibagikan di seluruh wilayah dan akan dihapus saat mengembalikan.

Contoh Regenerasi Statis Bertambah

Incremental Static Regeneration berfungsi dengan baik untuk e-niaga, halaman pemasaran, posting blog, media yang didukung iklan, dan banyak lagi.

  • Demo E-niaga
    Next.js Commerce adalah kit permulaan lengkap untuk situs e-niaga berkinerja tinggi.
  • Demo Reaksi GitHub
    Bereaksi terhadap masalah GitHub asli dan lihat ISR memperbarui halaman landing yang dibuat secara statis.
  • Demo Tweet Statis
    Proyek ini diterapkan dalam 30 detik, tetapi dapat secara statis menghasilkan 500 juta tweet sesuai permintaan menggunakan ISR.

Pelajari Next.js Hari Ini

Pengembang dan tim besar memilih Next.js karena pendekatan hybrid dan kemampuannya untuk secara bertahap menghasilkan halaman sesuai permintaan. Dengan ISR, Anda mendapatkan manfaat statis dengan fleksibilitas rendering server. ISR bekerja di luar kotak menggunakan next start .

Next.js telah dirancang untuk adopsi bertahap . Dengan Next.js, Anda dapat terus menggunakan kode yang ada dan menambahkan React sebanyak (atau sesedikit) yang Anda butuhkan. Dengan memulai dari yang kecil dan secara bertahap menambahkan lebih banyak halaman, Anda dapat mencegah fitur tergelincir bekerja dengan menghindari penulisan ulang lengkap. Pelajari lebih lanjut tentang Next.js – dan selamat membuat kode, semuanya!

Bacaan lebih lanjut

April 21, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *