Infinite Scrolling in Inertia
If you've used any form of social media, you'll know that they make heavy use of infinite scrolling. When you reach the end of the page, more content is automatically streamed in. Typically, this tends to be handled via a REST API, but Inertia is all about avoiding REST APIs! So, let's implement the same functionality the Inertia way.
Progress
Series Info
- Episodes
- 4
- Run Time
- 37m
- Difficulty
- Intermediate
- Last Updated
- May 23, 2023
- Version
- Latest
Series Episodes
- Episodes (4)
Square One: Simple Inertia Pagination
An infinite page of content starts the same way as any other page of content: with pagination! Let's implement basic pagination in Inertia on a typical comments page.From Props to Refs
In order to support infinite scrolling, we need to keep track of all previous pages of comments, and append any new comments to our list dynamically. This presents a perfect use case for reactivity. Let's make the switch.It's Not Slick to Have to Click
Ideally, we shouldn't have to click a button to load more content; that's not much better than standard pagination. Instead, let's make use of a little gem JavaScript provides called theIntersectionObserverto automatically load in the next page of content.Make it Reusable
While our current code works, we don't want to write this out every time we want to implement infinite scrolling. Thankfully, Vue allows us to build composables, or reusable snippets of state-aware code. Let's refactor to a composable to finish off this series.
