Hi @jolly mirage. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Context con ServerSideRendering
fallen vergeBOT
Para crear un contexto que genere un fetch al servidor en cada página dinámica, puedes utilizar el método getServerSideProps o getStaticProps en el directorio pages de Next.js. Este método se utiliza para obtener datos del servidor y pasarlos como props al componente React exportado por defecto en el archivo.
Aquí tienes un ejemplo de cómo se podría hacer esto:
// `pages` directory
export async function getServerSideProps() {
const res = await fetch(`<https://...`>)
const projects = await res.json()
return { props: { projects } }
}
export default function Dashboard({ projects }) {
return (
<ul>
{projects.map((project) => (
<li key={project.id}>{project.name}</li>
))}
</ul>
)
}
En este ejemplo, getServerSideProps realiza una solicitud fetch a una URL (reemplaza <https://...> con tu URL de backend), obtiene los datos (en este caso, proyectos), y luego los pasa como props al componente Dashboard.
Si estás utilizando el directorio app en lugar del directorio pages, puedes colocar tu obtención de datos dentro de tus componentes React utilizando Server Components (https://nextjs.org/docs/app/building-your-application/rendering/server-components). Aquí tienes un ejemplo de cómo se podría hacer esto:
// `app` directory
// This function can be named anything
async function getProjects() {
const res = await fetch(`<https://...`,> { cache: 'no-store' })
const projects = await res.json()
return projects
}
export default async function Dashboard() {
const projects = await getProjects()
return (
<ul>
{projects.map((project) => (
<li key={project.id}>{project.name}</li>
))}
</ul>
)
}
En este ejemplo, la función getProjects realiza la solicitud fetch y los datos obtenidos se utilizan directamente en el componente Dashboard.
Recuerda reemplazar <https://...> con la URL de tu backend y ajustar el código para que se ajuste a tus necesidades específicas.
Fuentes:
- Next.js Docs - Migrating from
pagestoapp(https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration) - Next.js Docs - From Pages to App (https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration)