Vue.js: SSR/SSG e Nuxt

Última atualização: 2026-08-26

SSR (renderização do lado do servidor) e SSG (geração de sites estáticos) são métodos avançados de implantação para aplicativos Vue — eles oferecem tempos de carregamento da primeira página mais rápidos e melhor SEO do que a CSR (renderização do lado do cliente). O Nuxt 3 é um framework Vue 3 para SSR que oferece roteamento, gerenciamento de estado e otimização de SEO prontos para uso.

Compreender os três modos de renderização — CSR, SSR e SSG — permitirá que você escolha o método de implantação correto para o seu cenário específico. Esta lição ajudará você a construir uma base sólida de conhecimento sobre SSR e SSG.

1. O que você vai aprender

• Comparação dos três principais modos de renderização: CSR, SSR e SSG
• 5 principais casos de uso do SSR
• Estrutura completa de diretórios do Nuxt 3
• APIs Composable do Nuxt 3 (useState / useFetch / useAsyncData)
• Importação automática no Nuxt + roteamento de arquivos
• Ecossistema de módulos do Nuxt (@nuxtjs/tailwindcss, etc.)
• 5 erros comuns

2. O dilema do “carregamento da primeira tela em 5 segundos” em um SPA Vue

(1) Pontos críticos: Carregamento lento da primeira tela do CSR + o SEO não consegue rastrear o conteúdo

O Vue SPA da Alice tinha um problema:

Traditional Vue SPA(CSR):
  1. Browser Request → Returns null HTML(<div id="app"></div>)
  2. Download JS(500KB)
  3. Execute JS(Vue Start)
  4. Rendered Content
  5. Users view the content
  
  Time to First View: 3-5s
  SEO:Google Can't find the content(spa The content is JS Rendered)

O gerente de produto Charlie:

“Alice, nossa classificação no Google está ruim. Precisamos de HTML renderizado pelo servidor para que os mecanismos de busca possam indexar nosso conteúdo. Também precisamos de um ‘first paint’ mais rápido.”

(2) Solução de SSR para o Nuxt 3

Nuxt 3 SSR:
  1. Browser Request → Server-Side Rendering Complete HTML
  2. Return with content HTML (Home Page 0.5s)
  3. Download JS(hydration Required)
  4. Client"Activate"(Take Over Interaction)
  
  Time to First View: 0.5s
  SEO:✅ Perfect(HTML Contents)

// server/api/products.js(Nuxt 3 Automatic Routing)
export default defineEventHandler(async (event) => {
  return await $fetch('https://api.example.com/products')
})

<!-- pages/products.vue(Automatic Routing) -->
<template>
  <div>
    <ProductCard v-for="product in products" :key="product.id" :product="product" />
  </div>
</template>

<script setup lang="ts">
// useFetch Prefetching Data on the Server Side
const { data: products } = await useFetch('/api/products')
</script>

(3) Receita

Após a migração para o Nuxt 3 com SSR:

• Tempo até o primeiro conteúdo visível: 3–5 segundos → 0,5 segundos (-90%)
• Pontuação de SEO: 60 → 95 (+35)
• Indexadas pelo Google: 0 páginas → Todas as 5.000 páginas de SKUs (+∞)
• Compartilhamento nas redes sociais: 0 cartões → Visualização completa (Open Graph)

3. CSR x SSR x SSG

(1) Os 3 principais modos de renderização

(2) 5 principais casos de uso do SSR

(3) As 5 principais vantagens do SSG em relação ao SSR

4. Noções básicas do Nuxt 3

(1) Criar um projeto

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev  # Default http://localhost:3000

(2) Estrutura completa de diretórios

my-nuxt-app/
├-- assets/              # Resources(Image,Font)
│   └-- css/
│       └-- main.css
├-- components/          # Public Components
│   ├-- AppHeader.vue
│   └-- AppFooter.vue
│   └-- product/
│       └-- ProductCard.vue  # Automatic Registration of Nested Directories
├-- composables/         # Composite Functions
│   └-- useAuth.ts
├-- layouts/             # Layout
│   ├-- default.vue      # Default Layout
│   └-- admin.vue        # Backend Layout
├-- middleware/          # Routing Middleware
│   └-- auth.ts
├-- pages/               # File Routing(Automatically Generated)
│   ├-- index.vue        # /
│   ├-- about.vue       # /about
│   ├-- products/
│   │   ├-- index.vue    # /products
│   │   └-- [id].vue     # /products/:id
│   └-- admin/
│       └-- index.vue    # /admin
├-- plugins/             # Nuxt Plugins
│   └-- pinia.ts
├-- public/              # Static Resources
├-- server/              # Server-side code
│   ├-- api/             # API Routing(Automatic Registration)
│   │   └-- products.ts  # /api/products
│   └-- middleware/      # Server-Side Middleware
├-- stores/              # Pinia stores
├-- app.vue              # Root Component
├-- nuxt.config.ts       # Nuxt Layout
└-- package.json

