0Pricing
Next.js 15 Fullstack Web Apps · Ders

Önbelleğe Alma, Yeniden Doğrulama ve Akış

App Router'ın getirilen verileri nasıl önbelleğe aldığını, bunları zamanlanmış olarak veya isteğe bağlı biçimde yeniden doğruladığını ve algılanan yükleme süresini kısaltmak için Suspense ile kullanıcı arayüzünü nasıl akışa aktardığını öğrenin.

Önbelleğe Alma, Yeniden Doğrulama ve Akış, CoddyKit'te ücretsiz bir Next.js 15 Fullstack Web Apps dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack Web Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Why Caching Matters

Refetching the same data on every request is slow and expensive. The App Router caches results so repeated requests are instant, while giving you control over how fresh that data stays.

The Default fetch Cache

In Server Components, the built-in fetch is extended. By default Next.js may cache responses so the same URL is not refetched within a render. You opt into freshness explicitly.

const res = await fetch('https://api.example.com/posts');
const posts = await res.json();

Forcing Fresh Data

For data that must always be current, disable caching with cache: no-store. Each request hits the source.

const res = await fetch(url, { cache: 'no-store' });

Time-Based Revalidation (ISR)

Incremental Static Regeneration serves cached data but refreshes it after a set interval. Use the next.revalidate option, in seconds.

const res = await fetch(url, {
  next: { revalidate: 60 },  // refresh at most once per minute
});

Route Segment Config

You can also set revalidation for a whole route by exporting a segment config constant.

export const revalidate = 3600;  // revalidate this route hourly

On-Demand Revalidation

When data changes (e.g. after a publish), revalidate immediately instead of waiting. Call revalidatePath or revalidateTag from a Server Action or route handler.

import { revalidatePath } from 'next/cache';
revalidatePath('/blog');

Cache Tags

Tag fetches so you can invalidate groups of them at once. Add a tag, then revalidate by that tag later.

await fetch(url, { next: { tags: ['posts'] } });
// later:
revalidateTag('posts');

What Is Streaming?

Streaming sends HTML to the browser in chunks as it becomes ready. Instead of waiting for the slowest data, the page shell appears immediately and slow parts fill in.

Suspense Boundaries

Wrap a slow component in <Suspense> with a fallback. Next.js streams the fallback first, then swaps in the real content when its data resolves.

import { Suspense } from 'react';
<Suspense fallback={<p>Loading feed...</p>}>
  <Feed />
</Suspense>

The loading.js File

An automatic streaming boundary: add a loading.js in a route folder and Next.js shows it instantly while the page segment loads. No manual Suspense needed.

export default function Loading() {
  return <p>Loading page...</p>;
}

Choosing a Strategy

Quick guide:

  • Rarely changes -> default cache
  • Changes on a schedule -> revalidate (ISR)
  • Changes on an event -> on-demand revalidateTag
  • Always live -> no-store

Quick Check

Test your caching knowledge.

Recap

You mastered data freshness and streaming:

  • The App Router caches fetch by default; no-store opts out
  • revalidate enables time-based ISR
  • revalidatePath/revalidateTag invalidate on demand
  • Suspense and loading.js stream UI for fast perceived loads

Sıkça Sorulan Sorular

“Önbelleğe Alma, Yeniden Doğrulama ve Akış” dersi ücretsiz mi?

Evet — “Önbelleğe Alma, Yeniden Doğrulama ve Akış” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack Web Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

“Önbelleğe Alma, Yeniden Doğrulama ve Akış” dersinde ne öğreneceğim?

App Router'ın getirilen verileri nasıl önbelleğe aldığını, bunları zamanlanmış olarak veya isteğe bağlı biçimde yeniden doğruladığını ve algılanan yükleme süresini kısaltmak için Suspense ile kullanı… Next.js 15 Fullstack Web Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Next.js 15 Fullstack Web Apps öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack Web Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Önbelleğe Alma, Yeniden Doğrulama ve Akış” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Next.js 15 Fullstack Web Apps dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack Web Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Sunucu Bileşenlerini Derinlemesine İnceleme
  2. İstemci Bileşenleri ve Etkileşim
  3. İleri Veri Alma Kalıpları
  4. Önbelleğe Alma, Yeniden Doğrulama ve Akış
← Next.js 15 Fullstack Web Apps Sayfasına Dön