0Pricing
Next.js 15 Fullstack Web Apps · Урок

Кэширование, ревалидация и потоковая передача

Освойте кэширование загруженных данных в App Router, их обновление по расписанию или по запросу, а также потоковую передачу интерфейса с Suspense для быстрого субъективного времени загрузки.

«Кэширование, ревалидация и потоковая передача» — бесплатный урок Next.js 15 Fullstack Web Apps на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Next.js 15 Fullstack Web Apps, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Next.js 15 Fullstack Web Apps содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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

Часто задаваемые вопросы

Урок «Кэширование, ревалидация и потоковая передача» бесплатный?

Да — полный текст урока «Кэширование, ревалидация и потоковая передача» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Next.js 15 Fullstack Web Apps, подпишись на CoddyKit PRO. Курс Next.js 15 Fullstack Web Apps содержит 4 уроков всего.

Чему я научусь в уроке «Кэширование, ревалидация и потоковая передача»?

Освойте кэширование загруженных данных в App Router, их обновление по расписанию или по запросу, а также потоковую передачу интерфейса с Suspense для быстрого субъективного времени загрузки. Ты практикуешь Next.js 15 Fullstack Web Apps с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Next.js 15 Fullstack Web Apps?

Предыдущий опыт не требуется. Next.js 15 Fullstack Web Apps на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Кэширование, ревалидация и потоковая передача»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Next.js 15 Fullstack Web Apps?

Да. Каждый урок Next.js 15 Fullstack Web Apps включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Подробно о серверных компонентах
  2. Клиентские компоненты и интерактивность
  3. Продвинутые шаблоны получения данных
  4. Кэширование, ревалидация и потоковая передача
← Назад к Next.js 15 Fullstack Web Apps