Especialização Frontend com React & TypeScript • Demonstrações Práticas Executáveis

🎯 Contexto e Objetivo Prático

Construção de Server Components assíncronos no Next.js App Router com Server-Side Rendering (SSR) e Streaming com Suspense.

💻 Código Fonte React 19 (TSX)

// app/dashboard/page.tsx (Server Component Assíncrono)
import React, { Suspense } from "react";

interface AnalyticsData {
  activeUsers: number;
  serverLoad: number;
}

async function getAnalytics(): Promise<AnalyticsData> {
  // Executa exclusivamente no servidor Node.js
  const res = await fetch("https://api.empresa.com/analytics", {
    next: { revalidate: 60 } // ISR: Revalidação a cada 60 segundos
  });
  return res.json();
}

async function AnalyticsWidget() {
  const data = await getAnalytics();
  return (
    <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
      <p className="text-sm font-semibold text-emerald-800">Usuários Ativos: {data.activeUsers}</p>
      <p className="text-xs text-emerald-600">Carga da CPU: {(data.serverLoad * 100).toFixed(1)}%</p>
    </div>
  );
}

export default function DashboardPage() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Painel Next.js 14 App Router</h1>
      <Suspense fallback={<p className="text-sm text-slate-400">Carregando métricas no servidor...</p>}>
        <AnalyticsWidget />
      </Suspense>
    </div>
  );
}

🖥️ Saída de Renderização Visual e Comportamento

[Servidor Next.js - Resposta HTML Pré-Renderizada]
GET /dashboard -> 200 OK
HTML enviado ao cliente pronto com SEO e zero JavaScript no bundle para componentes estáticos.