Fetching data about vite-ssg

[nickgraffis]

If someone is looking for a way to do this with the composition API:

import axios from 'axios'
const { get } = axios

// The data we will show
const repo = ref<RepoData | null>(null)

// A function to get the data
const fetch = async() => {
  const data = await get(`https://api.github.com/repos/nickgraffis/petite-vin`)
  repo.value = data.data
}

// Only run this function client side if we don't have a value assigned to repo yet
// if repo already has a value, it was fetched during build
if (!repo.value) fetch()

// During the build, fetch the data before building the component
onServerPrefetch(async() => {
  await fetch()
})

This will refetch the data client side while in dev mode, but after building we no longer fetch the data

[antfu]

For the composition API version, please keep track on vuejs/core#3070.

[hannoeru]

In vite-ssg you can use serverPrefetch () to prefetch data in server side.
example: https://github.com/antfu/vite-ssg/blob/main/example/src/pages/b.vue

[antfu]

Hi @rdunk, can you share with me some examples of how would you use this feature? I personally only use this lib to build some blog-like sites, haven't got a chance to have that need yet. Thanks.

[rdunk]

I found this library whilst looking for an alternative to Nuxt's generate command for SSG, but compatible with Vue 3. I wanted something more lightweight than Nuxt that I could drop into a normal Vue/Vite project, so thanks for building it.

It works great for generating static builds where page content exists within the repository. However I'm authoring content using a headless CMS, i.e. outside of the repository. Ideally I would be able to fetch this data at build time via some async hook. In a normal SPA I would show a loading indicator, fetch the data and update state. With SSG obviously things differ, as we need to wait for (often specific) async functions to execute before attempting to render the page. Nuxt's fetch hook was the most similar example I could find to separating out the logic for performing those functions.

A simple example would be creating an "About" page. Content is authored using a CMS which exposes JSON via some API endpoint. The generator would execute a request and pass the returned data to the component somehow, prior to rendering the page.

I just wanted to check if you had any existing plans for implementing something like this really. I understand this kind of feature is non-trivial, so I'm going to spend a few hours seeing what I can come up with.

My other thoughts were around SSG for routes with dynamic paths, with something akin to Next.js's getStaticPaths. I know this library filters out dynamic routes currently, so I'm sure you have given this some thought already—and I guess decided against that for now—as it definitely increases the scope of the library considerably. Again perhaps this is veering too much towards Nuxt territory, but I'll see if I can hack something together anyway.

[antfu]

Reminds me of https://twitter.com/_egoistlily/status/1353370388386865153?s=20, maybe you can give it a try as well. I'd love to have that, but I would need to take some time thinking if I could come up with a better API :)

Thanks for the detailed explanation.