Home

Awesome

<p align="center"> <img width="180" src="./logo.svg" alt="Vite SSR logo"> </p>

Vite SSR

Simple yet powerful Server Side Rendering for Vite 2 in Node.js (Vue & React).

Vite SSR can be deployed to any Node.js or browser-like environment, including serverless platforms like Vercel, Netlify, or even Cloudflare Workers. It can also run with more traditional servers like Express.js or Fastify.

Vite SSR is unopinionated about your API logic so you must bring your own. If you want a more opiniated and fullstack setup with filesystem-based API endpoints and auto-managed edge cache, have a look at Vitedge. It wraps Vite SSR and can be deployed to Cloudflare Workers or any Node.js environment.

Start a new SSR project right away with filesystem routes, i18n, icons, markdown and more with Vitesse (Vue) or Reactesse (React). See live demo.

Installation

Create a normal Vite project for Vue or React.

yarn create vite --template [vue|vue-ts|react|react-ts]

Then, add vite-ssr with your package manager (direct dependency) and your framework router.

# For Vue
yarn add vite-ssr vue@3 vue-router@4 @vueuse/head@^0.9.0

# For React
yarn add vite-ssr react@16 react-router-dom@5

Make sure that index.html contains a root element with id app: <div id="app"></div> (or change the default container id in plugin options: options.containerId).

Usage

Add Vite SSR plugin to your Vite config file (see vite.config.js for a full example).

// vite.config.js
import vue from '@vitejs/plugin-vue'
import viteSSR from 'vite-ssr/plugin.js'
// import react from '@vitejs/plugin-react'

export default {
  plugins: [
    viteSSR(),
    vue(), // react()
  ],
}

Then, simply import the main Vite SSR handler in your main entry file as follows. See full examples for Vue and React.

import App from './App' // Vue or React main app
import routes from './routes'
import viteSSR from 'vite-ssr'
// or from 'vite-ssr/vue' or 'vite-ssr/react', which slightly improves typings

export default viteSSR(App, { routes }, (context) => {
  /* Vite SSR main hook for custom logic */
  /* const { app, router, initialState, ... } = context */
})

That's right, in Vite SSR there's only 1 single entry file by default 🎉. It will take care of providing your code with the right environment.

If you need conditional logic that should only run in either client or server, use Vite's import.meta.env.SSR boolean variable and the tree-shaking will do the rest.

The third argument is Vite SSR's main hook, which runs only once at the start. It receives the SSR context and can be used to initialize the app or setup anything like state management or other plugins. See an example of Vue + Pinia here. In React, the same SSR Context is passed to the main App function/component as props.

<details><summary>Available options</summary> <p>

The previous handler accepts the following options as its second argument:

</p> </details> <details><summary>SSR Context</summary> <p>

