Next.js App Router & Fullstack Web

Bangun aplikasi web fullstack berperforma tinggi dengan React 18+, Server Components, Server Actions, dan App Router.

Status Membaca:Belum Dibaca

Daftar Bab (2)

Bab 1 dari 2

Arsitektur Next.js App Router & Server Components

Next.js App Router & React Server Components

Next.js adalah framework React fullstack untuk membangun web modern dengan SSR (Server-Side Rendering), SSG (Static Site Generation), dan Streaming HTML.

Perbedaan Server Components & Client Components

Fitur

Server Components (Default)

Client Components (`'use client'`)

|-------|-----------------------------|------------------------------------|

Tempat Eksekusi

Dijalankan di Server saja

Dijalankan di Browser & Server

Size Bundle JS

0 KB dikirim ke Browser

Menambah ukuran JS Bundle

Akses Backend

Bisa akses DB, File System & Secret API Key

Menggunakan `fetch` ke API Route

React State & Effects

Tidak bisa menggunakan `useState`, `useEffect`

Menggunakan React Hooks lengkap

Event Listener

Tidak bisa (`onClick`, `onSubmit`)

Bekerja seperti biasa

Struktur Folder App Router

app/
 ├── layout.tsx       # Root layout utama
 ├── page.tsx         # Route utama (/)
 ├── dashboard/
 │    └── page.tsx    # Route (/dashboard)
 ├── api/
 │    └── user/
 │         └── route.ts # API Route Endpoint