Comments (6)
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
from vite-ssg.
For the composition API version, please keep track on vuejs/core#3070.
from vite-ssg.
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
from vite-ssg.
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.
from vite-ssg.
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.
from vite-ssg.
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.
from vite-ssg.
Related Issues (20)
- Inferred type of createApp HOT 2
- let headers = new Headers() returning undefined in @servicestack node modules
- Cannot import CommonJS module
- Implement optional route parameters
- issue with build
- Cannot access the right router HOT 1
- Can'not build with vue-select HOT 1
- SSG for just home page? HOT 1
- build exception when add jsx support and change all vue to jsx.
- re-rendering issues
- fetch gives 'ERR_INVALID_URL' HOT 1
- using build.rollupOptions.output.manualChunks
- Adding ClientOnly to any part of the App.Vue gives an empty error HOT 1
- html-minifier high security vulnerability HOT 5
- SyntaxError: Cannot use import statement outside a module HOT 3
- How to remove crossorigin from html tags? HOT 1
- Vite-ssg build error in SSR step HOT 3
- vue 3.4 Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined HOT 1
- document.documentElement.setAttribute is not a function
- vite-plugin-pages
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-ssg.