📊 Capítulo 18: Server Routes & Nuxt SSR

Especialização em Frontend com Vue.js

🗺️ O Ciclo de Vida Fullstack de uma Server Route no Nuxt 3

sequenceDiagram
    autonumber
    actor C as Cliente Web
    participant S as Nuxt Nitro Server (server/api/login.post.ts)
    participant DB as Banco de Dados / Redis

    C->>S: POST /api/login { email, senha }
    Note over S: defineEventHandler(async (event) => ...)
    S->>S: readBody(event) + Validação com Zod
    S->>DB: Consulta credenciais
    DB-->>S: Usuário Válido
    S->>S: setCookie(event, 'session', token, { httpOnly: true })
    S-->>C: Retorna { sucesso: true, usuario } com Cookie Seguro!

🎯 Slide 1: Server Routes com defineEventHandler

// server/api/produtos/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id');
  const config = useRuntimeConfig();

  // Chaves secretas seguras que NUNCA vazam para o navegador do cliente!
  return await buscarNoBanco(id, config.dbSecret);
});

🎯 Slide 2: Route Middlewares no Nuxt

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const { isAutenticado } = useAuth();
  if (!isAutenticado.value) {
    return navigateTo('/login');
  }
});

🎯 Slide 3: Manipulação de Headers e SEO com useHead

useHead({
  title: 'Catálogo de Produtos Enterprise',
  meta: [{ name: 'description', content: 'Explore as melhores ofertas do portal' }]
});