Infinite loading in Nuxt in SSR (Universal) mode

connecteev
0
connecteev
commented 7 months ago

What problem does this feature solve?

I am trying to implement infinite loading in Nuxt in SSR mode. How can this be implemented, is there an example of this?
To see this in action on dev.to:

  • Go to https://dev.to/
  • By default, the page should about 45 posts in the news feed.
  • Scroll down on the infinite-loaded page so that new posts are loaded in the news feed.
  • Click on the title of any post to go to that post view page.
  • Click the browser's back button so you go back to https://dev.to/
  • Notice that you are taken back to the news feed in the EXACT same state you left it in:
  1. The page is NOT re-painted or re-rendered
  2. All the posts that were loaded by scrolling down the page (part of the infinite scroll) are preserved.
  3. If you view the source of the page, ALL of the content is visible in the source, including the content that was loaded as part of the infinite scroll.

This is my (failed) attempt at getting this to work: https://codesandbox.io/s/codesandbox-nuxt-uusli?fontsize=14

How can this be implemented using Nuxt.js in Universal mode (SSR enabled)?

idea
0
noureddinenoureddine
0
noureddinenoureddine
commented 6 months ago

you can store the posts and pagination data in the store. In fetch don't download data if the store has any posts. when the user reach the bottom of the page use the pagination data from the store to download new posts.

if posts are added frequently you may want to store the date as well so you can update the data when it's obsolete.

// store/index.js
posts: {
 data: [],
 pagination: [],
 last_updated: null
}
// posts/index.vue
fetch() {
 if (posts.data.length) return
 // get posts here and update the store
}
0
manniL
7.0k
manniL
commented 6 months ago

This is not a Nuxt.js core feature request.

Please post your questions not on the issue tracker directly as it's only for bug reports or feature requests. Instead, you could try out our Discord, StackOverflow or another platform.

0
connecteev
0
connecteev
commented 6 months ago

@manniL the Discord channel has very little activity, but ok…I hear you.

@noureddinenoureddine thanks for the tip. I am trying to do infinite loading in SSR mode using AsyncData, that problem is not yet solved.

0
connecteev
0
connecteev
commented 6 months ago

I heard of something called the IntersectionObserver but frankly that went over my head.

0
manniL
7.0k
manniL
commented 6 months ago

the Discord channel has very little activity, but ok…I hear you.

I strongly disagree with that. 😅

0
Informations
Feature RequestOpen
#c9808 - Created 7 months ago