Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Strategi Caching Lanjutan

Terapkan strategi caching lanjutan, termasuk header caching HTTP dan integrasi CDN, untuk mencapai kecepatan maksimal.

Pelajaran 3 dari 412 langkah

Strategi Caching Lanjutan adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Melampaui Cache Dasar Next.js

Anda telah mempelajari caching bawaan Next.js untuk pengambilan data. Namun, performa web mencakup lebih banyak hal! Strategi caching tingkat lanjut memanfaatkan seluruh infrastruktur web, termasuk peramban dan proksi.

Pelajaran ini membahas header caching HTTP dan Content Delivery Network (CDN) untuk meningkatkan kecepatan dan efisiensi aplikasi Anda secara signifikan.

Mengontrol Cache Peramban & Proksi

Header caching HTTP adalah instruksi yang dikirim dari server Anda ke peramban klien atau server proksi perantara mana pun. Header ini memberi tahu mereka berapa lama dan dalam kondisi apa mereka dapat menyimpan (melakukan cache) sebuah respons.

Latensi Lebih Rendah: Konten dimuat lebih cepat dari cache lokal.
Bandwidth Lebih Rendah: Lebih sedikit data yang ditransfer melalui jaringan.
Beban Server Berkurang: Server tidak perlu membuat respons yang sama berulang kali.

`max-age`, `public`, `private`

Header Cache-Control adalah direktif caching HTTP yang paling kuat. Header ini menentukan bagaimana, di mana, dan berapa lama sebuah respons dapat disimpan dalam cache.

max-age=<seconds>: Durasi sebuah sumber daya dapat disimpan dalam cache oleh peramban (cache bersama juga mematuhi aturan ini).
s-maxage=<seconds>: Menggantikan max-age untuk cache bersama (CDN, proksi).
public: Cache mana pun (peramban, proksi) dapat menyimpan respons.
private: Hanya peramban klien yang dapat menyimpan respons dalam cache (bukan cache bersama).

`no-cache`, `no-store` & Lainnya

Direktif Cache-Control penting lainnya membantu mengelola perilaku caching tertentu:

no-cache: Memaksa validasi ulang dengan server asal sebelum menyajikan salinan yang tersimpan dalam cache, meskipun belum kedaluwarsa.
no-store: Melarang penyimpanan respons dalam cache; respons harus diambil dari server setiap kali.
must-revalidate: Mewajibkan validasi ulang untuk cache yang kedaluwarsa; konten lama tidak boleh disajikan.

Gunakan semua ini dengan hati-hati untuk menyeimbangkan kesegaran dan performa.

Menerapkan Header Cache

Anda dapat menetapkan header HTTP di Server Components atau rute API Next.js menggunakan fungsi headers() dari next/headers, atau langsung pada objek Response.

Contoh ini menetapkan header Cache-Control untuk halaman Server Component.

import { headers } from 'next/headers';

export default function ProductsPage() {
  // Set Cache-Control header for this page's response
  headers().set('Cache-Control', 'public, max-age=3600, s-maxage=86400');

  return (
    <main>
      <h1>Our Products</h1>
      <p>This content is highly cacheable!</p>
    </main>
  );
}

Validasi Ulang Efisien dengan ETag

Meskipun menggunakan caching, terkadang konten dapat berubah. Header ETag (Entity Tag) dan Last-Modified memungkinkan peramban bertanya kepada server: "Apakah konten ini berubah sejak terakhir kali saya mengambilnya?"

ETag: Pengenal unik untuk versi tertentu dari sebuah sumber daya.
Last-Modified: Tanggal dan waktu terakhir kali sumber daya diubah.

Jika konten tidak berubah, server merespons dengan status 304 Not Modified, sehingga menghemat bandwidth.

Content Delivery Network (CDN)

Content Delivery Network (CDN) adalah jaringan server proksi dan pusat data yang tersebar secara geografis. Tujuannya adalah menyediakan ketersediaan dan performa tinggi dengan mendistribusikan layanan secara geografis relatif terhadap pengguna akhir.

Anggaplah CDN sebagai tempat penyimpanan salinan aset statis situs web Anda (gambar, CSS, JS) dan bahkan konten dinamis (jika dikonfigurasi) yang lebih dekat dengan pengguna Anda di seluruh dunia.

CDN Meningkatkan Performa Next.js

Mengintegrasikan CDN dengan Next.js memberikan berbagai keuntungan besar:

Jangkauan Global: Konten disajikan dari server terdekat, sehingga mengurangi latensi bagi pengguna di seluruh dunia.
Beban Server Asal Berkurang: CDN menangani sebagian besar permintaan sehingga mengurangi beban server utama Anda.
Keandalan Meningkat: Lalu lintas didistribusikan sehingga aplikasi Anda lebih tahan terhadap lonjakan.
Keamanan Lebih Baik: Banyak CDN menawarkan perlindungan DDoS dan fitur keamanan lainnya.

`assetPrefix` Next.js

Untuk aset statis (seperti gambar di direktori public), Next.js secara otomatis mengoptimalkannya. Untuk secara eksplisit memberi tahu Next.js agar menyajikan aset ini dari CDN, Anda dapat mengonfigurasi assetPrefix di next.config.js.

Pengaturan ini menambahkan URL di awal semua aset statis, sehingga aset tersebut diminta dari CDN Anda.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: 'https://cdn.example.com',
  // ... other Next.js configs
};

module.exports = nextConfig;

Vercel & Caching Edge

Saat menerapkan Next.js ke Vercel, Anda otomatis memperoleh manfaat dari Edge Network global mereka, yang berfungsi seperti CDN bawaan.

Vercel secara cerdas menyimpan aset statis dan respons Server Component Anda di lokasi edge, dengan memanfaatkan s-maxage untuk performa optimal tanpa perlu menyiapkan CDN secara manual.

"Caching edge" ini adalah bentuk integrasi CDN yang kuat dan sudah terintegrasi langsung ke dalam platform.

Tantangan Cache-Control

Anda sedang membangun aplikasi Next.js. Anda memiliki halaman yang menampilkan informasi produk publik yang jarang berubah, dan Anda ingin peramban serta CDN menyimpannya dalam cache selama satu hari, tetapi juga memastikan cache bersama (seperti CDN) melakukan validasi ulang setelah 1 jam jika memungkinkan, tanpa memaksa peramban melakukan validasi ulang selama satu hari.

Jawab di pelajaran interaktif

Rangkuman Caching Tingkat Lanjut

Kerja bagus! Anda telah mempelajari cara memanfaatkan strategi caching tingkat lanjut untuk aplikasi Next.js Anda.

Kita telah mempelajari header Cache-Control HTTP (max-age, s-maxage, public, private, no-cache, no-store).
Anda telah melihat cara menerapkan header ini di Server Components Next.js.
Kita telah membahas peran CDN dan cara CDN meningkatkan penyajian konten secara global.
Terakhir, kita membahas Edge Network Vercel sebagai solusi CDN bawaan yang kuat.

Teknik-teknik ini sangat penting untuk membangun aplikasi web berperforma tinggi dan dapat diskalakan!

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 88

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Strategi Caching Lanjutan” gratis?

Ya — teks lengkap “Strategi Caching Lanjutan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Strategi Caching Lanjutan”?

Terapkan strategi caching lanjutan, termasuk header caching HTTP dan integrasi CDN, untuk mencapai kecepatan maksimal. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Strategi Caching Lanjutan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Optimasi Gambar & Font
Analisis Ukuran Bundel
Strategi Caching Lanjutan
UI Streaming dengan Suspense dan Status Pemuatan

← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)