Preguntas de entrevista Next.js

¿Cuál es la diferencia entre SSR, SSG, ISR y CSR? ¿Cuándo usas cada uno?

SSG construye HTML en tiempo de deploy — el más rápido y barato, correcto para contenido que raramente cambia. SSR renderiza por request, necesario cuando la página depende del usuario o de datos que deben estar actualizados. ISR sirve una página estática y la regenera en background después de un intervalo de revalidation, dando velocidad estática con datos lo bastante frescos. CSR renderiza en el navegador y conviene para dashboards detrás de un login donde el SEO no importa.

¿Qué son los React Server Components y en qué se diferencian de los client components?

Los server components corren solo en el servidor, así pueden consultar una base de datos o leer archivos directamente y nunca envían su código al navegador. No pueden usar state, effects, o APIs del navegador. Los client components son el modelo tradicional de React y se necesitan para interactividad. El patrón es mantener las páginas como server components y empujar "use client" lo más abajo posible en el árbol para que el bundle se mantenga pequeño.

¿Por qué se necesita la directiva "use client"?

En el App Router cada componente es un server component por defecto; "use client" marca el límite donde empieza el bundle del cliente. Todo lo importado debajo de ese límite se envía al navegador, por eso ponerlo en la parte superior de un layout accidentalmente hace que todo el subárbol sea client-side. Sin ella, llamar a useState o adjuntar un handler onClick lanza un error en tiempo de build.

¿Cómo funciona el caching en el App Router? ¿Qué es revalidate?

Next cachea en varias capas: la caché de resultado de fetch, la caché de ruta completa para la salida renderizada, y la caché de router del cliente para navegaciones. revalidate configura cuánto tiempo se mantiene fresca una entrada cacheada, ya sea por fetch o exportado desde el segmento de ruta. Para actualizaciones dirigidas por eventos llamas a revalidatePath o revalidateTag después de una mutación, que es más preciso que una ventana de tiempo.

¿Qué son las Server Actions y cuándo las usas?

Una Server Action es una función async marcada "use server" que un client component puede llamar directamente, con Next manejando la serialización y el round trip de red. Reemplaza escribir una ruta de API para mutaciones simples como envíos de formulario, y se compone con revalidatePath para refrescar datos después. Como es un endpoint público por debajo, igual debe validar el input y verificar la autorización.

¿Cómo optimiza imágenes next/image?

Genera variantes responsivas en formatos modernos como WebP y AVIF, sirve el tamaño que coincide con el viewport, hace lazy-load por defecto, y reserva espacio de layout para que la página no salte. Requerir width y height explícitos o la prop fill es lo que elimina el cumulative layout shift. El resultado usualmente es la mejora más grande de Core Web Vitals en una app Next.

¿Qué son streaming y Suspense en Next.js?

Streaming envía HTML al navegador en chunks a medida que está listo en vez de esperar a la fuente de datos más lenta. Envolver un componente lento en Suspense con un fallback deja que el resto de la página se renderice inmediatamente mientras esa sección llega después. Prácticamente esto significa que un widget lento de recomendaciones de producto ya no demora toda la página, lo que mejora el performance percibido y el time to first byte.

¿Cómo implementas metadata dinámica para SEO?

Exporta generateMetadata desde una página o layout — recibe los params de la ruta, puede hacer await a datos, y devuelve title, description, canonical, y campos de Open Graph. Para páginas estáticas el export de metadata más simple es suficiente. Agrega un archivo opengraph-image en la carpeta de la ruta y Next genera la imagen de preview social para esa ruta automáticamente.