Next.js 15 Fullstack Web Apps · Lekcja

Zaawansowane wzorce pobierania danych

Implementuj wydajne pobieranie danych za pomocą `async/await` bezpośrednio w komponentach serwerowych i poznaj strategie ponownej walidacji.

Zaawansowane wzorce pobierania danych to bezpłatna lekcja Next.js 15 Fullstack Web Apps na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Next.js 15 Fullstack Web Apps, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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!

Często zadawane pytania

Czy lekcja „Zaawansowane wzorce pobierania danych” jest bezpłatna?

Tak — pełny tekst „Zaawansowane wzorce pobierania danych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Next.js 15 Fullstack Web Apps, przejdź na CoddyKit PRO. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Co nauczysz się w „Zaawansowane wzorce pobierania danych”?

Implementuj wydajne pobieranie danych za pomocą `async/await` bezpośrednio w komponentach serwerowych i poznaj strategie ponownej walidacji. Ćwiczysz Next.js 15 Fullstack Web Apps z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Next.js 15 Fullstack Web Apps?

Nie wymagamy żadnego doświadczenia. Next.js 15 Fullstack Web Apps w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Zaawansowane wzorce pobierania danych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Next.js 15 Fullstack Web Apps?

Tak. Każda lekcja Next.js 15 Fullstack Web Apps zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Komponenty serwerowe — pogłębione omówienie
Komponenty klienckie i interaktywność
Zaawansowane wzorce pobierania danych
Buforowanie, rewalidacja i strumieniowanie

← Powrót do Next.js 15 Fullstack Web Apps