Menyelami Dunia Rendering dengan Next.js: Panduan Awal

Rendering merupakan Suatu proses yang merubah kode yang ditulis menjadi user interface, React dan Nextjs memungkinkan untuk membuat aplikasi web hybrid di mana bagian dari kode dapat di render di server atau klien.

CSR (Client Side Rendering) / Client Components

Client Side

CSR (Client Side Rendering) melakukan rendering halaman di client browser menggunakan javascript, server hanya mengirimkan minimal html dan javascript ke client selanjutnya proses rendering dilakukan di browser.

Saat aplikasi dibuka pertama kali halaman akan sedikit loading sebelum melihat terbuka secara menyeluruh, hal ini dikarenakan halaman tidak akan ditampilkan sampai javascript sepenuhnya di proses oleh browser.

CSR (Client Side Rendering)

Keuntungan Client Side Rendering

1. Web lebih interactive
2. Dapat mengakses browser APIs seperti localStorage dan geolocation

Kekurangan Client Side Rendering

1. Initial load time memakan waktu
2. Tidak SEO Friendly

SSR (Server Side Rendering)  / Dynamic Rendering

Server Side

SSR melakukan rendering halaman secara dinamis di server saat user membuat permintaan. Server mengirimkan HTML dan JavaScript yang sudah jadi ke client. Selanjutnya, proses hydration akan dilakukan oleh React di browser client.

ketika user akan pindah halaman yang menggunakan SSR, User akan mengalami sedikit penundaan sebelum berpindah ke halaman lain.

Secara default, Next.js menggunakan Server Components / SSR . Ini memungkinkan untuk secara otomatis menerapkan rendering server tanpa konfigurasi tambahan, dan kita dapat memilih untuk menggunakan Client Side Rendering ketika diperlukan cukup menambahkan ‘use client’ pada line pertama.

SSR (Server Side Rendering)

Keuntungan Server Side Rendering

1. SEO Friendly
2. Menyimpan data sensitif dan logic pada server, seperti token dan kunci API, tanpa risiko mengeksposnya kepada klien

Kekurangan Server Side Rendering

1. Beban server menjadi berat
2. Transisi antar page sedikit lebih lambat

Static Site Generation (SSG) / Static Rendering

Static Site

SSG melakukan rendering halaman HTML saat build time, atau ketika running next build. Biasanya SSG digunakan untuk app yang tidak menggunakan data yang dinamis.

• Marketing pages
• Blog posts and portfolios
• E-commerce product listings
• Help and documentation

Keuntungan Client Side Rendering

1. Performa web sangat baik
2. SEO Friendly

Kekurangan Client Side Rendering

1. Data tidak real time

Streaming

Streaming adalah teknik transfer data yang memecah rute menjadi "potongan" yang lebih kecil dan secara progresif mengalirkannya dari server ke klien saat mereka siap.

Streaming

Dengan streaming, Kita dapat mencegah permintaan data yang lambat dan menghalangi seluruh halaman Anda. Ini memungkinkan pengguna untuk melihat dan berinteraksi dengan bagian-bagian dari halaman tanpa harus menunggu semua data dimuat sebelum antarmuka pengguna dapat ditampilkan kepada user.

Ada 2 cara menggunakan streaming yaitu:

        1. Di level halaman menggunakan loading.tsx

Dengan menambahkan file loading.tsx, NextJs otomatis membuat fallback UI  ketika halaman konten masih dimuat.

File Directory

Code

Example 1: Streaming menggunakan loading.tsx

Kita bisa menambahkan stream pada setiap halaman menggunakan loading.ts, namun akan menyebabkan loading time yang lebih lama jika ada satu komponen yang pengambilan datanya lambat, user tidak bisa berinteraksi atau melihat bagian lain selain menu navigasi.

        2. Di Spesifik Component menggunakan <Suspense>

Buat Skeleton untuk fallback

Tambahkan <Suspense> pada component yang ingin diberikan Streaming

Example 2: Streaming menggunakan <Suspense>

Jika kita lihat contoh diatas, 4 card bagian atas menampilkan loading skeleton terlebih dahulu, hampir sama dengan card bagian Latest Invoices juga menampilkan skeleton terlebih dahulu namun pengambilan data-nya cukup memakan waktu, user masih bisa melihat bagian lain selagi menunggu Latest invoices dimuat. Untuk informasi menarik lainnya seputar teknologi dan IT, kunjungi: Blog Radya. Dan untuk konsultasi dalam pembuatan aplikasi dapat menghubungi tim kami di: Kontak Radya.

Sumber:

NextJS Documentation: Rendering

Demystifying rendering of NextJS | Cleverzone

Visual Explanation and Comparison of CSR, SSR, SSG and ISR | Dev.to

WTF Do These Even Mean | Web Dev Simplified 

Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) | theodorusclarence

Rendering | Codevolution

Key Differences Between Client-Side, Server-Side and Pre-rendering | Clockwise Software