Next.js 15: Pasar Props del Servidor al Cliente
easy⏱ 5 mincoursenextjs
Qué puede cruzar el límite
Seguro: strings, números, booleanos, null/undefined, objetos y arreglos planos hechos de lo anterior. No seguro: funciones (incluyendo manejadores de eventos y callbacks — no puedes pasar onSave del servidor al cliente), instancias de clase, y objetos Date (se serializan pero pierden su naturaleza Date, llegando como strings).
// Server Component
export default async function Page() {
const post = await db.post.findFirst(); // { id, title, publishedAt: Date, ... }
return (
<LikeButton
postId={post.id} // safe - string
title={post.title} // safe - string
likeCount={post.likes} // safe - number
publishedAt={post.publishedAt.toISOString()} // convert Date to string first
// onLike={() => save(post.id)} // not safe - functions cannot cross
/>
);
}
La interactividad cruza en el otro sentido
No puedes pasar una función del servidor como prop onClick — pero un Componente de Cliente sí puede llamar a una Server Action (una referencia de función especial, cubierta más adelante en el curso) o simplemente manejar su interactividad localmente con useState. Regla general: los datos fluyen del servidor al cliente como valores planos; el comportamiento vive en el cliente (o pasa por una Server Action, no por una prop cruda).
Detecta la prop insegura
Haz clic en cada prop candidata para revisar si es serializable. Nota que las dos marcadas como inseguras ya muestran su solución: convertir el Date a un string ISO, y mover la prop de función dentro del propio Componente de Cliente.