Renderizado del Cliente (CSR)

Las páginas se renderizan en el cliente después de que JavaScript se carga. Ideal para SPAs, Juegos y Dashboards donde la interactividad es clave.

Servidor

🌐
Request
Response
🖥️
Servidor envía HTML/CSS/JS

Cliente

Cliente carga HTML/CSS/JS
React.mount()
render()
componentDidMount() / useEffect()
JavaScript obtiene datos
Contenido dinámico renderizado en el cliente
✨Renderizar UI
Beneficios x Trade-offs

Benefits

  • •Interactividad Rica: Interactividad completa del cliente
  • •Reducción de Carga del Servidor: Procesamiento mínimo del servidor
  • •Actualizaciones Dinámicas: Actualizaciones de contenido en tiempo real
  • •Soporte Offline: Funciona sin conexión al servidor

Trade-offs

  • •SEO inicial pobre: Los motores de búsqueda ven HTML vacío
  • •TTFB lento: El contenido se carga después de JavaScript
  • •Alto uso de CPU del cliente: Toda la renderización en el cliente
  • •Sin contenido sin JavaScript: Se rompe si JS está deshabilitado
¿Cómo implementar?

CSR usa componentes del lado del cliente con hooks React para interactividad.

"use client";

import { useState, useEffect } from "react";

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/data")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data?.message}</div>;
}
  • •Usa la directiva 'use client' en la parte superior del archivo
  • •Los componentes pueden usar hooks React (useState, useEffect, etc.)
  • •La obtención de datos ocurre en el lado del cliente
  • •Perfecto para características interactivas y actualizaciones dinámicas