The context passed to the main hook (and to React's root component) contains:

This context can also be accesed from any component by using useContext hook:

import { useContext } from 'vite-ssr'

//...
function() {
  // In a component
  const { initialState, redirect } = useContext()
  // ...
}
</p> </details> <details><summary>Using separate entry files</summary> <p>

Even though Vite SSR uses 1 single entry file by default, thus abstracting complexity from your app, you can still have separate entry files for client and server if you need more flexibility. This can happen when building a library on top of Vite SSR, for example.

Simply provide the entry file for the client in index.html (as you would normally do in an SPA) and pass the entry file for the server as a CLI flag: vite-ssr [dev|build] --ssr <path/to/entry-server>.

Then, import the main SSR handlers for the entry files from vite-ssr/vue/entry-client and vite-ssr/vue/entry-server instead. Use vite-ssr/react/* for React.

</p> </details>

SSR initial state and data fetching

The SSR initial state is the application data that is serialized as part of the server-rendered HTML for later hydration in the browser. This data is normally gathered using fetch or DB requests from your API code.

Vite SSR initial state consists of a plain JS object that is passed to your application and can be modified at will during SSR. This object will be serialized and later hydrated automatically in the browser, and passed to your app again so you can use it as a data source.

export default viteSSR(App, { routes }, ({ initialState }) => {
  if (import.meta.env.SSR) {
    // Write in server
    initialState.myData = 'DB/API data'
  } else {
    // Read in browser
    console.log(initialState.myData) // => 'DB/API data'
  }

  // Provide the initial state to your stores, components, etc. as you prefer.
})

If you prefer having a solution for data fetching out of the box, have a look at Vitedge. Otherwise, you can implement it as follows:

<details><summary>Initial state in Vue</summary> <p>

Vue has multiple ways to provide the initial state to Vite SSR:

export default viteSSR(App, { routes }, async ({ app }) => {
  router.beforEach(async (to, from) => {
    if (to.meta.state) {
      return // Already has state
    }

    const response = await fetch('my/api/data/' + to.name)

    // This will modify initialState
    to.meta.state = await response.json()
  })
})

import { useContext } from 'vite-ssr'
import { useRoute } from 'vue-router'
import { inject, ref } from 'vue'

// This is a custom hook to fetch data in components
export async function useFetchData(endpoint) {
  const { initialState } = useContext()
  const { name } = useRoute() // this is just a unique key
  const state = ref(initialState[name] || null)

  if (!state.value) {
    state.value = await (await fetch(endpoint)).json()

    if (import.meta.env.SSR) {
      initialState[name] = state.value
    }
  }

  return state
}

// Page Component with Async Setup
export default {
  async setup() {
    const state = await useFetchData('my-api-endpoint')
    return { data }
  },
}

// Use Suspense in your app root
<template>
  <RouterView v-slot="{ Component }">
    <Suspense>
      <component :is="Component" />
    </Suspense>
  </RouterView>
</template>

// Main
export default viteSSR(App, { routes }, ({ app, initialState }) => {
  // You can pass it to your state management
  // or use `useContext()` like in the Suspense example
  const pinia = createPinia()

  // Sync initialState with the store:
  if (import.meta.env.SSR) {
    initialState.pinia = pinia.state.value
  } else {
    pinia.state.value = initialState.pinia
  }

  app.use(pinia)
})

// Page Component with Server Prefetch
export default {
  beforeMount() {
    // In browser
    this.fetchMyData()
  },
  async serverPrefetch() {
    // During SSR
    await this.fetchMyData()
  },
  methods: {
    fetchMyData() {
      const store = useStore()
      if (!store.myData) {
        return fetch('my/api/data').then(res => res.json()).then((myData) => {
          store.myData = myData
        })
      }
    },
  },
}
</p> </details> <details><summary>Initial state in React</summary> <p>

There are a few ways to provide initial state in React:

function App({ initialState }) {
  if (!initialState.ready) {
    const promise = getPageProps(route).then((state) => {
      Object.assign(initialState, state)
      initialState.ready = true
    })

    // Throw the promise so Suspense can await it
    throw promise
  }

  return <div>{initialState}</div>
}

function App({ router }) {
  // This router is provided by Vite SSR.
  // Use it to render routes and save initial state.

  return (
    <Routes>
      {router.routes.map((route) => {
        if (!route.meta.state) {
          // Call custom API and return a promise
          const promise = getPageProps(route).then((state) => {
            // This is similar to modifying initialState in the previous example
            route.meta.state = state
          })

          // Throw the promise so Suspense can await it
          throw promise
        }

        return (
          <Route key={route.path} path={route.path} element={
            <route.component props={...route.meta.state} />
          } />
        )
      })}
    </Routes>
  )
}
</p> </details>

State serialization

Vite SSR simply uses JSON.stringify to serialize the state, escapes certain characters to prevent XSS and saves it in the DOM. This behavior can be overriden by using the transformState hook in case you need to support dates, regexp or function serialization:

import viteSSR from 'vite-ssr'
import App from './app'
import routes from './routes'

export default viteSSR(App, {
  routes,
  transformState(state, defaultTransformer) {
    if (import.meta.env.SSR) {
      // Serialize during SSR by using,
      // for example, using @nuxt/devalue
      return customSerialize(state)

      // -- Or use the defaultTransformer after modifying the state:
      // state.apolloCache = state.apolloCache.extract()
      // return defaultTransformer(state)
    } else {
      // Deserialize in browser
      return customDeserialize(state)
    }
  },
})

Accessing response and request objects

In development, both response and request objects are passed to the main hook during SSR:

export default viteSSR(
  App,
  { routes },
  ({ initialState, request, response }) => {
    // Access request cookies, etc.
  }
)

In production, you control the server so you must pass these objects to the rendering function in order to have them available in the main hook:

import render from './dist/server'

//...

const { html } = await render(url, {
  manifest,
  preload: true,
  request,
  response,
  // Anything here will be available in the main hook.
  initialState: { hello: 'world' }, // Optional prefilled state
})

Beware that, in development, Vite uses plain Node.js + Connect for middleware. Therefore, the request and response objects might differ from your production environment if you use any server framework such as Fastify, Express.js or Polka. If you want to use your own server during development, check Middleware Mode.

Editing Response and redirects

It's possible to set status and headers to the response with writeResponse utility. For redirects, the redirect utility works both in SSR (server redirect) and browser (history push):

import { useContext } from 'vite-ssr'

// In a component
function () {
  const { redirect, writeResponse } = useContext()

  if (/* ... */) {
    redirect('/another-page', 302)
  }

  if (import.meta.env.SSR && /* ... */) {
    writeResponse({
      status: 404,
      headers: {}
    })
  }

  // ...
}

