Panduan Lengkap Untuk Regenerasi Statis Inkremental (ISR) Dengan Next.js

Setahun yang lalu, Next.js 9.3 merilis dukungan untuk Static Site Generation (SSG) menjadikannya kerangka kerja hybrid pertama. Saya telah menjadi pengguna Next.js yang bahagia selama sekitar 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.

Dalam artikel ini, saya ingin menjelajahi evolusi baru dari 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 sangat menarik: halaman statis pra-render yang dapat didorong ke CDN dan tersedia secara global dalam hitungan detik. Konten statis cepat, tahan terhadap waktu henti, dan segera diindeks oleh perayap. Tapi ada beberapa masalah.

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

Bahkan jika 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 baru. Tim skala besar membutuhkan solusi hybrid yang lebih fleksibel dan personal.

Sistem Manajemen Konten (CMS)

Bagi banyak tim, konten situs mereka dipisahkan dari kode. Menggunakan CMS Tanpa Kepala memungkinkan editor konten untuk memublikasikan 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. Tidak mungkin menunggu berjam-jam untuk melihat harga baru.

Pembuatan lama dengan perhitungan yang tidak perlu juga dapat menimbulkan biaya tambahan. Idealnya, aplikasi Anda cukup cerdas untuk memahami produk mana yang berubah dan memperbarui halaman tersebut secara bertahap tanpa perlu membangun kembali sepenuhnya .

Regenerasi Statis Inkremental (ISR)

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

Halaman statis dapat dibuat saat runtime (sesuai permintaan) alih-alih saat build dengan ISR. Dengan menggunakan analitik, pengujian A/B, atau metrik lainnya, Anda dilengkapi dengan fleksibilitas untuk membuat tradeoff Anda sendiri pada waktu pembuatan.

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

• Pembuatan Lebih Cepat
  Hasilkan 1.000 produk paling populer pada waktu pembuatan. Permintaan yang dibuat ke 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 pembuatan, memastikan lebih banyak produk di-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 Next.js API yang sama untuk menghasilkan halaman statis: getStaticProps . Dengan menentukan revalidate: 60 , kami menginformasikan Next.js untuk menggunakan ISR untuk halaman ini.

1. Next.js dapat menentukan waktu validasi ulang per halaman. Mari kita atur pada 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 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 membatalkan cache 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 Jalur

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

Kita perlu mengonfigurasi bagaimana Next.js akan "mengundurkan diri" 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 membuat halaman server pada permintaan pertama. Permintaan di masa mendatang 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. Ketika data selesai dimuat, halaman akan dirender ulang dengan data baru dan di-cache. Permintaan di masa mendatang 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 batas kerangka kerja, Next.js memungkinkan Anda memilih alat yang tepat untuk proyek tersebut.

Rendering Sisi Server

ISR tidak selalu merupakan 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 membatalkan konten. Karena Next.js adalah kerangka kerja hibrida, Anda dapat melakukan kompromi itu sendiri dan tetap berada dalam kerangka kerja.

 // 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 header caching stale-while-revalidate ) dengan perbedaan utama adalah permintaan pertama . Dengan ISR, permintaan pertama dapat dijamin statis jika telah dirender sebelumnya. Bahkan jika database Anda turun, atau ada masalah saat berkomunikasi dengan API, pengguna Anda masih akan melihat halaman statis yang disajikan 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 agar tidak melihat situs Anda, dan ini dapat memiliki 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 besar dari waktu yang diperlukan untuk membangun kembali seluruh situs Anda, Anda sebaiknya menggunakan pembuatan situs statis tradisional.

Rendering Sisi Klien

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

Kurangnya konten pra-render dari HTML awal mengarah ke Search Engine Optimization (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, ini dirancang untuk mempertahankan halaman yang Anda buat di antara penerapan. Ini berarti Anda dapat memutar kembali secara instan dan tidak kehilangan halaman yang dibuat sebelumnya.

Setiap penerapan dapat dikunci dengan ID, yang digunakan Next.js untuk mempertahankan halaman yang dibuat secara statis. Saat Anda memutar kembali, Anda dapat memperbarui kunci untuk menunjuk ke penerapan sebelumnya, memungkinkan penerapan atom. Ini berarti Anda dapat mengunjungi penerapan yang tidak dapat diubah sebelumnya dan akan berfungsi sebagaimana mestinya.

• Berikut ini contoh pengembalian kode dengan ISR:
• Anda mendorong kode dan mendapatkan ID penerapan 123.
• Halaman Anda mengandung kesalahan ketik "Majalah Smshng".
• Anda memperbarui halaman di CMS. Tidak diperlukan penggelaran ulang.
• Setelah halaman Anda menampilkan "Smashing Magazine", itu tetap ada di penyimpanan.
• Anda mendorong beberapa kode buruk dan menyebarkan ID 345.
• Anda memutar kembali ke ID penerapan 123.
• Anda masih melihat "Smashing Magazine".

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

Contoh Regenerasi Statis Inkremental

Regenerasi Statis Inkremental bekerja dengan baik untuk e-niaga, halaman pemasaran, posting blog, media yang didukung iklan, dan banyak lagi.

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

Pelajari Selanjutnya.js Hari Ini

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

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

Bacaan lebih lanjut

• Memulai Dengan Next.js
• Membandingkan Metode Penataan Gaya di Next.js
• Cara Membangun Server GraphQL Menggunakan Rute API Next.js