Renderizado del lado del cliente (CSR)

En el Renderizado del Lado del Cliente (CSR por sus siglas en inglés) con React, el navegador descarga una página HTML mínima y el JavaScript necesario para la página. Luego, el JavaScript se utiliza para actualizar el DOM y renderizar la página. Cuando la aplicación se carga por primera vez, el usuario puede notar un ligero retraso antes de ver la página completa, esto se debe a que la página no se renderiza completamente hasta que todo el JavaScript se descarga, analiza y ejecuta.

Después de que la página se ha cargado por primera vez, navegar a otras páginas del mismo sitio web suele ser más rápido, ya que solo es necesario obtener los datos necesarios y JavaScript puede volver a renderizar partes de la página sin necesidad de una recarga completa.

En Next.js, hay dos formas de implementar el renderizado del lado del cliente:

1. Usando el hook useEffect() de React dentro de tus páginas en lugar de los métodos de renderizado del lado del servidor (getStaticProps y getServerSideProps).
2. Usando una biblioteca de obtención de datos como SWR o TanStack Query para obtener datos en el cliente (recomendado).

Aquí hay un ejemplo del uso de useEffect() dentro de una página de Next.js:

import React, { useState, useEffect } from 'react'

export function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data')
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      const result = await response.json()
      setData(result)
    }

    fetchData().catch((e) => {
      // manejar el error según sea necesario
      console.error('Ocurrió un error al obtener los datos: ', e)
    })
  }, [])

  return <p>{data ? `Tus datos: ${data}` : 'Cargando...'}</p>
}

En el ejemplo anterior, el componente comienza renderizando Cargando.... Luego, una vez que se obtienen los datos, se vuelve a renderizar y muestra los datos.

Aunque la obtención de datos en un useEffect es un patrón que puede verse en aplicaciones antiguas de React, recomendamos usar una biblioteca de obtención de datos para un mejor rendimiento, caché, actualizaciones optimistas y más. Aquí hay un ejemplo mínimo usando SWR para obtener datos en el cliente:

import useSWR from 'swr'

export function Page() {
  const { data, error, isLoading } = useSWR(
    'https://api.example.com/data',
    fetcher
  )

  if (error) return <p>Error al cargar.</p>
  if (isLoading) return <p>Cargando...</p>

  return <p>Tus datos: {data}</p>
}

Nota importante:

Tenga en cuenta que CSR puede afectar el SEO. Algunos rastreadores de motores de búsqueda podrían no ejecutar JavaScript y, por lo tanto, solo ver el estado inicial vacío o de carga de su aplicación. También puede provocar problemas de rendimiento para usuarios con conexiones a Internet lentas o dispositivos menos potentes, ya que necesitan esperar a que todo el JavaScript se cargue y ejecute antes de poder ver la página completa. Next.js promueve un enfoque híbrido que le permite usar una combinación de renderizado del lado del servidor, generación de sitios estáticos y renderizado del lado del cliente, según las necesidades de cada página en su aplicación. En el App Router, también puede usar Loading UI con Suspense para mostrar un indicador de carga mientras se renderiza la página.