AgroSmart — Refactor Nuxt 4

export default defineNuxtConfig({
  routeRules: {
    // Marketing — HTML estático en build, máximo caché CDN
    '/':           { prerender: true },
    '/precios':    { prerender: true },
    '/sobre-nosotros': { prerender: true },

    // Catálogo de fincas — SWR 1h: sirve caché, revalida en bg
    '/fincas':     { swr: 3600 },
    '/fincas/**':  { swr: 1800 },

    // Blog / documentación — ISR: regenera on-demand
    '/blog/**':    { isr: true },

    // Dashboard app — SSR normal (datos en tiempo real)
    '/dashboard/**': { ssr: true },

    // Admin — SIN SSR: panel privado, sin valor SEO
    '/admin/**':   { ssr: false },   // ← FIX: era ssr: true

    // API — caché Nitro a nivel edge
    '/api/**':     { cache: { maxAge: 60 * 60 } },
  },
})

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import type { DashboardStats } from '~/types'

// ✓ useFetch: SSR-safe, payload forwarded, sin doble fetch
const { data: stats, status } = await useFetch<DashboardStats>(
  '/api/dashboard/stats',
  { pick: ['totalFincas', 'alertasActivas', 'rendimientoMedio'] }
)

// ✓ Fecha solo en cliente — nunca en SSR
const ahora = ref<Date | null>(null)
const horaFormateada = computed(() =>
  ahora.value
    ? ahora.value.toLocaleTimeString('es-ES')
    : '--:--:--'  // placeholder SSR neutro
)

onMounted(() => {
  ahora.value = new Date()
  setInterval(() => { ahora.value = new Date() }, 1000)
})
</script>

<template>
  <div class="dashboard">
    <!-- ClientOnly: hora nunca se renderiza en SSR → no hay mismatch -->
    <ClientOnly>
      <p class="timestamp">{{ horaFormateada }}</p>
      <template #fallback><p class="timestamp skeleton">--:--:--</p></template>
    </ClientOnly>

    <DashboardStats v-if="stats" :data="stats" />
  </div>
</template>

import type { Finca, Incidencia } from '~/types'

export function useFinca(slug: string) {

  // ✓ useFetch: SSR → payload → cliente sin doble petición
  //   pick: solo los campos que necesita el template → payload mínimo
  const {
    data: finca,
    status: fincaStatus,
    error: fincaError,
    refresh: refreshFinca
  } = await useFetch<Finca>(
    `/api/fincas/${slug}`,
    {
      key: `finca:${slug}`,
      pick: [
        'id', 'nombre', 'ubicacion',
        'hectareas', 'cultivo', 'estado',
        'alertas', 'ultimaActualizacion'
      ],   // ← antes: objeto completo ~8 KB → ahora: ~1.2 KB
    }
  )

  // ✓ useLazyFetch: no bloquea navegación, muestra spinner independiente
  //   server: false → no necesario para SEO ni primer paint
  const {
    data: incidencias,
    status: incidenciasStatus
  } = useLazyFetch<Incidencia[]>(
    `/api/fincas/${slug}/incidencias`,
    {
      key: `finca:${slug}:incidencias`,
      server: false,
      pick: ['id', 'tipo', 'descripcion', 'fecha', 'resuelta'],
    }
  )

  return {
    finca, fincaStatus, fincaError, refreshFinca,
    incidencias, incidenciasStatus,
  }
}

<script setup lang="ts">
const route = useRoute()  // ✓ useRoute() de Nuxt, no vue-router
const {
  finca, fincaStatus,
  incidencias, incidenciasStatus
} = await useFinca(route.params.slug as string)

// ✓ $fetch solo para acciones del usuario (mutación)
async function marcarResuelta(id: string) {
  await $fetch(`/api/incidencias/${id}/resolver`, { method: 'PATCH' })
}
</script>

<template>
  <main>
    <FincaHeader v-if="finca" :finca="finca" />

    <!-- Lazy: mapa solo cuando usuario lo solicita -->
    <LazyMapaInteractivo
      v-if="mostrarMapa"
      hydrate-on-visible
      :coordenadas="finca?.coordenadas"
    />

    <!-- Incidencias: lazy, con estado de carga propio -->
    <section class="incidencias">
      <LoadingSpinner v-if="incidenciasStatus === 'pending'" />
      <IncidenciasList
        v-else
        :items="incidencias"
        @resolver="marcarResuelta"
      />
    </section>
  </main>
</template>

<script setup lang="ts">
// defineLazyHydrationComponent: estrategia personalizada
const MapaComplejo = defineLazyHydrationComponent(
  () => import('~/components/MapaLeaflet.vue'),
  {
    hydrateOnVisible: { rootMargin: '200px' },
    // Alternativa para zonas interactivas pesadas:
    // hydrateOnIdle: true
  }
)
</script>

<template>
  <div class="mapa-wrapper">
    <Suspense>
      <MapaComplejo v-bind="$attrs" />
      <template #fallback>
        <div class="mapa-placeholder">Cargando mapa…</div>
      </template>
    </Suspense>
  </div>
</template>

• ✅Primer render SSR y cliente producen el mismo markup (sin Date.now() ni Math.random() en template)
• ✅Datos de página usan useFetch / useAsyncData con clave estable, no $fetch top-level
• ✅Datos no críticos (incidencias) son lazy con UI de carga explícita (status === 'pending')
• ✅Route rules por sección: marketing prerender, catálogo SWR, admin CSR-only
• ✅MapaInteractivo (Leaflet ~450 KB) fuera del bundle principal, hidratación lazy on-visible
• ✅Payload trimado con pick: finca de ~8 KB → ~1.2 KB por response
• ✅useRoute() de Nuxt, no de vue-router directamente
• ✅$fetch solo para mutaciones disparadas por el usuario (PATCH/POST)