In the browser, this will just behave as a normal Router push.

Head tags and global attributes

Use your framework's utilities to handle head tags and attributes for html and body elements.

<details><summary>Vue Head</summary> <p>

Install @vueuse/head as follows:

import { createHead } from '@vueuse/head'

export default viteSSR(App, { routes }, ({ app }) => {
  const head = createHead()
  app.use(head)

  return { head }
})

// In your components:
// import { useHead } from '@vueuse/head'
// ... useHead({ ... })
</p> </details> <details><summary>React Helmet</summary> <p>

Use react-helmet-async from your components (similar usage to react-helmet). The provider is already added by Vite SSR.

import { Helmet } from 'react-helmet-async'

// ...
;<>
  <Helmet>
    <html lang="en" />
    <meta charSet="utf-8" />
    <title>Home</title>
    <link rel="canonical" href="http://mysite.com/example" />
  </Helmet>
</>
</p> </details>

Rendering only in client/browser

Vite SSR exports ClientOnly component that renders its children only in the browser:

import { ClientOnly } from 'vite-ssr'

//...
;<div>
  <ClientOnly>
    <div>...</div>
  </ClientOnly>
</div>

Development

There are two ways to run the app locally for development:

SPA mode will be slightly faster but the SSR one will have closer behavior to a production environment.

Middleware Mode

If you want to run your own dev server (e.g. Express.js) instead of Vite's default Node + Connect, you can use Vite SSR in middleware mode:

const express = require('express')
const { createSsrServer } = require('vite-ssr/dev')

async function createServer() {
  const app = express()

  // Create vite-ssr server in middleware mode.
  const viteServer = await createSsrServer({
    server: { middlewareMode: 'ssr' },
  })

  // Use vite's connect instance as middleware
  app.use(viteServer.middlewares)

  app.listen(3000)
}

createServer()

Production

Run vite-ssr build for buildling your app. This will create 2 builds (client and server) that you can import and use from your Node backend. See an Express.js example server here, or a serverless function deployed to Vercel here.

<details><summary>Keeping index.html in the client build</summary> <p>

In an SSR app, index.html is already embedded in the server build, and is thus removed from the client build in order to prevent serving it by mistake. However, if you would like to keep index.html in the client build (e.g. when using server side routing to selectively use SSR for a subset of routes), you can set build.keepIndexHtml to true in the plugin options:

// vite.config.js

export default {
  plugins: [
    viteSSR({
      build: {
        keepIndexHtml: true,
      },
    }),
    [...]
  ],
}
</p> </details>

Integrations

Common integrations will be added here:

React CSS in JS

Use the styleCollector option to specify an SSR style collector. vite-ssr exports 3 common CSS-in-JS integrations: styled-components, material-ui-core-v4 and emotion:

import viteSSR from 'vite-ssr/react'
import styleCollector from 'vite-ssr/react/style-collectors/emotion'

export default viteSSR(App, { routes, styleCollector })

You can provide your own by looking at the implementation of any of the existing collectors.

Note that you still need to install all the required dependencies from these packages (e.g. @emotion/server, @emotion/react and @emotion/cache when using Emotion).

Custom Typings

You can define your own typings with vite-ssr. To declare custom types, the file mostly needs to import or export something not to break other types. Example transforming request and response to types of express:

import { Request, Response } from 'express'

declare module 'vite-ssr/vue' {
  export interface Context {
    request: Request
    response: Response
  }
}

Community contributions

Feel free to submit your projects:

Templates

Addons

Examples

References

The following projects served as learning material to develop this tool:

Todos