Apa itu Rendering di Next.js
Salah satu alasan kenapa banyak developer memilih Next.js dibandingkan React biasa adalah karena fleksibilitas dalam cara melakukan rendering halaman.
Jika menggunakan React SPA tradisional, biasanya semua halaman dirender di browser (client-side). Artinya browser harus:
download JavaScript
menjalankan script
baru menampilkan konten
Pendekatan ini sering menyebabkan halaman terasa lambat saat pertama kali dibuka.
Next.js menawarkan beberapa strategi rendering yang lebih optimal:
Server Side Rendering (SSR)
Static Site Generation (SSG)
Incremental Static Regeneration (ISR)
Dengan memilih strategi yang tepat, kita bisa meningkatkan:
performa aplikasi
SEO
pengalaman pengguna
Di artikel ini kita akan membahas bagaimana masing-masing metode bekerja dan kapan sebaiknya digunakan.
Client Side Rendering (CSR)
Sebelum masuk ke metode rendering di Next.js, kita perlu memahami dulu konsep Client Side Rendering (CSR).
Ini adalah pendekatan yang paling umum digunakan oleh aplikasi React.
Alur kerjanya biasanya seperti ini:
Browser membuka halaman
Server mengirim HTML kosong
Browser mendownload JavaScript
React merender halaman di browser
Contoh sederhana di Next.js menggunakan client component:
"use client"
import { useEffect, useState } from "react"
export default function UsersPage() {
const [users, setUsers] = useState([])
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(data => setUsers(data))
}, [])
return (
<main>
<h1>Users</h1>
<ul>
{users.map((user: any) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</main>
)
}Kelebihan CSR:
interaktif
cocok untuk dashboard
navigasi sangat cepat setelah halaman dimuat
Namun ada beberapa kekurangan:
SEO kurang optimal
loading pertama lebih lambat
bergantung pada JavaScript
Karena itulah Next.js menyediakan strategi rendering lain.
Server Side Rendering (SSR)
Server Side Rendering (SSR) berarti halaman dirender di server setiap kali ada request dari user.
Alur kerjanya:
user membuka halaman
server menjalankan kode React
server mengirim HTML yang sudah jadi
browser langsung menampilkan halaman
Dengan cara ini, user tidak perlu menunggu JavaScript selesai dijalankan sebelum melihat konten.
Contoh SSR di Next.js menggunakan server component:
export default async function Page() {
const res = await fetch("https://jsonplaceholder.typicode.com/posts")
const posts = await res.json()
return (
<main>
<h1>Posts</h1>
{posts.slice(0, 5).map((post: any) => (
<p key={post.id}>{post.title}</p>
))}
</main>
)
}Keuntungan SSR:
SEO sangat baik
konten langsung muncul
cocok untuk halaman yang datanya sering berubah
Contoh penggunaan:
halaman berita
halaman produk
halaman pencarian
Namun SSR juga memiliki kekurangan karena server harus merender halaman setiap request.
Static Site Generation (SSG)
Berbeda dengan SSR, Static Site Generation (SSG) merender halaman saat proses build.
Artinya HTML sudah dibuat sebelum website diakses oleh user.
Alurnya seperti ini:
developer menjalankan build
Next.js membuat HTML statis
HTML tersebut disajikan ke user
Contoh sederhana:
export default async function BlogPage() {
const res = await fetch("https://jsonplaceholder.typicode.com/posts")
const posts = await res.json()
return (
<main>
<h1>Blog</h1>
{posts.slice(0, 5).map((post: any) => (
<p key={post.id}>{post.title}</p>
))}
</main>
)
}Keuntungan SSG:
sangat cepat
cocok untuk SEO
server load sangat kecil
SSG biasanya digunakan untuk:
blog
landing page
dokumentasi
halaman marketing
Namun ada satu kekurangan: jika data berubah, kita harus melakukan build ulang.
Incremental Static Regeneration (ISR)
Untuk mengatasi keterbatasan SSG, Next.js menyediakan Incremental Static Regeneration (ISR).
Dengan ISR, halaman tetap statis tetapi bisa diperbarui secara otomatis setelah beberapa waktu.
Contoh penggunaan:
export default async function Page() {
const res = await fetch(
"https://jsonplaceholder.typicode.com/posts",
{
next: { revalidate: 60 }
}
)
const posts = await res.json()
return (
<main>
<h1>Latest Posts</h1>
{posts.slice(0, 5).map((post: any) => (
<p key={post.id}>{post.title}</p>
))}
</main>
)
}Penjelasan:
revalidate: 60Artinya halaman akan diperbarui setiap 60 detik.
Keuntungan ISR:
performa hampir sama dengan SSG
data bisa otomatis diperbarui
tidak perlu build ulang seluruh website
ISR sering digunakan untuk:
blog
katalog produk
halaman listing
Kapan Menggunakan SSR, SSG, atau ISR
Memilih strategi rendering yang tepat sangat penting untuk performa aplikasi.
Berikut panduan sederhana:
Gunakan SSR jika:
data berubah setiap request
halaman membutuhkan data real-time
halaman bersifat dinamis
Contoh:
dashboard admin
halaman pencarian
Gunakan SSG jika:
konten jarang berubah
halaman fokus SEO
performa sangat penting
Contoh:
blog
landing page
dokumentasi
Gunakan ISR jika:
konten berubah secara berkala
ingin performa statis
tidak ingin build ulang website
Contoh:
katalog produk
halaman artikel
listing konten
Penutup
Rendering adalah salah satu fitur paling powerful dari Next.js.
Dengan memilih strategi rendering yang tepat, kita bisa membangun aplikasi web yang:
lebih cepat
lebih ramah SEO
lebih efisien di server
Di artikel ini kita sudah mempelajari beberapa konsep penting:
Client Side Rendering (CSR)
Server Side Rendering (SSR)
Static Site Generation (SSG)
Incremental Static Regeneration (ISR)
Memahami perbedaan keempat pendekatan ini akan sangat membantu ketika kita membangun aplikasi Next.js yang scalable.
Pada artikel berikutnya kita akan membahas Data Fetching di Next.js, termasuk cara mengambil data dari API menggunakan server component dan strategi caching yang disediakan oleh framework ini.
