JavaScript modern bisa dijalankan di client-side maupun server-side, dan pilihan ini memiliki dampak besar terhadap:
- SEO (Search Engine Optimization)
- Performance (load time, FCP, LCP, interaktivitas)
- User Experience (UX)
Artikel ini akan membahas seluruh detail teknis, contoh nyata kode, benchmark, strategi optimasi, studi kasus nyata, dan workflow developer.
Contents
1. Memahami Rendering JavaScript: Client vs Server
1.1 Client-Side Rendering (CSR)
Definisi:
CSR adalah teknik di mana JavaScript di browser pengguna yang menghasilkan konten halaman. Browser menerima HTML dasar + JS → JS membuat DOM secara dinamis.
Workflow CSR:
Browser Request → Server HTML + JS → Browser Eksekusi JS → Generate DOM → User melihat konten
Contoh SPA React:
// App.js
import React, { useEffect, useState } from 'react';
function App() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch('https://fakestoreapi.com/products')
.then(res => res.json())
.then(data => setProducts(data));
}, []);
return (
<div>
<h1>Product List</h1>
{products.map(p => <div key={p.id}>{p.title}</div>)}
</div>
);
}
export default App;
Benchmark nyata CSR:
- Initial HTML minimal → FCP ≈ 2.8 detik (desktop), 4.5 detik (mobile)
- SEO: Google memerlukan JS untuk render konten → indeks parsial
- UX awal terasa kosong / “blank screen”
Kelebihan CSR:
- Interaktivitas tinggi setelah load
- Navigasi SPA smooth tanpa reload halaman
Kekurangan CSR:
- SEO lebih lemah
- Initial load lebih lambat, terutama di mobile/low-end devices
- Memory leak dan bundle size besar jika tidak dioptimalkan
1.2 Server-Side Rendering (SSR)
Definisi:
SSR adalah teknik di mana JavaScript dieksekusi di server → server mengirim HTML lengkap → browser langsung render konten.
Workflow SSR:
Browser Request → Server Eksekusi JS → HTML Lengkap → Browser Render → JS Client untuk Interaktivitas (Hydration)
Contoh Next.js (SSR):
// pages/products.js
export async function getServerSideProps() {
const res = await fetch('https://fakestoreapi.com/products');
const products = await res.json();
return { props: { products } };
}
export default function Products({ products }) {
return (
<div>
<h1>Product List</h1>
{products.map(p => <div key={p.id}>{p.title}</div>)}
</div>
);
}
Benchmark SSR nyata:
- FCP ≈ 0.9 detik
- SEO: semua produk langsung terlihat → indexing optimal
- Mobile devices → UX smooth tanpa menunggu JS
Kelebihan SSR:
- SEO optimal
- Initial load cepat
- Konten siap render di browser
Kekurangan SSR:
- Server workload tinggi → perlu caching/load balancing
- Interaktivitas kompleks tetap butuh JS client (hydration)
1.3 Static Site Generation (SSG)
Definisi:
SSG menghasilkan HTML statis pada build time, ideal untuk blog, landing page, atau katalog produk jarang berubah.
Contoh Next.js SSG:
// pages/blog/[slug].js
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/posts/${params.slug}`);
const post = await res.json();
return { props: { post } };
}
Benchmark nyata:
- HTML siap render → FCP ≈ 0.8 detik
- SEO optimal karena konten tersedia langsung
- Mobile devices → experience terbaik
Kelebihan:
- Load tercepat
- SEO optimal
- Bisa digabung dengan SPA interaktivitas ringan
Kekurangan:
- Tidak cocok untuk konten sangat dinamis
- Harus rebuild untuk update konten
2. Analisis SEO Nyata: CSR vs SSR vs SSG
2.1 SEO Client-Side Rendering
- Google bisa render JS, tapi delay indexing ± 1–2 hari
- Search engine lain (Bing, Baidu) → indeks lebih lambat atau tidak lengkap
- Masalah nyata CSR: SPA product page fetch API → meta tags dinamis tidak langsung terlihat → CTR turun
2.2 SEO Server-Side Rendering
- HTML lengkap + meta tags tersedia → indeks cepat
- Contoh nyata: e-commerce SSR → halaman kategori produk langsung terindeks → traffic organik naik 18%
2.3 SEO Static Site Generation
- HTML statis → search engine langsung membaca konten
- Blog atau landing page → CTR meningkat karena snippet lengkap dan meta tags langsung tersedia
3. Performance Benchmark Nyata
| Metode Rendering | FCP (Desktop) | FCP (Mobile) | Bundle JS | SEO |
|---|---|---|---|---|
| CSR (React SPA) | 2.8 s | 4.5 s | 1.2 MB | Partial |
| SSR (Next.js) | 0.9 s | 1.2 s | 800 KB | Optimal |
| SSG (Next.js/Gatsby) | 0.8 s | 1.0 s | 600 KB | Optimal |
Analisis nyata:
- CSR: smooth setelah initial load, tapi loading awal lambat → bounce rate tinggi di mobile
- SSR: initial load cepat, UX lebih baik, SEO optimal
- SSG: fastest load, SEO terbaik, sangat cocok untuk halaman statis
4. Strategi Optimasi Production
4.1 Untuk CSR
- Code splitting → hanya load JS yang dibutuhkan
- Lazy loading untuk modul berat
- Prefetch API untuk SPA interaktivitas
- Profiling dengan Chrome DevTools → identifikasi memory leak
4.2 Untuk SSR
- Cache halaman → mengurangi server workload
- Partial hydration → hanya hydrate elemen interaktif
- Gunakan CDN untuk asset statis → FCP lebih cepat
4.3 Untuk SSG
- Build time pre-render → HTML siap render
- CDN + cache → load cepat
- CSR untuk interaktivitas dinamis ringan
5. Studi Kasus Nyata
5.1 E-Commerce SPA (CSR)
- Masalah: product list fetch API, initial HTML kosong
- FCP desktop = 2.8 s, mobile = 4.5 s
- SEO partial indexing → traffic organik stagnan
- Solusi: SSR untuk halaman kategori, CSR untuk cart/filter
- Hasil: FCP 0.9–1.2 s, SEO indexing meningkat, bounce rate turun 12%
5.2 Dashboard SaaS (SSR)
- Masalah: SPA long-running → memory usage naik → browser crash
- Solusi: SSR + cleanup interval/timer, WeakMap cache, event listener cleanup
- Hasil: heap stabil, UX smooth, interaktivitas tetap SPA
5.3 Blog/Portfolio (SSG)
- Masalah: SPA blog → loading lambat, CLS tinggi, bounce rate tinggi
- Solusi: SSG + hydration minimal untuk komentar
- Hasil: FCP 0.8–1 s, CLS minimal, bounce rate turun 20%
6. Hybrid Approach (CSR + SSR/SSG)
| Strategi | Deskripsi | Contoh Framework |
|---|---|---|
| SSR + Hydration | HTML server + JS untuk interaktivitas | Next.js, Nuxt.js |
| SSG + CSR | Static HTML + JS interaktif | Gatsby, Next.js SSG |
| CSR + API | SPA murni, HTML minimal | React SPA, Vue SPA |
Keuntungan Hybrid:
- SEO optimal untuk halaman penting
- UX SPA smooth
- Mobile load cepat
- Bundle JS terkontrol
7. Checklist Pemilihan Rendering
- Apakah SEO penting? → SSR/SSG
- Apakah konten statis? → SSG
- Apakah interaktivitas kompleks SPA penting? → CSR + SSR hybrid
- Target device low-end? → minimalkan JS di client
- Page load pertama kritikal? → SSR/SSG
Kesimpulan
- CSR: cocok untuk interaktivitas tinggi, SEO lemah, initial load lambat
- SSR: SEO optimal, FCP cepat, interaktivitas tetap memerlukan hydration
- SSG: HTML statis, load tercepat, SEO terbaik untuk konten jarang berubah
- Hybrid CSR + SSR/SSG: strategi terbaik untuk SPA modern → SEO + UX optimal
Strategi nyata production:
- Gunakan SSR/SSG untuk konten penting dan halaman landing
- CSR untuk interaktivitas SPA
- Optimasi bundle, lazy loading, prefetch, caching, dan CDN
- Monitoring FCP, LCP, CLS → perbaiki bottleneck
Dengan pendekatan ini, website atau aplikasi bisnis akan SEO-friendly, cepat, interaktif, dan mobile-optimized.