fastify-easy-react-ssr
This plugin makes it easy to create a performant fullstack application with server side rendering and frontend hydration.
Context
It's still not easy enough to achieve SSR without committing to a full framework like Next or Remix.
This plugin makes it easier by implementing the SSR guide defined on Vite's documentation and enforcing convention over configuration as much as possible.
Quickstart
Take a look at the basic example for a minimal example.
Step 1 - Install and register the plugin
npm i fastify-easy-react-ssr
import fastifyEasyReactSSR from 'fastify-easy-react-ssr'
// Register this plugin after your API routes
// If no matches is found in page routes definition it'll redirect
// to /not-found page using a "catch all" route
await fastify.register(fastifyEasyReactSSR)
Step 2 - Install required dependencies
Make sure that you have the required peer dependencies installed:
"dependencies": {
"fastify": "^4.9.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3"
},
"devDependencies": {
"@vitejs/plugin-react": "^2.2.0",
"vite": "^3.2.3"
}
Step 3 - Configuration (Vite)
Checkout:
These files need to be present in your project too.
This is Vite's configuration required for building our React application for both development
and production
.
Step 4 - Conventions
You need to have to files called:
Look in the sample application how both these files use React Router to render all the pages for client and server.
This plugin expects to find these 2 files in /
, /src
or /lib
.
These files are very likely similar in a lot of projects... I wish we could find a way to abstract them.
Step 5 - Build for production
I wish this was simpler...
When in "development"
npm run dev
will start your server with Vite running as a Fastify middleware.
When in "production"
npm run build
needs to be executed before NODE_ENV=production npm start
:
// package.json
{
// all the needed commands
"build": "npm run build:client && npm run build:server",
"build:client": "vite build --outDir dist/client",
"build:server": "vite build --ssr src/entry-server.jsx --outDir dist/server",
// or experimemtal
"build": "build-vite" // which is the same as above
}
While this added step is a bit annoying, it ensures that you are not shipping and running Vite in Production.
Routing
This plugin focuses on only React SSR and unlike Next it doesn't apply filesystem routing.
While this could be something worth discussing in the future, I am personally a fan of filenames that are informative about what they contain and I get confused easily when for example in PR I see a lot of changes to files called with the same name (for example [id].jsx
).
Hence react-router is used, check the example.