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:

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:

  1. Add Vike to your vite.config.js.

  2. Either:

  3. Either:

  4. Create your first +Page.js file.

    Examples:

See also