Add SSR/SSG to existing Vite app

The following shows how to add SSR / pre-rendering (aka SSG) to an existing Vite app:

It showcases how to do so in a step-by-step, progressive, and customizable fashion:

Choose between SSR and pre-rendering (SSG).
With or without vike-react/vike-vue.
With Server Routing or Client Routing.
Progressively migrate towards the stack you (eventually) want.

You can choose whether you want to migrate towards a full-fledged SSR/SSG framework DX (like Next.js and Nuxt by using vike-react/vike-vue/vike-solid), or add a minimal SSR/SSG implementation (applying a minimal amount of changes to your existing code), or something in-between.

This way, you can move quickly while progressively choosing your stack as you go.

On a high-level, this is how you add Vike to your existing Vite app:

Add Vike to your vite.config.js.
- Example: /boilerplates/boilerplate-react/vite.config.js

Use Vike's CLI instead of Vite's CLI.

// package.json
{
  "scripts": {
    "dev": "vite", 
    "dev": "vike dev", 
    "build": "vite build", 
    "build": "vike build", 
    "preview": "vite preview", 
    "preview": "vike preview", 
  }
}

Either:
- Enable pre-rendering, or
  
  See Guides > Pre-rendering (SSG)
- add a Express.js/Hono/Fastify/... server (or add Vike's server middleware if you already have one).
  
  Example: /boilerplates/boilerplate-react/server/index.js
Either:
- Use vike-react/vike-vue/vike-solid, or
- define +onRenderClient.js and +onRenderHtml.js.
  Examples:
Create your first +Page.js file.
Examples:

Add SSR/SSG to existing Vite app

See also