Cómo Crear una Web Ultra Rápida con React Server Components y Next.js 15

Tiempo de lectura: 2 minutos

Next.js 15 ha consolidado el futuro del desarrollo web: React Server Components (RSC).
Esta nueva forma de renderizado combina lo mejor del cliente y del servidor, logrando velocidad, SEO y rendimiento sin sacrificar interactividad.

En este tutorial aprenderás cómo crear una web moderna usando React Server Components paso a paso.

¿Qué son los React Server Components?

Los React Server Components (RSC) permiten renderizar parte de tu aplicación en el servidor, enviando al cliente solo lo necesario.
Esto significa:

• Carga inicial ultra rápida.
• Menos JavaScript en el navegador.
• Mejor SEO sin usar frameworks externos.
• Mejor seguridad (no expones tus claves en el cliente).

En Next.js 15, los componentes del servidor son la forma por defecto de construir páginas.

Requisitos previos

Asegúrate de tener:

• Node.js 20+
• npm o pnpm
• Conocimientos básicos de React y TypeScript

Crea tu proyecto

npx create-next-app@latest mi-app-rsc
cd mi-app-rsc
npm run dev

Esto creará un proyecto con estructura basada en Next.js App Router, lista para trabajar con Server Components.

Crea tu primer componente del servidor

Dentro de app/, crea un archivo:

// app/servidor/page.tsx
export default async function ServidorPage() {
  const res = await fetch("https://api.github.com/users/devcodelight");
  const data = await res.json();

  return (
    <div style={{ padding: 20 }}>
      <h1>👋 Bienvenido a React Server Components</h1>
      <p>Usuario de GitHub: {data.login}</p>
      <p>Seguidores: {data.followers}</p>
    </div>
  );
}

Este componente se ejecuta completamente en el servidor, por lo que la API key o los datos sensibles no llegan al cliente.

Mezcla componentes de servidor y cliente

Para añadir interactividad, usa la directiva "use client":

// app/componentes/Boton.tsx
"use client";

import { useState } from "react";

export default function Boton() {
  const [clicks, setClicks] = useState(0);
  return (
    <button
      onClick={() => setClicks(clicks + 1)}
      style={{
        background: "#0070f3",
        color: "white",
        padding: "10px 20px",
        borderRadius: "10px",
      }}
    >
      Clicks: {clicks}
    </button>
  );
}

Luego impórtalo en un componente del servidor:

// app/page.tsx
import Boton from "./componentes/Boton";

export default function Home() {
  return (
    <main>
      <h1>Next.js 15 + React Server Components 🚀</h1>
      <Boton />
    </main>
  );
}

Ahora tienes renderizado híbrido: parte servidor, parte cliente.

Añade caching inteligente

Los Server Components pueden usar fetch con caché integrada:

const data = await fetch("https://api.example.com/posts", { cache: "force-cache" });

O usar revalidación automática cada cierto tiempo:

const data = await fetch("https://api.example.com/posts", {
  next: { revalidate: 60 },
});

Esto mejora el rendimiento sin necesidad de frameworks externos de caching.

5. Mejora tu SEO automáticamente

Al renderizar en el servidor, Next.js genera HTML listo para Google, y puedes personalizar metadatos:

export const metadata = {
  title: "Mi App RSC 2025 | DevCodeLight",
  description: "Ejemplo de React Server Components con Next.js 15",
};