Using Server Side Rendering (SSR) in Next.js - Chapter 6 (Bahasa Indonesia)
23 August, 2022
1
1
0
Contributors
.png?type=webp)
Thanks for reading..
Ini adalah chapter 6 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…
Quick Preview: What is Server Side Rendering (SSR)?
Pada chapter The concept of Pre-Rendering, sudah sedikit disinggung tentang apa itu Server Side Rendering (SSR). SSR adalah sebuah teknik yang diterapkan Next.js yang memungkinkan server memproduksi static HTML untuk setiap request yang dilakukan oleh user. Teknik ini memungkinkan aplikasi untuk tetap memiliki performa SEO yang baik dengan tetap mempertahankan performa akses aplikasi agar tetap baik untuk user. Teknik ini juga sangat baik digunakan pada halaman yang memerlukan update data untuk setiap request yang dilakukan user.
Server Side Rendering (SSR)
Using SSR in Next.js
Seperti sebelumnya, kita perlu menjalankan 'next build' command untuk mengaktifkan fitur pre-rendering. Pada teknik Static Site Generation (SSG) kita perlu menggunakan async function getStaticProps, sedangkan pada SSR kita perlu menggunakan async function getServerSideProps. Seperti SSG, SSR juga mengembalikan sebuah object props yang dapat berisi data yang akan kita tampilkan nantinya pada page component.
Understanding how fetching data works with getServerSideProps
Kita juga dapat melakukan fetching data yang diimplementasikan pada getServerSideProps. Berbeda dengan getStaticProps yang hanya dijalankan pada build phase, getServerSideProps akan dieksekusi untuk setiap request yang dilakukan oleh user. Hal inilah yang memungkinkan aplikasi selalu mendapatkan data yang up-to-date untuk setiap request-nya.
SSR will run on every request happen
Context Parameter
Seperti getStaticProps, getServerSideProps juga memiliki Context Parameter. Beberapa parameter yang bisa kita manfaatkan:
•
params
params memungkinkan kita mengakses route parameter pada dynamic route. Jika suatu page memiliki nama [productId].js, maka params akan memiliki object seperti { productId: … }. Pada getServerSideProps, params dapat langsung diakses tanpa perlu menggunakan getStaticPaths
•
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.
•
query
query parameter memungkinkan kita mendapatkan query string pada route dalam bentuk object. query parameter juga akan mendapatkan params sekaligus dalam object-nya
•
req dan res
Pada getServerSideProps kita juga bisa mendapatkan parameter req yaitu HTTP request object dan res yaitu HTTP response object untuk dimanipulasi
getServerSideProps return value
getServerSideProps memiliki return value yang hampir sama dengan getStaticProps, hanya saja disini tidak perlu optional props revalidate.
notFound
getServerSideProps 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
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.
When to use Server Side Rendering (SSR)?
Menggunakan SSR memang tidak memiliki performa sebaik SSG. SSR didesain untuk kebutuhan halaman yang memerlukan pembaharuan data untuk setiap request yang dilakukan dengan tetap memanfaatkan aspek SEO dan performa. Jika aplikasi kita membutuhkan fetch data untuk setiap request, sebagai contoh search page, portal berita, atau social media carousel yang membutuhkan pre-rendering, SSR akan cocok diterapkan.
Next Chapter: Using Client Side Rendering in Next.js
Demikian penjelasan mengenai Server Side Rendering sebagai alternatif untuk mengoptimasi aplikasi Next.js. Pada chapter selanjutnya, kita akan membahas bagaimana cara menggunakan Client Side Rendering (CSR) di Next.js.
react
web development
next.js
server side rendering
fullstack framework