Pagination is an essential feature for managing large sets of content in web applications. Here’s a breakdown of how I like to approach pagination and why it works well in different scenarios.

Setting Up Pagination in page.ts

The first step for me is always to create the pagination logic in page.ts or page.server.ts. This is where I calculate the total number of pages, determine the items per page, and query the data accordingly.

Query From Sanity for Paginated Blogs

Breaking It Down

• Pagination Logic: Here, I’m calculating the current page from the URL query parameters. If no page parameter is passed, it defaults to page=1.
• Items per Page: I’ve set the perPage variable to 6, which means I’m displaying six blog posts per page.
• Sanity Query: I use a groq query to pull the blog data and count the total number of blogs to figure out how many pages we need. Learn more about groq.
• Caching: The setHeaders function adds caching headers to make sure the response is cached for a good period, so users won’t have to wait for the data to be fetched again for the same page. Learn more about setHeaders

Creating the Pagination Component

Now that we have the pagination logic in place, it’s time to create a reusable pagination component in Svelte. This component will render the page buttons and handle the logic for navigating between pages.

The navigateTo function updates the page query parameter in the URL and navigates to the new page. This is what triggers the SvelteKit page load and the data-fetching logic to re-fetch the content based on the selected page.

And that’s it! You now have a functional, efficient pagination system in your SvelteKit + Sanity.io project.