mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
3 files changed
+15
-5
No files matched your search
@@ -13,13 +13,23 @@ date: '2023-04-04'
|
||||
toc_depth: 6
|
||||
---
|
||||
|
||||
Every Launch Week, we strive to approach things differently as part of our Kaizen mindset. For [Launch Week 7](https://www.supabase.com/launch-week), we decided to add some twists to our popular ticket system. While we made several changes, this post will focus on one specific modification (we'll share more about the rest this week!).
|
||||
Imagine you generated a bunch of tickets for the Supabase [Launch Week](https://www.supabase.com/launch-week) and you wanted to display them all on [one page](https://supabase.com/launch-week/tickets). It might take a while to load them all in one go, so a great solution to this would be to lazy load smaller subsets while the user scrolls, with a technique called infinite scrolling.
|
||||
|
||||
Our goal was to feature all the amazing people who generated tickets on a [single page](https://supabase.com/launch-week/tickets). However, displaying them all at once could take a toll on the loading time and negatively affect the user experience. That's where lazy loading smaller subsets via infinite scrolling came in as the solution.
|
||||
An infinite scroll allows you to scroll through your content endlessly while only loading the data you need as you need it. This improves performance while also creating a smooth and delightful user experience.
|
||||
|
||||
With infinite scrolling, users can effortlessly scroll through content while only loading the necessary data as they go. This not only enhances performance but also creates a seamless and enjoyable user experience.
|
||||
In this post, we'll go through the steps of how to create an infinite scroll using NextJs, Supabase, and Framer Motion.
|
||||
|
||||
In this post, we'll detail our process of implementing infinite scrolling using Next.js, Framer Motion, and Supabase.
|
||||
## What is infinite scroll?
|
||||
|
||||
Infinite scroll is a web design technique that automatically loads and displays new content as a user scrolls down a web page. This creates an endless scrolling experience that eliminates the need for pagination and provides a seamless and uninterrupted browsing experience.
|
||||
|
||||
Infinite scroll can enhance user experience and engagement by providing a fluid and intuitive browsing experience. It also allows for faster content delivery. By dynamically loading and displaying content as needed, infinite scroll can reduce the time and effort required to load pages and deliver content, improving overall performance and user satisfaction.
|
||||
|
||||
Next.js is a great choice for implementing infinite scroll in a web application. It provides server-side rendering and automatic code splitting, which can improve performance and optimize the loading of content as the user scrolls down the page. It also includes built-in support for dynamic imports and lazy loading, which can be useful for fetching and displaying content as needed.
|
||||
|
||||
Plus, incremental static regeneration (ISR) and pre-fetching of data can further improve performance by enabling the server to generate and cache pages in advance, and to pre-fetch data as the user scrolls down the page.
|
||||
|
||||
Now, onto the code!
|
||||
|
||||
## Step 0. Load the first batch
|
||||
|
||||
|
||||
@@ -101,7 +101,7 @@ function IntegrationPartnersPage(props: Props) {
|
||||
url: `https://supabase.com/partners`,
|
||||
images: [
|
||||
{
|
||||
url: `https://supabase.com${router.basePath}/images/product/database/database-og.jpg`, // TODO
|
||||
url: `https://supabase.com${router.basePath}/images/og/integrations.png`, // TODO
|
||||
},
|
||||
],
|
||||
}}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
Reference in new issue
Block a user