Using defineBasicLoader only for build time with Nuxt + Static generation

[onmax]

Hello,

I am making a website with Nuxt. The website is static. All the data I need can be fetch at build time, not runtime fetching.

I was reading the Data Loaders and see if this library solve my issues.

I think I can use a defineBasicLoader with the following options:

const basicLoaderOptions: DefineDataLoaderOptions_DefinedData = {
    // We do want to run it on the server (e.g. at build time for static site)
    server: true,

    // Make the loader "lazy" on the client so it DOES NOT re-fetch
    // after hydration:
    lazy: () => !import.meta.env.SSR
}

Is this the right approach?

More concrete example:

export const useApps = defineBasicLoader(async () => {
  const { client } = usePrismic()
  const apps = await client.getByType<AppDocument>('app')

  if (!apps.results.length)
    throw new Error('No apps data from Prismic!')

  return apps
}, {
  server: true,
  lazy: () => !import.meta.env.SSR,
})

Typescript issue

with the current object basicLoaderOptions I have added before in this discussion, Typescript will complaint since the type DefineDataLoaderOptionsBase_DefinedData.lazy? only accepts false | undefined, but not true.

The documentation states that this option can also be true.

Thanks for this amazing library and all the work with Pinia & Pinia Colada. I am very excited to start using these new versions. Amazing job!

[onmax]

After reading all the documentation: Data loaders, Pinia Colada and Nuxt composables here is my conclusion:

• Static (build-time, once) data:

  • defineBasicLoader (no hydration refetch)
  • Used from data from CMS

• Shared, dynamic, cached across components, re-fetch on navigation:

  • defineColadaLoader (Pinia Colada)
  • API calls
  • Only for static or deterministic query keys known in advance

• Static/SSR/hydration-aware, easy Nuxt defaults (but rehydration by default):

  • Nuxt’s useAsyncData
  • Not used at all.

I would appreciate if you share you thoughts about this.

PS: Maybe this can be a page in a documentation somewhere, when to use what. With the amount of options available, it is a bit hard for beginners to identify each use case :)

[posva]

I could be wrong but in the static version, you should be fine with Nuxt basics. I'm curious if defineBasicLoader() worked better

For Static/SSR/hydration-aware, if it's static and regenerated, it seems like useAsyncdata() is enough (similar to my thoughts with just static)

In general, the point of an advanced loader like pinia colada, is, like you noted, to have cache across components data.

[onmax]

I really appreciate your insight. I feel like I might be using something wrong because it looks like useAsyncData is still running on the client even when I use nuxt generate. This is my main problem, nonetheless it seems that defineBasicLoader solves this problem much better 🥳.

Being new to this, I may have missed some details but I would like to share some thoughts:

• I also find it a bit strange that defineBasicLoader is part of vue-router, as I do not use vue-router at all: I am just using a fetch request with no router dependencies.
• Recently, I have also tried the Data Loader from vitepress¹, which works in a very similar way, but is built for vitepress.

So now I wonder if it would make sense to combine defineBasicLoader (without the vue-router parts) and the vitepress data loader into one static data loader for Vite in general.

Maybe this solution already exists, but if so, I would like to understand why unplugin-vue-router nor vitepress leverage this plugin.

I really appreciate the clear standard that Vue is known for, meaning that we don't have multiple solution for the same problem.

Any further advice on this would be very helpful!

Footnotes

1. GitHub source code ↩

[posva]

Hello! Thanks for the feedback, it's really useful.

The type you are using is specifically for when the data property cannot be undefined so it's not possible to pass true. The actual type of options is a union of the different possibilities (DefineDataLoaderOptions_LaxData | DefineDataLoaderOptions_DefinedData currently)