Next.js Discord

Discord Forum

How to do pagination with server side rendering?

Unanswered
Raymond posted this in #help-forum
Open in Discord
How can I achieve the same effect as this page, https://huggingface.co/models?p=1&sort=trending, where there's pagination but rendered server side (assumed to be, I disabled JavaScript in the browser and it returned the same page)? It seems like pagination is handled via URL which the server parses, gets the records from the database, and renders it all on the server before serving it to the client. But in React I can't get the query parameters.

My app has a state to hold the entries. Upon page load, I fetch() entries and set the state. This causes the page to initially load nothing for a second before entries are rendered. Is there a way to move the rendering to server side, or delay render until there are entries?

3 Replies

You put the page number into the URL (via params or searchParams), receive it as a prop in your server component, and then fetch that corresponding page
searchParams are easier to use in this case