Next.js App Router getServerSideProps: Cómo Reemplazar getServerSideProps y Obtener Datos en 2025
Juan Correa
Desarrollador de Software Senior
Si has intentado usar getServerSideProps en el nuevo App Router de Next.js, es probable que te hayas topado con un error inesperado. No te preocupes, en esta guía te muestro paso a paso cómo adaptar tu código fácilmente usando la nueva arquitectura de componentes de servidor 👇
Table of Contents
Error "getServerSideProps is not supported in App" en Next.js: Causas y Soluciones
Si intentaste usar getServerSideProps con el App Router de Next.js, probablemente viste este error:
Error: getServerSideProps is not supported in App
Next.js decidió eliminar getServerSideProps en el App Router para unificar el manejo de datos y aprovechar mejor los componentes de servidor, lo que permite una arquitectura más modular y con mejores opciones de caché.
La solución es adaptar tu código usando server components, pero hay detalles que no están bien explicados en la documentación oficial que veremos a continuación.
Next.js App Router getServerSideProps: Cómo Obtener Datos con el Nuevo App Router
Con el App Router de Next.js, getServerSideProps ya no se usa.
En su lugar, utilizamos componentes de servidor asíncronos, y obtenemos datos como con fetch.
Ejemplo de getServerSideProps
En la arquitectura de pages:
export async function getServerSideProps() {
const res = await fetch(`https://api.example.com/data`)
const data = await res.json()
return { props: { data } }
}
Equivalente con el App Router con server components
En el App Router, solo hacemos la llamada dentro del componente de servidor:
export default async function Page() {
const res = await fetch(`https://api.example.com/data`)
const data = await res.json()
return <div>{JSON.stringify(data)}</div>
}
Los componentes de servidor se renderizan en el servidor y envían HTML al cliente.
¿Quieres aprender más sobre Next.js? Descarga mi kit de recursos para desarrolladores con mini ebooks, roadmap y más.
¿Y si usas otra fuente? El principio es el mismo. Veamos cómo acceder a una base de datos con Prisma.
App Router Server Side Props: Cómo Usar DB o Prisma en el App Router
Para bases de datos como PostgreSQL, MySQL o SQLite, una opción popular es Prisma, un ORM que te permite realizar consultas directamente en componentes de servidor.
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default async function Page() {
const data = await prisma.user.findMany()
return <div>{JSON.stringify(data)}</div>
}
El equivalente a getServerSideProps en este caso sería definir la obtención de datos dentro de un componente de servidor (Server Component) usando funciones asincrónicas.
Ojo: sigue las mejores prácticas para integrar Prisma con Next.js sin afectar el performance.
Resumen: Adaptando getServerSideProps al App Router de Next.js
Usar getServerSideProps con el App Router de Next.js ya no es posible, pero puedes adaptar tu código fácilmente con componentes de servidor y funciones asincrónicas.
Es una manera más simplificada de obtener datos y manejar caché en la nueva arquitectura de Next.js, aprovechando las nuevas características de la versión 19 de React.js