Next.JS

Next.js es un framework que utiliza toda la mecánica de React con el añadido de que incorpora un sistema de enrutamiento, compilación y renderizado en el backend que lo convierten en una herramienta completa para el desarrollo web.

1. Arquitectura de Páginas

Next.js adopta una arquitectura basada en páginas, donde cada archivo dentro de la carpeta /pages se convierte en una ruta en la aplicación. Por ejemplo: - pages/index.js se convierte en la ruta / - pages/about.js se convierte en la ruta /about

Este enfoque de enrutamiento automático simplifica la estructura del proyecto y facilita la navegación entre diferentes partes de la aplicación.

2. Renderizado

Next.js ofrece diferentes métodos de renderizado para optimizar el rendimiento y la experiencia del usuario:

Uso del Renderizado del Lado del Servidor (SSR)

1. Definición de SSR

El Renderizado del Lado del Servidor (SSR) se refiere a la técnica donde la generación del HTML de la página ocurre en el servidor, permitiendo que el contenido se envíe al cliente ya renderizado. Esto es especialmente útil para el SEO y para mejorar la experiencia del usuario, ya que el contenido está disponible inmediatamente cuando se carga la página.

2. Cómo Usar SSR en Next.js

Para implementar SSR en Next.js, se utiliza la función getServerSideProps. Esta función se exporta desde un componente de página y es llamada por Next.js en el lado del servidor antes de renderizar la página.

Ejemplo de SSR

// pages/ejemplo.js
export async function getServerSideProps(context) {
  // Aquí puedes consultar datos de una API o base de datos
  const res = await fetch('https://api.ejemplo.com/datos');
  const datos = await res.json();

  // Retorna los datos como props para el componente
  return { props: { datos } };
}

const Ejemplo = ({ datos }) => {
  return (
    <div>
      <h1>Datos Cargados desde el Servidor</h1>
      <pre>{JSON.stringify(datos, null, 2)}</pre>
    </div>
  );
};

export default Ejemplo;

3. Flujo de Funcionamiento de SSR

• Cuando un usuario accede a la ruta /ejemplo, Next.js llama a la función getServerSideProps.
• El servidor hace la solicitud a la API, obtiene los datos y los retorna como props.
• Next.js renderiza la página en el servidor con los datos recibidos y envía el HTML completo al cliente.
• El cliente ve la página ya renderizada, mejorando el tiempo de carga inicial y la experiencia del usuario.

Distinguir SSR de Renderizado del Lado del Cliente (CSR)

1. Definición de CSR

El Renderizado del Lado del Cliente (CSR) es una técnica en la que la mayor parte del procesamiento para renderizar la página se realiza en el navegador del usuario. Esto significa que el HTML inicial enviado por el servidor es mínimo, y el contenido se carga dinámicamente a través de llamadas a la API después de que la página se ha cargado.

2. Cómo Funciona el CSR

• El servidor envía un archivo HTML básico con un archivo JavaScript que contiene la lógica de la aplicación.
• El JavaScript se descarga y ejecuta en el navegador, que hace solicitudes adicionales para obtener datos y renderizar la interfaz.
• El contenido se muestra solo después de que el JavaScript se ha ejecutado, lo que puede resultar en una experiencia de usuario menos eficiente, especialmente en conexiones lentas.

Ejemplo de CSR

// pages/csr.js
import { useEffect, useState } from 'react';

const Csr = () => {
  const [datos, setDatos] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://api.ejemplo.com/datos');
      const data = await res.json();
      setDatos(data);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Datos Cargados desde el Cliente</h1>
      {datos ? <pre>{JSON.stringify(datos, null, 2)}</pre> : <p>Cargando...</p>}
    </div>
  );
};

export default Csr;

3. Comparación entre SSR y CSR

| Característica | SSR | CSR | |