@jeremywynn
I am using Nuxt in Universal / SSR (with Laravel APIs) and have a dynamic feed. The feed needs to be infinitely loaded, like on dev.to's homepage. Is the nuxt feed module going to work in this case? A working example would be helpful
No, the feed module is for generating something like dev.to/feed which is a more computer-readable format that news readers/aggregators digest. You'll need something different for infinitely loading behavior of posts like you see on dev.to/
This will be code that will most likely live inside the page component file you are looking to incorporate this behavior for, like index.vue.
I've done something like this, but in SPA mode. I used IntersectionObserver (it's a Web API) in an element at the bottom of the page, and then have that trigger an event to load more posts after the last post.
However you are sorting your posts when you are displaying the first set on the page, you'll need to use that method to get the next set of posts from your API or whatnot.
In my case, I was using MongoDB which allows sorting based on id. In essence, the IntersectionObserver listened to whenever I scrolled to the bottom of my list, retrieved the id of the last post that was rendered on the page, then I queried for the next set of posts to load:
Don't worry about the specifics of that code, but it is part of asking MongoDB to get the next 20 posts that are less than the id of the oid I passed it, which I retrieved from looking at the last post after IntersectionObserver was triggered.
So, you will need to find out how to "step through" the posts you are retrieving (e.g. with Laravel APIs), and use some sorting identifier of the last post as a cursor to use API to get the next batch of posts.
When you add this data to a data property, state, or whatever you have Vue watching, your component should be updated automatically. When you scroll down to the new bottom, the IntersectionObserver event should get the last post you have rendering, and then you'll use the API to get your next set of posts that should go after the last one.
@jeremywynn
Thank you, this is super helpful and good to know since it sounds like you've done it before. Alex Lichter on the nuxt channel told me that the feed module could be used for dynamic SSR, but that didn't sound right to me, and no matter what I tried, I couldnt get it to work.
I previously did have the infinite loading working but not in SSR mode (I was not using the IntersectionObserver, so viewing the source of the page showed NOTHING - yes, terrible for SEO).
What you described (IntersectionObserver) is exactly the path I am on right now...it was recommended by a person on Discord....but I have not managed to get it to work and would really appreciate your eyes on this. Mind if I send you a link to a github repo or Code Sandbox?
Sure, but no promises. I remember having to do things differently going from SPA to Universal mode, such as :key not working. But then I switched back to SPA since it was really what I was building.
@jeremywynn
thank you.
To boil it down I am trying to do a page that has infinite scroll / loading, but in SSR mode (possibly with AsyncData). If you see how dev.to/ does it....on the homepage if you scroll down, new content is shown. If you then view source, all the new content shows up in the source. That's exactly what I need to do for SEO and have only got infinite loading working (I trigger the ajax from the store, but then the new content doesnt show up on viewing the source).
I have a codesandbox link here...it's kind of broken though. Been working on this for the past 2 weeks codesandbox.io/s/codesandbox-nuxt-...
(this is my attempt at doing it in SSR mode with Intersection Observor, but it doesnt work. I do have infinite loading working in non-SSR mode, but I need it to work in SSR mode for SEO)
Let me know if you need any updates to the CodeSandBox link above or if anything isn't clear. Thanks for looking at this.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
@jeremywynn I am using Nuxt in Universal / SSR (with Laravel APIs) and have a dynamic feed. The feed needs to be infinitely loaded, like on dev.to's homepage. Is the nuxt feed module going to work in this case? A working example would be helpful
No, the feed module is for generating something like dev.to/feed which is a more computer-readable format that news readers/aggregators digest. You'll need something different for infinitely loading behavior of posts like you see on dev.to/
This will be code that will most likely live inside the page component file you are looking to incorporate this behavior for, like
index.vue.I've done something like this, but in SPA mode. I used
IntersectionObserver(it's a Web API) in an element at the bottom of the page, and then have that trigger an event to load more posts after the last post.However you are sorting your posts when you are displaying the first set on the page, you'll need to use that method to get the next set of posts from your API or whatnot.
In my case, I was using MongoDB which allows sorting based on
id. In essence, theIntersectionObserverlistened to whenever I scrolled to the bottom of my list, retrieved theidof the last post that was rendered on the page, then I queried for the next set of posts to load:Don't worry about the specifics of that code, but it is part of asking MongoDB to get the next 20 posts that are less than the
idof theoidI passed it, which I retrieved from looking at the last post afterIntersectionObserverwas triggered.So, you will need to find out how to "step through" the posts you are retrieving (e.g. with Laravel APIs), and use some sorting identifier of the last post as a
cursorto use API to get the next batch of posts.When you add this data to a data property, state, or whatever you have Vue watching, your component should be updated automatically. When you scroll down to the new bottom, the
IntersectionObserverevent should get the last post you have rendering, and then you'll use the API to get your next set of posts that should go after the last one.Hope that helps.
@jeremywynn Thank you, this is super helpful and good to know since it sounds like you've done it before. Alex Lichter on the nuxt channel told me that the feed module could be used for dynamic SSR, but that didn't sound right to me, and no matter what I tried, I couldnt get it to work.
I previously did have the infinite loading working but not in SSR mode (I was not using the IntersectionObserver, so viewing the source of the page showed NOTHING - yes, terrible for SEO).
What you described (IntersectionObserver) is exactly the path I am on right now...it was recommended by a person on Discord....but I have not managed to get it to work and would really appreciate your eyes on this. Mind if I send you a link to a github repo or Code Sandbox?
Thanks in advance for your input!
Sure, but no promises. I remember having to do things differently going from SPA to Universal mode, such as
:keynot working. But then I switched back to SPA since it was really what I was building.@jeremywynn thank you.
To boil it down I am trying to do a page that has infinite scroll / loading, but in SSR mode (possibly with AsyncData). If you see how dev.to/ does it....on the homepage if you scroll down, new content is shown. If you then view source, all the new content shows up in the source. That's exactly what I need to do for SEO and have only got infinite loading working (I trigger the ajax from the store, but then the new content doesnt show up on viewing the source).
I have a codesandbox link here...it's kind of broken though. Been working on this for the past 2 weeks
codesandbox.io/s/codesandbox-nuxt-...
(this is my attempt at doing it in SSR mode with Intersection Observor, but it doesnt work. I do have infinite loading working in non-SSR mode, but I need it to work in SSR mode for SEO)
Let me know if you need any updates to the CodeSandBox link above or if anything isn't clear. Thanks for looking at this.