Nuxt

En el Radar compartido: Trial (valoración de la edición aportada).

Cómo funciona

Integra Vue con convenciones de rutas y capacidades de servidor. Permite distintos modos de renderizado y reglas por ruta para equilibrar caché e interacción.

Ejemplo de uso

Prerenderizar páginas informativas, servir un catálogo actualizado desde el servidor y limitar el panel interno al modo que corresponda. Medir hidratación y tiempo de carga.

Estructura de un proyecto

app/
├── pages/            # rutas por archivo: pages/creditos/[id].vue → /creditos/:id
├── components/       # importación automática
├── composables/      # lógica reutilizable (useXxx), importación automática
├── layouts/
└── middleware/       # guardas de navegación (autenticación)
server/
├── api/              # endpoints: server/api/creditos.get.ts → GET /api/creditos
└── middleware/
nuxt.config.ts

El motor de servidor es Nitro, que permite desplegar el mismo proyecto en Node, contenedores, Cloud Run, plataformas serverless o edge mediante presets.

Carga de datos

<script setup lang="ts">
const route = useRoute();
const {
  data: credito,
  status,
  error,
} = await useFetch(`/api/creditos/${route.params.id}`, {
  key: `credito-${route.params.id}`,
});
</script>

<template>
  <p v-if="status === 'pending'">Cargando…</p>
  <p v-else-if="error">No se pudo cargar el crédito.</p>
  <CreditoDetalle v-else :credito="credito" />
</template>

useFetch y useAsyncData se ejecutan en el servidor durante el SSR y transfieren el resultado al cliente, evitando una segunda petición al hidratar.

Renderizado híbrido por ruta

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }, // estático en build
    '/productos/**': { swr: 3600 }, // SSR cacheado 1 h, revalidado en segundo plano
    '/panel/**': { ssr: false }, // solo cliente (aplicación privada)
    '/api/**': { cors: true, headers: { 'cache-control': 'no-store' } },
  },
  runtimeConfig: {
    apiSecret: '', // solo servidor (NUXT_API_SECRET)
    public: { apiBase: '' }, // expuesto al cliente (NUXT_PUBLIC_API_BASE)
  },
});

Endpoints de servidor

// server/api/creditos/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id');
  const config = useRuntimeConfig(event);
  return await $fetch(`${config.apiInterna}/creditos/${id}`, {
    headers: { Authorization: `Bearer ${config.apiSecret}` },
  });
});

Patrón BFF: el navegador nunca ve el secreto ni la API interna.

Módulos habituales

@nuxt/image (optimización de imágenes), @pinia/nuxt (estado), @nuxt/content (contenido en Markdown), @nuxtjs/i18n (internacionalización), @nuxt/test-utils (pruebas). Nuxt se construye sobre Vite; el equivalente en el ecosistema React sería Next.js, y en Svelte, SvelteKit (Svelte).

Criterios de implementación

Gestionar caché y datos privados de forma separada. Revisar compatibilidad de módulos y evitar APIs del navegador durante el renderizado del servidor.