Vite SSR for React in NX workspace

By Errong Leng – 08 Feb 2023 – View online →

Why not use @nrwl/react:setup-ssr

Yea, NX has a react plugin can set up SSR for your react application. It does works well. But the dev server is not smart though. It use the @nrwl/webpack:ssr-dev-server executor, it support browser build target and server build target and wait until both build target completed and then run the server main.js via node. It does watch the files but it always restart the server even if you just edit frontend part. It does not support Hot Module Replacement (HMR).

But you can still use this plugin to set up React SSR skeleton for your app.

Why Vite? Lightning Fast HMR

Vite serves source code over native ESM. This is essentially letting the browser take over part of the job of a bundler: Vite only needs to transform and serve source code on demand, as the browser requests it. Code behind conditional dynamic imports is only processed if actually used on the current screen.

Vite provides built-in support for server-side rendering (SSR). Though The Vite playground contains example SSR setups for React. The example works well but requires a few migration if you want adding it into a NX workspace. In this post, I will tell how I accomplished to make Vite SSR for React work in NX.

Vite SSR with build via webpack

Vite Dev Server serves a static web app very well. But it does not work out for SSR. In order to server a SSR app, you need to run your app via node. NX has a "@nrwl/js:node" executor. I was thinking to run a dev server using @nrwl/js:node but point to @nrwl/vite:build as the buildTarget. It fail due to schema not match, I raised a issue and hope it can be addressed by Vite NX plugin soon.

webpack build target for React SSR.

I intented set "watch" option to false, Since Vite Dev Server support HMR for frontend. In case you change any server side code, you have to restart the "ssr-serve" target.

index.html changes to use Vite Dev Server

all external css files please @import in src/styles.css and it needs to be linked in index.html.

The main render function for frontend needs to be loaded as a Javascript module. These are for Vite Dev Server, if you use webpack for production build, then you don't need link styles.css and main.tsx in the index.html, since webpack will inject them for you automatically.

 is the placeholder for SSR rendered string.