Spec Frontend Com React • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 18.1 — Componentes de Servidor (RSC) vs Componentes de Cliente (‘use client’)

Contexto: Componentes de Servidor (RSC) vs Componentes de Cliente (‘use client’) no contexto de Framework Next.js App Router (SSR, SSG e Hydration).

Requisitos de Execução:

  1. Criar Server Component assíncrono consultando banco diretamente e Client Component para interatividade.

Resultado Esperado

Server Component executado no servidor com 0kb de JavaScript enviado para o cliente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_1_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Framework Next.js App Router (SSR, SSG e Hydration)
🔑 Gabarito de Código & Solução Comentada 
// app/produtos/page.tsx
import { BotaoCurtir } from './BotaoCurtir'; // 'use client'

export default async function ProdutosPage() {
  const res = await fetch('https://api.empresa.com/produtos', { cache: 'no-store' });
  const produtos = await res.json();

  return (
    <div>
      <h1>Lista de Produtos (Server Component)</h1>
      {produtos.map((p: any) => (
        <div key={p.id}>{p.nome} <BotaoCurtir /></div>
      ))}
    </div>
  );
}

🔍 Nível 2: Prática

Problema 18.2 — Estratégias de Renderização: Static Site Generation (SSG) com generateStaticParams

Contexto: Estratégias de Renderização: Static Site Generation (SSG) com generateStaticParams no contexto de Framework Next.js App Router (SSR, SSG e Hydration).

Requisitos de Execução:

  1. Implementar página de detalhes de produto pré-renderizada estaticamente com generateStaticParams().

Resultado Esperado

Páginas estáticas HTML geradas no momento do build com tempo de resposta instantâneo.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_2_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Framework Next.js App Router (SSR, SSG e Hydration)
🔑 Gabarito de Código & Solução Comentada 
// app/produtos/[id]/page.tsx
export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }];
}

export default async function DetalheProduto({ params }: { params: { id: string } }) {
  return <div>Produto ID: {params.id}</div>;
}

⚡ Nível 3: Integração

Problema 18.3 — Layouts Compartilhados e Arquivos Especiais (loading.tsx, error.tsx)

Contexto: Layouts Compartilhados e Arquivos Especiais (loading.tsx, error.tsx) no contexto de Framework Next.js App Router (SSR, SSG e Hydration).

Requisitos de Execução:

  1. Configurar fallback de loading automático em loading.tsx e tratamento de erros de rota em error.tsx.

Resultado Esperado

Estados de loading e error boundaries gerenciados pelo App Router do Next.js.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_3_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Framework Next.js App Router (SSR, SSG e Hydration)
🔑 Gabarito de Código & Solução Comentada 
// Implementação de referência para o requisito do nível
// app/produtos/loading.tsx
export default function Loading() {
  return <div className="animate-pulse">Carregando catálogo de produtos...</div>;
}
// Conclusão da operação e validação de conformidade
const statusConcluido = true;
console.log('Validação de execução concluída');
if (!statusConcluido) throw new Error('Falha');

🏆 Nível 4: Desafio Corporativo

Problema 18.4 — Otimização de Imagens com next/image e Fontes com next/font

Contexto: Otimização de Imagens com next/image e Fontes com next/font no contexto de Framework Next.js App Router (SSR, SSG e Hydration).

Requisitos de Execução:

  1. Utilizar <Image src='...' width={500} height={300} priority /> para pontuação máxima no Core Web Vitals.

Resultado Esperado

Imagens otimizadas automaticamente com formato WebP e carregamento responsivo.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_4_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Framework Next.js App Router (SSR, SSG e Hydration)
🔑 Gabarito de Código & Solução Comentada 
// app/components/Logo.tsx
import Image from 'next/image';

export const Logo = () => (
  <Image src="/logo.png" alt="Logotipo Corporativo" width={200} height={50} priority />
);
const statusConcluido = true;
console.log('Validação de execução concluída');