Hi @urban iris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#View transition and pagination(?)
dry crowBOT
Astro provides built-in support for pagination of large collections of data. You can use the paginate() function to generate these pages for an array of values. The paginate() function will automatically generate the array to return from getStaticPaths() that creates one URL for every page of the paginated collection. The page number will be passed as a param, and the page data will be passed as a page prop.
Here's an example of how you can use the paginate() function in your [...page].astro file:
---export async function getStaticPaths({ paginate }) {
// Load your data with fetch(), Astro.glob(), etc.
const response = await fetch(`<https://pokeapi.co/api/v2/pokemon?limit=150`>);
const result = await response.json();
const allPokemon = result.results;
// Return a paginated collection of paths for all posts
return paginate(allPokemon, { pageSize: 10 });
}
// If set up correctly, The page prop now has everything that
// you need to render a single page (see next section).
const { page } = Astro.props;
This code will generate URLs like /posts/1, /posts/2, /posts/3, etc. for each page of the paginated collection.
For more advanced use-cases, you can also use nested pagination to group your paginated collection by some property or tag. This is done by returning an array of paginate() results from getStaticPaths(), one for each grouping.