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

Продвинутые шаблоны получения данных

Реализуйте эффективное получение данных с помощью `async/await` непосредственно в серверных компонентах и изучите стратегии повторной валидации.

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

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

Efficient Data Fetching

In Next.js, fetching data efficiently is key to building fast and responsive applications. We've seen basic data fetching, but what about advanced strategies?

This lesson explores how to fine-tune your data fetching in Server Components to control caching and ensure data freshness, leading to better performance and user experience.

Direct Server Fetching

Next.js 15's App Router allows you to use async/await directly within Server Components. This means you can fetch data right where you render your UI, without needing client-side hooks or API routes.

Here's a simple example of fetching a todo item:

// app/page.tsx

export default async function HomePage() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const todo = await response.json();

  return (
    <div>
      <h1>Todo Item:</h1>
      <p><b>Title:</b> {todo.title}</p>
      <p><b>Completed:</b> {todo.completed ? 'Yes' : 'No'}</p>
    </div>
  );
}

Automatic Caching

By default, Next.js automatically caches fetch requests made in Server Components. This is a powerful optimization!

  • The default behavior is equivalent to using { cache: 'force-cache' }.
  • It's ideal for data that doesn't change often, like blog posts or product details.
  • Once fetched, subsequent requests to the same URL within a certain timeframe will use the cached data, speeding up page loads.

Always Fresh Data

Sometimes, you need the absolute latest data on every request, bypassing any cache. This is where cache: 'no-store' comes in handy.

Use it for highly dynamic content, user-specific data, or real-time feeds where even a few seconds of stale data is unacceptable.

// app/live-data/page.tsx

export default async function LiveDataPage() {
  // Fetch data that should never be cached
  const response = await fetch(
    'https://api.example.com/live-feed',
    { cache: 'no-store' } // Always fetch fresh data
  );
  const data = await response.json();

  return (
    <div>
      <h1>Live Feed:</h1>
      <p>{data.latestUpdate}</p>
      <p>Fetched: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

Scheduled Data Updates

What if you need fresh data, but not on every single request? You can tell Next.js to revalidate (refetch) data after a certain amount of time using next: { revalidate: seconds }.

This is perfect for content that updates periodically, like news articles or stock prices, balancing freshness with performance.

// app/news/page.tsx

export default async function NewsPage() {
  const response = await fetch(
    'https://api.example.com/latest-news',
    { next: { revalidate: 60 } } // Revalidate every 60 seconds
  );
  const news = await response.json();

  return (
    <div>
      <h1>Latest News:</h1>
      <ul>
        {news.articles.slice(0, 3).map(article => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
}

Revalidate by Path

Beyond time-based revalidation, Next.js also offers on-demand revalidation. This means you can programmatically tell Next.js to refetch data for a specific page or path.

The revalidatePath('/your-path') function is typically called from a Server Action or an API Route. After a data change (e.g., a user updates their profile), you can invalidate the cache for that user's profile page, ensuring they see the latest data immediately.

Revalidate by Tag

A more flexible approach for on-demand revalidation is using tags. You can associate a fetch request with one or more tags using next: { tags: ['tag1', 'tag2'] }.

Later, you can call revalidateTag('tag1') to invalidate all cached data associated with 'tag1', regardless of the specific path. This is powerful for data that appears across many pages, like products or categories.

// app/products/page.tsx

export default async function ProductsPage() {
  const response = await fetch(
    'https://api.example.com/products',
    { next: { tags: ['products-list'] } } // Tag this fetch
  );
  const products = await response.json();

  return (
    <div>
      <h1>Our Products:</h1>
      <ul>
        {products.slice(0, 3).map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

Robust Fetching

When fetching data, errors can happen (network issues, API downtime, invalid responses). It's crucial to handle these gracefully to prevent your application from crashing.

Always wrap your fetch calls in a try...catch block and check the response.ok property to ensure the request was successful.

// app/error-example/page.tsx

export default async function ErrorExamplePage() {
  let data = null;
  let errorMessage = null;

  try {
    const response = await fetch('https://api.nonexistent.com/data');
    if (!response.ok) {
      throw new Error(`Failed to fetch: ${response.statusText}`);
    }
    data = await response.json();
  } catch (error) {
    errorMessage = error.message;
  }

  return (
    <div>
      <h1>Data Fetching with Error Handling:</h1>
      {errorMessage && <p style={{ color: 'red' }}>Error: {errorMessage}</p>}
      {data && <p>Data: {data.message}</p>}
    </div>
  );
}

When to Use What

Choosing the right data fetching strategy depends on your data's characteristics:

  • Default caching (force-cache): For static content or data that updates rarely. Best performance.
  • cache: 'no-store': For highly dynamic, real-time, or user-specific data that must always be fresh.
  • next: { revalidate: seconds }: For data that updates periodically, balancing freshness and performance.
  • On-demand revalidation (revalidatePath/revalidateTag): For triggering updates after specific events, like user actions or data changes in your backend.

Fetching Decisions

Which fetch options would you typically use for the following scenarios in a Next.js Server Component?

Advanced Fetching Summary

You've now explored advanced data fetching patterns in Next.js Server Components!

  • You can use async/await directly in Server Components to fetch data.
  • Next.js automatically caches fetch requests by default (force-cache).
  • You can bypass the cache with cache: 'no-store' for real-time data.
  • Implement time-based revalidation using next: { revalidate: seconds }.
  • Understand the concepts of on-demand revalidation with revalidatePath and revalidateTag.
  • Always include error handling for robust applications.

Mastering these strategies will help you build highly performant and dynamic Next.js applications!

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

Урок «Продвинутые шаблоны получения данных» бесплатный?

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

Чему я научусь в уроке «Продвинутые шаблоны получения данных»?

Реализуйте эффективное получение данных с помощью `async/await` непосредственно в серверных компонентах и изучите стратегии повторной валидации. Ты практикуешь Next.js 15 Fullstack Web Apps с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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