Renderizado del lado del cliente (CSR)

En el Renderizado del Lado del Cliente (CSR) 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 poder 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í tienes un ejemplo de cómo usar 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) => {
      // maneja 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 obtener datos en un useEffect es un patrón que puedes ver 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í tienes 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:

Ten en cuenta que el CSR puede afectar al 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 tu aplicación. También puede provocar problemas de rendimiento para usuarios con conexiones a internet más 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 te 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 tu aplicación. En el App Router, también puedes usar Loading UI con Suspense para mostrar un indicador de carga mientras se renderiza la página.