Domina Next.js 14: Diferencias y mejores prácticas con Server Components

Next.js 14 revoluciona cómo construimos en React gracias a los Server Components. Esta arquitectura mejora el rendimiento y la seguridad, incorporando capacidades como streaming y renderizado parcial. A continuación, te presento una guía completa y actualizada para usarlos correctamente.

¿Qué son los Server Components?

Son componentes que se renderizan exclusivamente en el servidor. Su misterio radica en que el navegador no recibe su código JS, lo que reduce significativamente el bundle que se envía al cliente y mejora tiempos de carga iniciales. Esto facilita renderizar UI que no requiere interacción—ideal para blogs, documentación o listados de productos—gastando menos recursos del lado del cliente.

Ventajas clave

• Menos JavaScript al cliente: reduce el bundle y acelera el rendimiento.
• Seguridad: el código con tokens o lógica sensible permanece en el servidor.
• Caching y streaming: el render puede almacenarse en caché y enviarse por partes al cliente conforme esté listo.
• SEO mejorado: al pre-renderizar HTML, tanto buscadores como redes sociales funcionan mejor.

Componentes cliente: ¿cuándo usarlos?

Utiliza componentes cliente ('use client') cuando necesitas:

• useState, useEffect u otros hooks.
• Acceso a APIs del navegador (localStorage, geolocalización, etc.).
• Interactividad dentro de la UI.

Cómo trabajan juntos

• El servidor genera un React Server Component Payload con HTML pre-renderizado y marcadores para componentes clientes.
• El cliente recibe ese payload, muestra HTML inmediatamente y luego hidrata los componentes cliente según sea necesario.

Modos de renderizado en Next.js 14

• Rendering estático: se genera durante la construcción y se cachea.
• Rendering dinámico: se genera en cada petición (SSR).
• Streaming: permite enviar partes del contenido progresivamente, mejorando la percepción de velocidad.

Errores comunes y cómo evitarlos

• No convertir toda la página en cliente: segmenta los componentes para mantener el rendimiento.
• Cuidado con variables sensibles: usa solo NEXT_PUBLIC_ en el cliente; lo demás, del lado del servidor.
• Separación clara de responsabilidades: mantiene el código más limpio y escalable.

Ejemplo con Server y Client Components

// app/page.tsx (Server Component)
import LikeButton from '@/app/ui/like-button'
export default async function Page() {
  const posts = await getPosts()
  return (
    <div>
      {posts.map((p) => (
        <article key={p.id}>
          <h2>{p.title}</h2>
          <LikeButton likes={p.likes} />
        </article>
      ))}
    </div>
  )
}

// app/ui/like-button.tsx (Client Component)
'use client'
import { useState } from 'react'
export default function LikeButton({ likes }: { likes: number }) {
  const [count, setCount] = useState(likes)
  return <button onClick={() => setCount(count + 1)}>Like ({count})</button>
}

Conclusión

Next.js 14, con su enfoque en Server Components, streaming y múltiples estrategias de renderizado, permite construir aplicaciones React altamente optimizadas, seguras y fáciles de escalar. Separar claramente los componentes sin interacción de los que sí la necesitan te posiciona para lograr tiempos de carga rápidos y excelente experiencia de usuario. Vale la pena explorar esta arquitectura ¡ya!