(3) Encaminhamento de arquivos (automático)

pages/index.vue           → /
pages/about.vue          → /about
pages/products/index.vue → /products
pages/products/[id].vue  → /products/:id
pages/admin/index.vue    → /admin

Não é preciso configurar uma tabela de roteamento — o arquivo é a rota.

5. API principal do Nuxt 3

(1) useFetch: Pré-busca de dados no lado do servidor

<script setup lang="ts">
// useFetch: SSR when server executes, CSR when client runs
const { data, pending, error, refresh } = await useFetch('/api/products')

// 5 Large Return Values
// data: Response Data
// pending: Loading...
// error: Error Message
// refresh: How to Retrieve It Again
// status: Status Code
</script>

(2) useAsyncData: Dados assíncronos de uso geral

<script setup lang="ts">
const { data } = await useAsyncData('products', () => 
  $fetch('/api/products')
)

// Options: Cache, Dependency, Convert
const { data: users } = await useAsyncData(
  'users',
  () => $fetch('/api/users'),
  {
    cache: 'force-cache',  // Force Caching
    default: () => []      // Default value
  }
)
</script>

(3) useState: estado compartilhado entre componentes e compatível com SSR

<script setup lang="ts">
// useState Replace ref(SSR Friendly)
const cart = useState('cart', () => ({ items: [], total: 0 }))

// Edit
cart.value.items.push(product)
</script>

(4) 5 Outros componentes

// 1. useFetch:Server-Side Data Prefetching
const { data } = await useFetch('/api/products')

// 2. useAsyncData:Generic Asynchronous
const { data } = await useAsyncData('key', fetcher)

// 3. useState:Global State(SSR Friendly)
const user = useState('user', () => null)

// 4. useRoute:Current Route
const route = useRoute()

// 5. useRuntimeConfig:Runtime Configuration
const config = useRuntimeConfig()

6. Configuração básica do Nuxt 3

(1) nuxt.config.ts

export default defineNuxtConfig({
  // 1. Module
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    '@vueuse/nuxt'
  ],
  
  // 2. CSS
  css: ['~/assets/css/main.css'],
  
  // 3. Runtime Configuration
  runtimeConfig: {
    apiSecret: 'xxx',  // Server-side
    public: {
      apiBase: 'https://api.example.com'  // Client
    }
  },
  
  // 4. Rendering Mode
  ssr: true,  // Enable SSR
  
  // 5. Application Configuration
  app: {
    head: {
      title: 'My App',
      meta: [
        { name: 'description', content: 'My app description' }
      ]
    }
  }
})

(2) Importação automática (não é necessário import)

<script setup lang="ts">
// ✅ Nuxt Automatic Import:
// - Vue 3 API(ref, computed, watch)
// - Nuxt 3 composables(useFetch, useState)
// - Components(components/ Table of Contents)
// - utils/ Table of Contents

const count = ref(0)
const { data } = await useFetch('/api/products')
</script>

(3) Otimização automática para SEO

<script setup lang="ts">
useHead({
  title: 'iPhone 15 Pro - My Shop',
  meta: [
    { name: 'description', content: 'Buy iPhone 15 Pro at best price' },
    { property: 'og:title', content: 'iPhone 15 Pro' },
    { property: 'og:image', content: '/iphone.jpg' }
  ]
})
</script>

7. Exemplos completos: 5 cenários principais do Nuxt

▶ Exemplo: 1. Estrutura completa de diretórios do Nuxt

my-nuxt-app/
├-- pages/           # File Routing
├-- components/      # Automatic Registration
├-- composables/     # Automatic Import
├-- server/api/      # API Routing
├-- server/middleware/
├-- middleware/      # Client-side middleware
├-- plugins/         # Nuxt Plugins
├-- layouts/         # Layout
└-- nuxt.config.ts

