Interface por Fluxo com Suspense e Estados de Carregamento
Melhore o desempenho percebido transmitindo a interface renderizada no servidor com React Suspense, arquivos loading.tsx e esqueletos, para que os usuários vejam o conteúdo mais cedo.
Interface por Fluxo com Suspense e Estados de Carregamento é uma aula grátis de Next.js 15 Fullstack (App Router + Server Actions) no CoddyKit. Esta é a aula 4 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 (App Router + Server Actions), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
The Waterfall Problem
If a page waits for every data fetch before rendering, users stare at a blank screen. Streaming lets the server send ready parts of the page immediately and fill in slow parts as they finish.
What is Streaming SSR?
Next.js with the App Router can stream HTML in chunks. The shell and fast components arrive first; slow data-dependent sections stream in when ready, improving Time to First Byte and perceived speed.
React Suspense Basics
Suspense wraps a component that may not be ready and shows a fallback until it is. The rest of the page renders without waiting.
import { Suspense } from 'react';
<Suspense fallback={<p>Loading...</p>}>
<SlowComponent />
</Suspense>Async Server Components
In the App Router, a Server Component can be async and await data. Wrapping it in Suspense lets the page stream while that fetch resolves.
async function Reviews() {
const data = await getReviews();
return <ReviewList items={data} />;
}Streaming a Slow Section
Render the page shell instantly and stream the slow part. Users interact with the rest while reviews load.
export default function Page() {
return (
<main>
<Header />
<Suspense fallback={<ReviewsSkeleton />}>
<Reviews />
</Suspense>
</main>
);
}The loading.tsx Convention
A loading.tsx file beside a route automatically wraps that route's page in Suspense. Its export is shown instantly while the page's data loads.
// app/dashboard/loading.tsx
export default function Loading() {
return <DashboardSkeleton />;
}Building a Skeleton
A skeleton mimics the final layout with gray placeholders, reducing layout shift and signaling that content is coming.
function ReviewsSkeleton() {
return (
<div className="animate-pulse space-y-2">
<div className="h-4 bg-gray-200 rounded" />
<div className="h-4 bg-gray-200 rounded w-3/4" />
</div>
);
}Parallel Data Fetching
Avoid sequential awaits that create waterfalls. Multiple Suspense boundaries let independent sections fetch in parallel and stream as each completes.
<Suspense fallback={<A />}><Sales /></Suspense>
<Suspense fallback={<B />}><Traffic /></Suspense>Granular Boundaries
Place Suspense around the smallest slow unit, not the whole page. Finer boundaries mean more of the UI is interactive sooner.
Streaming vs Static
Streaming shines for personalized or slow data. For content that rarely changes, static generation or caching is still faster. Combine both: cache what you can, stream the rest.
Best Practices
Stream effectively:
- Wrap slow async Server Components in Suspense
- Use loading.tsx for route-level fallbacks
- Show skeletons to cut layout shift
- Use parallel boundaries to avoid waterfalls
Quick Check
Test your streaming knowledge.
Recap
You learned to stream UI:
- Streaming SSR sends ready HTML first and fills slow parts later
- Wrap async components in
Suspensewith a fallback - Use
loading.tsxfor automatic route fallbacks - Show skeletons and use parallel boundaries
Your pages now feel fast even with slow data.
Perguntas Frequentes
A aula “Interface por Fluxo com Suspense e Estados de Carregamento” é grátis?
Sim — o texto completo de “Interface por Fluxo com Suspense e Estados de Carregamento” é 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 (App Router + Server Actions), atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 4 aulas no total.
O que vou aprender em “Interface por Fluxo com Suspense e Estados de Carregamento”?
Melhore o desempenho percebido transmitindo a interface renderizada no servidor com React Suspense, arquivos loading.tsx e esqueletos, para que os usuários vejam o conteúdo mais cedo. Você pratica Next.js 15 Fullstack (App Router + Server Actions) 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 (App Router + Server Actions)?
Nenhuma experiência prévia é necessária. Next.js 15 Fullstack (App Router + Server Actions) 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 4 de 4.
Quanto tempo leva a aula “Interface por Fluxo com Suspense e Estados de Carregamento”?
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 (App Router + Server Actions)?
Sim. Cada aula de Next.js 15 Fullstack (App Router + Server Actions) 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
- Otimização de imagens e fontes
- Análise do tamanho do pacote
- Estratégias avançadas de armazenamento em cache
- Interface por Fluxo com Suspense e Estados de Carregamento