Question - Will this work with Async Fetch on Nuxt?

[rajesh-h]

Hi,

Thank you for this package.

Could you please confirm will this work on async fetch on nuxt components(not page)? As I do not want to query firestore after generating the pages.

I have my async fetch call in one of the component like this.

  async fetch() {
    const response = this.$fireStore.collection('recipes').limit(10)
    try {
      await response.get().then((querySnapshot) => {
               querySnapshot.forEach((doc) => { this.articles.push({  ...doc.data()       })
        })      })    } catch (e) {
      console.log('There is some error: ' + e)
    }  }

my Nuxt generate dynamic route as below.

 generate: {
    minify: false,
    async routes() {
      const { StoreDB } = require('./services/fireinit')
      const qs = await StoreDB.collection('recipes')
        .where('publish', '==', true)
        .orderBy('updated', 'desc')
        .limit(10)
        .get()
      return qs.docs.map((x) => `/${x.data().slug}`)
    }
  }

Your help is much appreciated.

[DreaMinder]

@rajesh-h Hey. I can confirm that it won't work with Fetch hook. But you can use nuxt-edge instead of this package, it has native implementation of payload-extraction: https://github.com/nuxt/nuxt.js/pull/6159

[rajesh-h]

Thank you @DreaMinder . So nuxt-edge is new version? my existing packages will work as is? for eg: nuxt-firebase

[DreaMinder]

It is beta version of nuxt. No guarantees, but it's your only option.

[rajesh-h]

I think I will go ahead with that. If I face problem, Then I will have to go for different approach of creating a json file with my posts and reading it from it using filereader. Just a thought not concrete yet.

Let me try edge first.

[rajesh-h]

@DreaMinder I installed nuxt-edge. would you mind letting me know what changes I have to do to make my site completely static with no calls to api?

I have kept my code as is like shown in the first post in this thread.

your help will be much appreciated.

[DreaMinder]

1. replace in package.json "generate": "nuxt generate", with "generate": "nuxt build && nuxt export",
2. add to nuxt.config:

   target: 'static',
   ssr: true,

[rajesh-h]

Thank you very much @DreaMinder , Definitley I wouldn't have figured it out on my own.

[DreaMinder]

No problem 👍

Closing since it seems to be resolved.

[rajesh-h]

@DreaMinder I finally have my static site. but I am faced with another challenge.

Now my home page has 200+ posts which makes it slow loading. in SSR I used to get only 10 pages on call, so had implemented kind of infinite scroll structure but in offline mode is it something possible?

https://cscom-2019.web.app/

Or do you have some other way to handle it?

Thank you very much for your feedback.

[DreaMinder]

so had implemented kind of infinite scroll structure but in offline mode is it something possible?

I'm not following, you already implemented it but it doesn't work? Or you need offline mode which isn't compatible with lazy client-side requests? Either way, you'll have to limit number of server-rendered posts and render others client-side. I don't have experience with offline-mode projects, so you'll have to solve it on your own...

[rajesh-h]

When I said had implemented, it was SSR not static.

Now currently static I implemented it using the latest nuxt-edge. It's working fine as of now as expected.

If you see my homepage it brings all posts at once as it is pre-rendered. Now since I have more posts it takes lot of time to load my home page as it will try to download all images and oher necessary files.

I was looking for an option like, My site is pre-rendered but home page should work like it should show only 10 posts initially, then when scrolling down bring further more posts from the already pre-rendered pages.

Sorry if I am not able to put this properly.

When you say client side - it means it has to call server api right to bring more posts?

[DreaMinder]

When you say client side - it means it has to call server api right to bring more posts?

yes. Here is pseudo-code

async asyncData(){
return {
posts: await db.getPosts({from: 0, to: 10})
}
},
methods: {
async onScrollBelowTheFold() {
this.posts = [
...this.posts,
await db.getPosts({from: 11, to: 10000})
]
}
}

[rajesh-h]

Thank you very much for all the assistance. This will make calls to my api which I do not want in this case. Anyway no issues, I will see what can be done. I see some new module nuxt/content. I will try with that.

You have been very helpful