Add SSR/SSG to Vite

Example of adding SSR/SSG to an existing Vite + React app, using Vike.

See vue branch for the same but with Vite + Vue.

The migration is progressive: each of the following steps results in a working app.

Note

This enables you to get started quickly while, over time and at your own pace, progressively migrating to the full Vike experience.

Alternatively, instead of migrating in a progressive fashion, you can skip Step 3+4 and directly migrate to vike-react.

Migration Steps

Step 1

Migrate to Vike

Note

If you have multiple pages, consider temporarily using a catch-all route and creating proper pages later.

Step 2

Either:

• Add pre-rendering, or
• Add Express.js server.

Note

• Vike Docs > Pre-rendering
• Vike Docs > Pre-rendering > Should I pre-render?

Step 3

Add SSR

Step 4 (Optional)

Add Client Routing

Step 5 (Optional)

Use vike-react

Note

Instead of using vike-react, you can piggyback the features of the following:

• /boilerplates/boilerplate-react-ts
• /examples/react-full
• vike-react > Under the hood

See also

• Vike > Add SSR/SSG to existing Vite app