Belajar ReactJS - Server-Side Rendering & Frameworks

#Pendahuluan

SPA merender semuanya di browser; hasilnya bagus untuk interaktivitas, tapi kurang ideal untuk SEO dan first paint di perangkat lambat. Server-side rendering memindahkan sebagian render ke server. Episode 21 membahas ini lewat Next.js, framework React paling populer.

Kita belajar konsep SSR, hybrid rendering dengan static generation, pola data fetching di App Router Next.js, lalu kapan sebaiknya memilih SSR, SSG, atau SPA untuk proyek kalian.

#SSR Concepts dengan Next.js

#Membuat Proyek Next.js

Next.js adalah framework React dengan routing berbasis file system dan rendering yang bisa dipilih per halaman. Mulai proyek baru:

npx create-next-app@latest aplikasi-ku

npx create-next-app@latest aplikasi-ku membuat folder proyek lengkap dengan TypeScript, ESLint, dan struktur App Router. Jalankan npm run dev untuk mulai, atau npm run build untuk produksi.

#Render di Server

Komponen di App Router secara default adalah Server Component: dirender di server menjadi HTML, lalu dikirim ke browser. JavaScript hanya dikirim untuk bagian yang memang interaktif. Untuk komponen interaktif, tandai dengan directive:

Client Component

"use client"
 
import { useState } from "react"
 
function TombolSuka() {
  const [suka, setSuka] = useState(false)
  return (
    <button onClick={() => setSuka(!suka)}>
      Disukai: {String(suka)}
    </button>
  )
}

"use client" menandai bahwa komponen ini dan turunannya dirender di client sehingga bisa memakai state dan event. Komponen lain tetap dirender di server, menghasilkan HTML lebih cepat untuk pengguna pertama.

#Hybrid Rendering dan Static Generation

#SSG dan Revalidation

Next.js bisa menggabungkan banyak strategi render dalam satu aplikasi. Static generation merender halaman sekali saat build dan menyajikannya dari CDN. Untuk data yang perlu segar, set revalidate:

ISR dengan revalidate

export const revalidate = 60
 
export default async function HalamanBerita() {
  const data = await fetch("https://api.example.com/berita").then((r) => r.json())
  return <main>{data.map((item) => <p key={item.id}>{item.judul}</p>)}</main>
}

export const revalidate = 60 membuat Next.js menyimpan halaman di cache dan membangun ulangnya di background setiap 60 detik. Pola ini disebut ISR (incremental static regeneration) — kecepatan statis dengan data yang tetap segar.

#Data Fetching Patterns di Next.js

#Fetch Langsung di Server Component

Di App Router, fetching dilakukan langsung di dalam komponen dengan fetch, dan Next.js menambahkan caching otomatis. Nama fetch di HalamanBerita di atas di-cache secara default. Untuk data yang harus selalu terbaru, lewati cache:

Fetch tanpa cache

export default async function HalamanStatus() {
  const res = await fetch("https://api.example.com/status", { cache: "no-store" })
  const data = await res.json()
  return <p>Status: {data.status}</p>
}

{ cache: "no-store" } di dalam panggilan fetch memberitahu Next.js untuk selalu mengambil data terbaru — cocok untuk data real-time seperti status layanan. Pilih caching default untuk konten yang jarang berubah, no-store untuk data yang hidup.

#Rute Dinamis

Untuk halaman dinamis seperti blog, buat folder app/blog/[slug] dan ekspor generateStaticParams agar daftar halaman dibangun saat build. Kombinasikan dengan revalidate untuk mendapatkan ISR pada setiap halaman rute.

#Kapan Memilih SSR, SSG, atau SPA

#Panduan Praktis

Pilih strategi berdasarkan karakteristik halaman:

• SSG untuk konten publik yang jarang berubah: blog, dokumentasi, halaman marketing.
• ISR untuk halaman statis dengan data yang perlu disegarkan berkala.
• SSR untuk data per-permintaan yang dipersonalisasi, seperti halaman akun.
• SPA untuk aplikasi internal atau dashboard yang interaktivitasnya paling penting.
• Next.js memungkinkan mencampur semuanya dalam satu proyek, bahkan per halaman.

#Hindari Over-Engineering

Jangan pilih SSR hanya karena tren. Mulai dari SSG untuk halaman publik, tambahkan ISR saat data perlu segar, dan gunakan SSR hanya ketika data memang bergantung pada permintaan. Ukur kebutuhan, bukan mode. Keputusan ini sering menentukan biaya server dan kecepatan aplikasi.

#Penutup

Episode 21 memperkenalkan cara merender aplikasi React di server lewat Next.js: Server Components dan directive client, hybrid rendering dengan SSG dan ISR, pola data fetching modern, serta panduan memilih strategi per halaman.

Inti yang harus dibawa pulang:

• Next.js merender komponen di server secara default lewat Server Components.
• Directive "use client" membatasi interaktivitas ke sisi client.
• SSG membangun HTML saat build; ISR menyegarkannya di background.
• Fetch di Server Components memiliki caching otomatis; no-store untuk data live.
• Pilih SSG untuk konten statis, SSR untuk data personal, SPA untuk aplikasi internal.
• Next.js memungkinkan mencampur semua strategi dalam satu proyek.

Di episode 22 selanjutnya kita akan membahas observability & monitoring — logging error frontend dan metrik performa, web vitals dengan synthetic dan real user monitoring, crash reporting dengan Sentry, serta user experience analytics dan performance budgets. Aplikasi kalian akan terlihat jelas meski sudah tayang.