Using Static Site Generation (SSG) in Next.js - Chapter 4 (Bahasa Indonesia)
Understanding how to use Static Generations Rendering (SGR) in Next.js
22 August, 2022
0
0
0
Contributors
.png?type=webp)
Thanks for reading..
Ini adalah chapter 4 dari pembahasan Next js as your Web Development Framework. Jika kamu beum membaca chapter sebelumnya silahkan kunjungi artkel tersebut di pada link dibawah.
Ok, mari kita lanjutkan…
Quick Preview: What is Static Site Generations (SSG)?
Pada chapter sebelumnya kita sudah sedikit membahas apa itu Static Site Generations (SSG). SSG adalah sebuah teknik yang diterapkan Next.js dengan memproduksi static HTML file dari kode javascript pada saat build phase, yaitu fase dimana aplikasi berada pada production environment. Static HTML file yang dihasilkan ini nantinya akan digunakan ulang (reuse) untuk setiap request oleh user.
Static Site Generations
Karena user me-request static HTML file dan kode javascript yang hanya dibutuhkan oleh page tersebut, secara performa aplikasi akan dimuat dengan lebih cepat dan lebih efisien. Selain itu static HTML dapat disimpan pada Content Delivery Network (CDN) untuk lebih mengefisiensikan akses secara global.
Using SSG in Next.js
By default, Next.js akan mengaplikasikan SSG untuk setiap page pada saat build phase. Dengan menjalankan command 'next build', Next.js akan mengoptimasi aplikasi untuk berjalan pada production environment dengan menerapkan SSG. Selama proses build, nantinya akan dihasilkan generation report ketika prosesnya selesai, dan semua file yang dihasilkan selama proses build berada pada folder .next . Folder inilah yang akan menjadi folder utama aplikasi yang akan diakses oleh user ketika melakukan request. coba kita terapkan menggunakan project kita pada chapter sebelumnya.
Run 'next build' command to execute build phase in Next.js
Then, kita bisa jalankan production server dengan command 'next start' agar bisa mengakses aplikasi yang telah teroptimasi ini.
Run 'next start' command to start the production server
Untuk menerapkan SSG, kita harus menjalankan next build command yang menjalankan aplikasi pada production environment. Pada development environment (dengan next dev command), aplikasi akan melakukan pre-rendering untuk setiap perubahan kode yang diterapkan.
SSG without data
SSG tipe ini menjadi tipe default yang akan diterapkan untuk semua page. Tipe ini tidak mengharuskan adanya fetching data pada saat built phase. Jadi, jika kita membuat sebuah page dengan kode seperti berikut:
Ketika build phase berhasil, static HTML akan dihasilkan dan siap untuk diakses oleh user.
SSG without fetching data
Mari kita pahami dulu apa arti dari report tersebut:
•
Setelah build phase, dihasilkan dua static HTML, yaitu ' / ' bersumber dari index.js dan ' /404 ' yang dibuat secara otomatis untuk menampilkan halaman error pada aplikasi. File inilah yang nantinya menjadi route bagi user ketika melakukan request pada aplikasi.
•
First Load JS, adalah javascript bundle yang dibutuhkan ketika user mengakses aplikasi melalui route yang telah disediakan (dalam hal ini hanya ' / ' dan ' /404 ' yang tersedia). Sebagai contoh, jika user mengakses ' / ' , maka server akan mengirimkan static HTML ' / ' (286 B in size) dan javascript bundle (78.1 kB in size)
•
Pada baris terakhir juga diterangkan bahwa kita hanya menghasilkan static html tanpa adanya data props (static html with no initial props)
SSG with data
Halaman-halaman seperti about page atau profile page mungkin membutuhkan data tambahan yang disimpan di database terpisah atau melalui API yang kita buat. Kita bisa capai tujuan ini dengan menggunakan fetching data pada saat build phase, sehingga data hanya diambil satu kali saat build phase saja.
Untuk melakukan fetch data pada skenario ini, kita dapat menggunakan async function getStaticProps yang disediakan oleh Next.js. getStaticProps adalah sebuah async function yang memungkinkan kita menjalankan fungsi tersebut pada build phase. getStaticProps hanya berjalan pada server-side, sehingga semua fungsi yang berjalan pada server dapat ditambahkan pada getStaticProps. Coba kita buat sebuah file pages/about.js dan tuliskan kode di bawah ini:
Ketika kita jalankan 'next build' command, maka getStaticProps akan berjalan untuk melakukan fetching data pada server-side dan mengembalikan object props. Ketika datanya telah siap, maka fungsi Home akan dijalankan untuk me-render page dengan data yang diambil dari variabel props (dalam hal ini saya lakukan destructuring untuk mengambil key data) untuk digunakan pada page. Maka sebuah static html '/about' akan diproduksi dan dapat diakses pada path '/about'.
SSG with fetching data
access about page
When to use Static Site Generations
Menggunakan SSG sangat disarankan untuk setiap page yang ingin dihasilkan. Hal ini yang memang menjadi tujuan mengapa menggunakan Next.js dimana static HTML yang dihasilkan akan disimpan menggunakan CDN. Beberapa alasan kapan harus menggunakan SSG antara lain:
1.
Jika halaman aplikasi menampilkan data yang statis atau tidak mengalami perubahan dengan frekuensi yang tinggi. Halaman - halaman yang cocok untuk skenario ini seperti Static Landing Page, Product Listing, Blog page, portfolio page, dan Documentation support page
2.
Jika halaman aplikasi menampilkan data dinamis yang tidak mengalami perubahan dengan frekuensi tinggi. Halaman - halaman yang cocok untuk skenario ini seperti About page, Blog Listing Page, Blog Content, dan Product Page. Hanya pastikan terapkan fungsi revalidate untuk halaman-halaman tersebut agar halaman dapat dimuat dengan data yang ter-update
3.
Jika halaman perlu diakses dengan sangat cepat, SEO-friendly, dan data cached yang bersifat publik (not user-specific) sehingga dapat memanfaatkan CDN
Meskipun begitu, SSG mungkin tidak cocok pada halaman seperti Stock Market, Realtime Monitoring Page, atau Realtime Chat Application yang memiliki data yang berubah untuk setiap request yang dilakukan oleh user. Untuk skenario seperti ini kita bisa lakukan 2 hal:
1.
Menerapkan Client-Side Rendering, dimana kita skip proses pre-rendering pada beberapa part atau component pada page, dan lakukan client-side javascript untuk me-render component tersebut dengan data ter-update.
2.
Menerapkan Server Side Rendering, dimana Next.js akan melakukan pre-rendering pada halaman untuk setiap request yang dilakukan user. Prosesnya akan lebih lambat karena tidak dapat disimpan di CDN, namun halaman akan menghasilkan data yang selalu update.
Next Chapter: Static Side Generations (SSG) in Advanced
Di chapter berikutnya kita akan bahas bagaimana menerapkan SSG lebih advanced untuk mengoptimasi aplikasi yang kita buat. Kita aka bahas bagaimana teknik fetching data yang efektif pada SSG, bagaimana menerapkan revalidate dan fallback, getStaticProps dan getStaticPaths, dan konsep lainnya pada SSG.
react
web development
next.js
static site generations
fullstack framework