Static Site Generations in Advanced - Chapter 5 (Bahasa Indonesia)

Thanks for reading.. Ini adalah chapter 5 dari pembahasan Next js as your Web Development Framework. Jika kamu belum membaca chapter sebelumnya silahkan kunjungi artikel tersebut pada link dibawah. Ok, mari kita lanjutkan…

Pada chapter sebelumnya kita sudah bahas bagaimana dasar penggunaan Static Site Generation (SSG) di Next.js. Sekarang kita akan bahas lebih dalam penggunaannya untuk kasus-kasus tertentu yang lebih spesifik dengan tujuan untuk lebih mengoptimasi performa aplikasi kita.

SSG memungkinkan kita memproduksi static HTML pada saat build phase, sehingga nantinya file tersebut akan di simpan pada CDN untuk disalurkan sesuai dengan request user. Pada SSG juga kita juga dapat menyematkan data dengan getStaticProps pada saat build phase. Namun bagaimana jika terjadi perubahan terhadap data yang kita ambil? Apakah halaman akan ter-update dengan data terbaru? Sayangnya jika menggunakan teknik sebelumnya, hal ini tidak akan tercapai, karena halaman sudah dibuat secara statis pada saat build phase.

secara garis besar, getStaticProps akan berjalan pada server-side ketika build phase. Itu artinya getStaticProps akan berjalan hanya satu kali saja untuk menghasilkan static HTML. There is no way it will run again during production. Oleh karenanya, data yang didapatkan hanyalah data yang berlaku ketika build phase dijalankan saja.

Tentu ini akan menjadi kendala jika terjadi perubahan atau pembaharuan data. Belum lagi jika page memerlukan akses terhadap parameter path dari halaman tersebut, akan menjadi masalah tersendiri. Oleh karena itu, Next.js menyediakan beberapa solusi yang bisa digunakan tanpa harus menghilangkan fungsi SSG

Context Parameter adalah sebuah object yang memiliki beberapa key yang disediakan oleh Next.js. Parameter ini berguna untuk menentukan bagaimana teknik getStaticProps dijalankan demi mencapai tujuan tertentu. Beberapa parameter yang perlu diketahui antara lain:

params params mungkin menjadi parameter yang akan sering kita gunakan pada getStaticProps dibandingkan parameter lainnya. params memungkinkan kita mengakses route parameter pada dynamic route yang dihasilkan oleh getStaticPaths. Jika suatu page memiliki nama [productId].js, maka params akan memiliki object seperti { productId: ... }. Namun params hanya tersedia jika getStaticPaths digunakan. kita akan bahas tentang getStaticPaths dan apa gunanya pada poin pembahasan berikutnya.

preview dan previewData parameter ini digunakan untuk mengaktifkan fitur Preview Mode pada Next.js. Informasi selengkapnya mengenai Preview Mode dapat dibaca di SINI.

locales, locale, dan defaultLocale parameter ini digunakan jika aplikasi kita menggunakan fitur internationalization yang memudahkan kita menerapkan perbedaan bahasa pada aplikasi kita. Informasi selengkapnya dapat dibaca di SINI.

Selain mengembalikan object props, getStaticProps dapat mengembalikan object notFound dan redirect untuk beberapa kasus dan tujuan tertentu. Sebagai tambahan getStaticProps juga memiliki optional props yaitu revalidate yang mempu me-render ulang page ketika ingin meng-update data pada page namun tidak menghilangkan fungsi SSG.

getStaticProps dapat mengembalikan object notFound agar pada kondisi tertentu page akan mengembalikan page error 404 walaupun sebenarnya page tersebut memiliki konten yang valid. Biasanya teknik ini digunakan untuk mengembalikan page error ketika suatu halaman konten dihapus oleh pemilik konten, menghasilkan halaman yang dihapus (not exist)

redirect memiliki fungsi yang mirip seperti notFound , namun bukannya mengembalikan page error 404, page akan melakukan redirect menuju halaman yang kita tentukan. Contohnya daripada mengembalikan page error ketika tidak menemukan page post yang dicari, kita akan melakukan redirect pada user menuju blog listing.

redirect harus berupa object dengan key salah satu dari { destination: string, permanent: boolean } atau { destination: string, statusCode: string }, namun tidak boleh keduanya.

