Vite SSG
Server-side generation for Vue 3 on Vite.
ℹ️ Vite 2 is supported from
v0.2.x
, Vite 1's support is discontinued.
Install
This library requires Node.js version >= 14
npm i -D vite-ssg @vue/server-renderer @vue/compiler-sfc vue-router@next @vueuse/head
Single Page SSG
To have SSG for the index page only (without vue-router
), import from vite-ssg/single-page
instead.
<ClientOnly/>
Component ClientOnly
is registered globally along with the app creation.
Document head
From v0.4.0
, we ship @vueuse/head
to manage the document head out-of-box. You can directly use it in your pages/components, for example:
That's all, no configuration is needed. Vite SSG will handle the server-side rendering and merging automatically.
Refer to @vueuse/head
's docs for more usage about useHead
.
Critical CSS
Vite SSG has built-in support for generating Critical CSS inlined in the HTML via the critters
package. Install it via:
Critical CSS generation will be enabled automatically for you.
Initial State
The initial state comprises data that is serialized to your server-side generated HTML that is hydrated in
the browser when accessed. This data can be data fetched from a CDN, an API, etc, and is typically needed
as soon as the application starts or is accessed for the first time.
The main advantage of setting the application's initial state is that the statically generated pages do not
need to fetch the data again as the data is fetched during build time and serialized into the page's HTML.
The initial state is a plain JavaScript object that can be set during SSR, i.e., when statically generating
the pages, like this:
Typically, you will use this with an application store, such as
Vuex or Pinia.
For examples, see below:
When using Pinia
Following [Pinia's guide](https://pinia.esm.dev/ssr), you will to adapt your `main.{ts,js}` file to look like this:
When using Vuex
For the example of how to use a store with an initial state in a single page app,
see the single page example.
State Serialization
Per default, the state is deserialized and serialized by using JSON.stringify
and JSON.parse
.
If this approach works for you, you should definitely stick to it as it yields far better
performance.
You may use the option transformState
in the ViteSSGClientOptions
as displayed below.
A valid approach besides JSON.stringify
and JSON.parse
is
@nuxt/devalue
(which is used by Nuxt.js):
A minor remark when using @nuxt/devalue
: In case, you are getting an error because of a require
within the package @nuxt/devalue
, you have to add the following piece of config to your Vite config:
Configuration
You can pass options to Vite SSG in the ssgOptions
field of your vite.config.js
See src/types.ts. for more options available.
Custom Routes to Render
You can use the includedRoutes
hook to exclude/include route paths to render, or even provide some complete custom ones.
Comparsion
Use Vitepress when you want:
- Zero config, out-of-box
- Single-purpose documentation site
- Lightweight (No double payload)
Use Vite SSG when you want
- More controls on the build process and tooling
- The flexible plugin systems
- Multi-purpose application with some SSG to improve SEO and loading speed
Cons:
- Double payload
Example
See Vitesse