0Pricing
Next.js 15 Fullstack Web Apps · Aula

Padrões Avançados de Busca de Dados

Implemente uma busca eficiente de dados usando `async/await` diretamente em Componentes de Servidor e explore estratégias de revalidação.

Padrões Avançados de Busca de Dados é uma aula grátis de Next.js 15 Fullstack Web Apps no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Next.js 15 Fullstack Web Apps, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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!

Perguntas Frequentes

A aula “Padrões Avançados de Busca de Dados” é grátis?

Sim — o texto completo de “Padrões Avançados de Busca de Dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Next.js 15 Fullstack Web Apps, atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.

O que vou aprender em “Padrões Avançados de Busca de Dados”?

Implemente uma busca eficiente de dados usando `async/await` diretamente em Componentes de Servidor e explore estratégias de revalidação. Você pratica Next.js 15 Fullstack Web Apps com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Next.js 15 Fullstack Web Apps?

Nenhuma experiência prévia é necessária. Next.js 15 Fullstack Web Apps no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Padrões Avançados de Busca de Dados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Next.js 15 Fullstack Web Apps?

Sim. Cada aula de Next.js 15 Fullstack Web Apps inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Uma Análise Profunda dos Componentes de Servidor
  2. Componentes de Cliente e Interatividade
  3. Padrões Avançados de Busca de Dados
  4. Cache, revalidação e transmissão
← Voltar para Next.js 15 Fullstack Web Apps