Search code examples
astrojs

Paginate in SSR mode with Astrojs

I have an astrojs project with the following structure.

pages/
 |- index.astro
 |- blog/index.astro
 |- blog/[slug].astro
 |- blog/[page].astro

Since the project is not static, I render in SSR mode. Since I am a beginner in this subject, I learn everything by doing and trying. Most things look and work pretty well now, but I just can't seem to get the pagination done.

The examples I've seen are all prepared in SSG mode because they always include getStaticPaths. However, if you use getStaticPaths in SSR mode, you'll get some kind of warning that it doesn't work and is excluded.

In this case, I couldn't figure out how to do pagination.

SSG Routing, SSR Routing and SSG Pagination but it does not contain SSR pagination. It pass datas with this function: return paginate(astronautPages, { pageSize: 2 }); inside getStaticPaths but it desn't work outside of getStaticPaths

How can I get const { page } = Astro.props; without getStaticPaths?

[If more details about what I did and the codes are needed for the solution, I will provide them. I didn't add it to avoid confusing you.]

Solution

  • You don't mention why you cannot use SSG, which is usually easiest.

    However, if you really need SSR, the problem from your code seems to be that blog/[slug].astro and blog/[page].astro refer to the same set of URLs. How is Astro supposed to know which one to choose when you visit /blog/foo123?

    Try having one route be more specific, like pages/blog/page/[page].astro. See the astro docs for the rules on which route takes precedence.