revalidate adalah optional props yang memungkinkan kita melakukan pre-rendering ulang terhadap halaman yang dipilih. Teknik ini memang ditujukan untuk halaman yang ingin melakukan update data namun masih ingin menerapkan SSG. Halaman seperti blog post, product detail page, atau about page menjadi beberapa contoh halaman yang cocok menerapkan revalidate karena konten dapat di-update jika terdapat perubahan data namun frekuensi perubahan tidak terjadi terlalu sering.

Untuk menerapkan teknik ini, cukup tambahkan props revalidate pada dengan value berupa waktu interval dalam satuan detik (second). Coba lihat kode dibawah ini:

Dengan kode diatas, inilah yang sebenarnya terjadi:

Pada saat build phase, static HTML akan dihasilkan untuk page post.

user dapat mengakses page post pada path ' /blog/post ' yang berupa initial page.

Ketika user mengakses kembali page post pada interval 10 detik, pre-rendering ulang tidak terjadi. Next.js akan mengembalikan initial page seperti sebelumnya.

Ketika user mengakses kembali page post setelah interval 10 detik, Next.js akan tetap mengembalikan initial page (stale state), namun secara bersamaan, Next.js akan memproduksi static HTML yang baru dengan fetching data yang baru terlepas apakah ada perubahan data atau tidak.

user akan mendapatkan page post yang baru ketika melakukan request kembali setelah proses pre-rendering ulang terjadi.

getStaticPaths dibutuhkan pada dynamic page yang menggunakan getStaticProps. getStaticPaths berfungsi untuk memberikan daftar semua path yang terasosiasi pada dynamic page.

Sebagai contoh ketika dalam database, kita memiliki daftar blog post dengan id 1, 2, dan 3, kita harus mendaftarkan seluruh data ini supaya setiap path dapat diproduksi sebagai static HTML.

Dengan kode diatas, inilah yang sebenarnya terjadi:

Pada built phase, Next.js akan menjalankan getStaticPaths untuk mendaftarkan semua daftar post data yang ditarik melalui fetch, mengembalikan object paths yang berisi daftar params.

Kemudian untuk setiap params, getStaticProps akan dijalankan untuk memproduksi static HTML untuk setiap postId, sehingga akan dihasilkan 3 static page yang berisi post data untuk masing-masing postId 1, 2 dan 3.

fallback bernilai false pada getStaticPaths mengindikasikan bahwa getStaticPaths hanya akan dijalankan pada saat initial rendering pertama kali saja, sehingga jika terdapat postId yang baru (misal postId 4, dan postId 5), aplikasi akan mengembalikan page error karena path tersebut tidak tersedia.

fallback bernilai true pada getStaticPaths akan mencegah pengembalian page error. fallback bernilai true mengindikasikan bahwa getStaticPaths akan berjalan pada server ketika path baru di-request oleh user dimana path ini tidak didaftarkan pada saat initial render. Ketika user melakukan request pada path yang tidak tersedia pada getStaticPaths, Next.js akan mengembalikan fallback page berupa halaman kosong. Namun disaat yang bersamaan, getStaticPath akan mendaftarkan path baru ini (postId 4 dan postId 5) untuk diproses kembali oleh getStaticProps. Kemudian getStaticProps akan melakukan pre-rendering pada path ini untuk memproduksi static HTML yang baru. Proses ini berlangsung pada production environtment.

fallback bernilai blocking memiliki teknik yang sama dengan fallback bernilai true. Perbedaannya adalah teknik ini tidak mengembalikan fallback page, melainkan aplikasi akan menunggu getStaticProps melakukan pre-rendering hingga selesai. Dari sudut pandang user, dia akan melihat tab halaman yang sedang dimuat (loading).

Gunakan fallback bernilai true atau blocking jika kita memiliki daftar data yang besar (ratusan hingga ribuan daftar), agar mengurangi beban pre-rendering pada saat initial render berlangsung.

Demikian penjelasan bagaimana menggunakan Static Side Generations secara lebih mendalam untuk optimasi aplikasi. Pada chapter berikutnya kita akan beralih ke Server Side Rendering (SSR) sebagai solusi alternatif dari tujuan yang tidak bisa dicapai menggunakan SSG.