Streaming React

Streaming usa limites Suspense com Server Components assíncronos. Não pode usar hooks em limites Suspense.

import { Suspense } from "react";

export default async function StreamingPage() {
  return (
    <div>
      <Suspense fallback={<div>Carregando...</div>}>
        <AsyncComponent />
      </Suspense>
    </div>
  );
}

async function AsyncComponent() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return <div>{data.message}</div>;
}

• •Componentes são funções assíncronas (sem diretiva 'use client')
• •Não pode usar hooks React (incluindo use hook) em Server Components
• •Envolva componentes assíncronos com Suspense e forneça fallback
• •Use loading.js para estados de carregamento no nível de rota
• •Conteúdo transmite para o cliente conforme fica disponível