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 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 de 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) => {
      // 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 la obtención de datos en un useEffect es un patrón que puedes ver en aplicaciones React más antiguas, 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>
}

Es bueno saberlo:

Ten en cuenta que el 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 tu aplicación. También puede generar problemas de rendimiento para usuarios con conexiones a Internet más lentas o dispositivos menos potentes, ya que deben 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 enrutador App, también puedes usar Interfaz de carga con Suspense para mostrar un indicador de carga mientras se renderiza la página.