React SSR with Node.js and Vite

Step-by-Step Guide: React SSR with Node.js and Vite

This guide explains how to implement server-side rendering (SSR) for a React application using Node.js and Vite with minimal, modern tooling.

1. Project Structure

The project uses a clean, simple structure:

ssr-react-node-vite/
├── src/            ← React components and hydration files
├── server.js       ← Express server with Vite SSR middleware
├── package.json
└── vite.config.js

2. Clone and Install Prerequisites

Ensure you have Node.js and npm installed, then:

git clone https://github.com/jenylion/ssr-react-node-tutorial.git
cd ssr-react-node-vite

3. Install Dependencies

npm install

This will install React, ReactDOM, Vite, Express, and necessary dev tools.

4. Run the SSR Server

Start the server with:

npm run serve

Then open http://localhost:3000 to view your SSR React app.

5. How It Works

The Express server uses Vite in middleware SSR mode to handle requests and render your React app on the server using ReactDOMServer.renderToString. The client then hydrates the HTML using React, enabling full interactivity without losing the SSR benefits.

6. Example Entry Point (src/entry-server.jsx)

This entry point exports a render function for the server:

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App.jsx';

export function render() {
  return ReactDOMServer.renderToString(<App />);
}

7. Example Server (server.js)

The server loads the render function dynamically using Vite’s ssrLoadModule:

const { render } = await vite.ssrLoadModule('/src/entry-server.jsx');
const appHtml = render();

Summary

This setup enables React components to be server-side rendered with Node.js and Vite, improving SEO, performance, and initial load time while maintaining a smooth developer experience with Vite’s fast refresh and JSX support.

  View on GitHub

Download the Example Project

Clone, install, and experiment with the project locally to understand SSR with React and Node.js practically.