El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El renderizado del lado del servidor (SSR) es una técnica que permite generar HTML en el servidor en lugar de en el cliente. Esto puede mejorar el rendimiento de la aplicación y la optimización para motores de búsqueda (SEO). Next.js es un framework de React que facilita la implementación de SSR.

¿Qué es Next.js?

Next.js es un framework de React que permite la creación de aplicaciones web con renderizado del lado del servidor, generación de sitios estáticos y muchas otras características avanzadas. Algunas de las ventajas de usar Next.js incluyen:

Renderizado del Lado del Servidor (SSR): Genera HTML en el servidor para mejorar el rendimiento y SEO.
Generación de Sitios Estáticos (SSG): Genera HTML en el momento de la construcción para servir contenido estático.
División de Código Automática: Carga solo el código necesario para cada página.
Rutas Basadas en el Sistema de Archivos: Facilita la creación de rutas mediante la estructura de archivos.

Configuración del Entorno de Desarrollo

Para comenzar a usar Next.js, primero necesitas configurar tu entorno de desarrollo. Sigue estos pasos:

Instalar Node.js: Asegúrate de tener Node.js instalado en tu máquina. Puedes descargarlo desde nodejs.org.

Crear un Nuevo Proyecto Next.js:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
npm run dev

Estructura del Proyecto:
- pages/: Contiene los archivos de las páginas. Cada archivo en esta carpeta se convierte en una ruta.
- public/: Contiene archivos estáticos como imágenes.
- styles/: Contiene archivos CSS.

Creando una Página con SSR

Para crear una página con SSR en Next.js, necesitas usar la función getServerSideProps. Esta función se ejecuta en el servidor en cada solicitud y permite pasar datos a tu componente de página.

Ejemplo Práctico

Crear una Página: Crea un archivo pages/index.js con el siguiente contenido:

import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Renderizado del Lado del Servidor con Next.js</h1>
      <p>Datos obtenidos del servidor: {data}</p>
    </div>
  );
};

export async function getServerSideProps() {
  // Simula una llamada a una API
  const data = 'Hola desde el servidor';

  return {
    props: {
      data,
    },
  };
}

export default Home;

Explicación del Código:
- Home: Es el componente de la página principal.
- getServerSideProps: Esta función se ejecuta en el servidor y obtiene los datos necesarios antes de renderizar la página. Los datos se pasan como props al componente Home.
Ejecutar la Aplicación:
```
npm run dev
```
Abre tu navegador y navega a http://localhost:3000 para ver la página renderizada con datos obtenidos del servidor.

Comparación entre SSR y SSG

Característica	SSR (Server-Side Rendering)	SSG (Static Site Generation)
Renderizado	En cada solicitud	En el momento de la construcción
Rendimiento	Depende del servidor	Muy rápido, contenido estático
SEO	Excelente	Excelente
Actualización de Contenido	En tiempo real	Necesita reconstrucción

Ejercicio Práctico

Ejercicio 1: Crear una Página con Datos Dinámicos

Objetivo: Crear una página que obtenga datos dinámicos de una API externa y los muestre en la página.
Instrucciones:
- Crea un archivo pages/dynamic.js.
- Usa getServerSideProps para obtener datos de la API https://jsonplaceholder.typicode.com/posts/1.
- Muestra el título y el cuerpo del post en la página.

Solución

// pages/dynamic.js
import React from 'react';

const DynamicPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default DynamicPage;

Explicación de la Solución

Fetch de Datos: getServerSideProps usa fetch para obtener datos de la API externa.
Pasar Datos al Componente: Los datos obtenidos se pasan como props al componente DynamicPage.

Conclusión

En esta sección, aprendiste sobre el renderizado del lado del servidor (SSR) con Next.js y cómo configurarlo en tu proyecto. También creaste una página con SSR y comparaste SSR con SSG. Ahora estás listo para explorar más características avanzadas de Next.js y cómo pueden beneficiar a tus aplicaciones React.

En el siguiente tema, exploraremos la Generación de Sitios Estáticos (SSG) con Next.js.

Renderizado del Lado del Servidor (SSR) con Next.js

¿Qué es Next.js?

Configuración del Entorno de Desarrollo

Creando una Página con SSR

Ejemplo Práctico

Comparación entre SSR y SSG

Ejercicio Práctico

Ejercicio 1: Crear una Página con Datos Dinámicos

Solución

Explicación de la Solución

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa