is it possible to have a dynamic route, getStaticPaths() some of the pages, and have the rest use the params data to make a query and run/render entirely client side?
#routing options
forest yacht
real bridgeBOT
Hi @forest yacht. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, it is possible to have a dynamic route and use getStaticPaths() to pre-render some of the pages at build time. For the rest of the pages, you can use the params data to make a query and run/render entirely on the client side.
In Astro, dynamic routes are defined by including [param] or [...path] brackets in your file names. For static site generation (SSG), you need to export a getStaticPaths() function that returns an array of objects with a params property. Each of these objects will generate a corresponding route. Here is an example:
export async function getStaticPaths() {
return [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } }
];
}
const { id } = Astro.params;
<h1>{id}</h1>
In this example, Astro will statically generate posts/1, posts/2, and posts/3 at build time (source (https://docs.astro.build/en/reference/api-reference#getstaticpaths)).
For the pages that you want to render on the client side, you can use the params data to make a query. However, keep in mind that getStaticPaths() should not be used for these pages if they are not "static" routes (source (https://docs.astro.build/en/guides/routing#server-ssr-mode)).
For example, you can access the parameter using the params property passed to the endpoint function:
const { resource, id } = Astro.params;
<h1>{resource}: {id}</h1>
This page will be served for any value of resource and id (source (https://docs.astro.build/en/guides/routing#server-ssr-mode)).