▶ Exemplo: 2. As 5 APIs principais

▶ Exemplo: 3. 5 Principais módulos do Nuxt

modules: [
  '@nuxtjs/tailwindcss',  // Tailwind Integration
  '@pinia/nuxt',          // Pinia Status
  '@vueuse/nuxt',         // VueUse
  '@nuxt/image',          // Image Optimization
  'nuxt-icon'             // Icon
]

▶ Exemplo: 4. 5 Principais casos de uso

▶ Exemplo: 5. Referência rápida para 5 erros comuns

❓ Perguntas Frequentes

P: O que devo escolher: CSR, SSR ou SSG? R: Sites de conteúdo (blogs/documentação) → SSG. Comércio eletrônico/redes sociais → SSR. Back-end/SaaS → CSR. O Nuxt 3 oferece suporte a todas as três opções.

P: Qual versão do Node.js o Nuxt 3 requer? R: Node.js 18 ou posterior (em outubro de 2023). O Nuxt 2 ainda é compatível com o Node.js 16.

P: useFetch x useAsyncData? R: useFetch é uma sintaxe simplificada para useAsyncData (especificamente para lidar com operações de fetch). Na maioria dos casos, useFetch é suficiente.

P: Nuxt 3 x Nuxt 2? R: O Nuxt 3 (novembro de 2022) oferece suporte ao Vue 3, ao Vite e ao TypeScript como componentes de primeira classe. O Nuxt 2 está em modo de manutenção.

P: Como faço para criar um SSG? R: npx nuxi generate Gere o diretório .output/public/ e faça a implantação no Netlify, Vercel ou Cloudflare Pages.

P: O que devo fazer se o servidor SSR estiver sob carga pesada? R: Implemente usando o servidor Nitro (integrado ao Nuxt) no Vercel Edge, no Cloudflare Workers ou em um cluster Node. Ou mude para SSG.

P: O ecossistema de módulos do Nuxt é abrangente? R: Sim, é. @nuxtjs/ refere-se aos módulos oficiais (além de mais de 200 módulos da comunidade). Tailwind, Pinia, VueUse, Image, I18n e Auth possuem integrações oficiais.*

📖 Resumo

• CSR / SSR / SSG: Os três principais modos de renderização: CSR (3–5 segundos para o carregamento da primeira tela) / SSR (0,5–1 segundo) / SSG (0,1–0,5 segundos)
• 5 principais casos de uso do SSR: comércio eletrônico / redes sociais / dados em tempo real / status de login / conteúdo dinâmico
• O Nuxt 3 é o framework oficial de SSR para o Vue 3
• Roteamento de arquivos: o diretório “pages/” é a rota
• 5 APIs principais: useFetch / useAsyncData / useState / useRoute / useRuntimeConfig
• Importação automática: API do Vue + composíveis do Nuxt + componentes + utilitários
• Ecossistema de módulos do Nuxt: mais de 200 módulos oficiais e da comunidade
• Otimização automática de SEO: configuração dinâmica do useHead

📝 Exercícios

1. Questões básicas (Dificuldade: ⭐)

   Crie um projeto Nuxt 3:

   • 3 páginas (Página inicial / Sobre / Contato)
   • 1 API (/api/hello)
   • Navegação superior + Layout inferior

2. Problemas avançados (Dificuldade: ⭐⭐)

   Implementação da funcionalidade completa de SSR no Nuxt 3:

   • 5 páginas (Página inicial / Lista de produtos / Detalhes do produto / Carrinho / Login)
   • Rotas do servidor/API (/api/products)
   • useFetch: pré-busca no lado do servidor
   • useHead SEO dinâmico
   • Gestão Estadual de Pinia

3. Problema de desafio (Dificuldade: ⭐⭐⭐)

   Implementação de um projeto completo do “Nuxt 3 para empresas”:

   1. Mais de 10 páginas (comércio eletrônico + painel de administração + autenticação)
   2. As 5 principais rotas da API
   3. 3 modos de renderização (SSR / SSG / CSR híbrido)
   4. Otimização para SEO (Dados Estruturados + Open Graph + Mapa do site)
   5. Otimização de desempenho (carregamento diferido de imagens / divisão de código / CDN)
   6. Implantar no Vercel Edge
   7. Tipos completos do TypeScript

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós