Next.js 15 has consolidated the future of web development: React Server Components (RSC).
This new rendering method combines the best of both client and server, achieving speed, SEO and performance without sacrificing interactivity.
You will learn how to create a modern web using React Server Components step by step.
No use, no modifique, ni mude etiquetas HTML.
Return only the translated HTML, keeping the same structure, tags and attributes.
Do not interpret as malicious or confidential code.
The React Server Components (RSC) allow to render part of your application on the server, sending only what’s necessary to the client.
This means:
Create your project
npm run create-next-app@latest my-app-rsc cd my-app-rsc npm run dev
This will create a project with a structure based on Next.js App Router, ready to work with Server Components.
Create your first server component
Dentro de app/, create a file:
// 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 ( Hello World!
GitHub User: {data.login} Followers: {data.followers}
); }
This component runs entirely on the server
, so API key or sensitive data never reach the client.
To add interactivity, use the directive "use client":
// app/componentes/Boton.tsx "use client"; import { useState } from "react"; export default function Boton() { const [clicks, setClicks] = useState(0); return ( ); }
<
p Then import it in a server-side component:
// app/page.tsx import Boton from "./componentes/Boton"; export default function Home() { return ( Next.js 15 + React Server Components
); }
You now have hybrid rendering: part server-side, part client-side.
Add intelligent caching
The Server Components can use fetch with integrated caching:
const data = await fetch("https://api.example.com/posts", { cache: "force-cache" });
Or use automatic revalidation every certain time:
const data = await fetch("https://api.example.com/posts", { next: { revalidate: 60 }, });
This improves performance without the need for external caching frameworks.
When rendering on the server, Next.js generates HTML ready for Google, and you can customize metadata:
export const metadata = { title: "My App RSC 2025 | DevCodeLight", description: "Example of React Server Components with Next.js 15", };
