What is StaticRouter in React?

This article provides an overview of StaticRouter in React Router, explaining its purpose, how it works, and why it is crucial for Server-Side Rendering (SSR). You will also learn how to implement it and how it differs from standard client-side routers like BrowserRouter.

Understanding StaticRouter

StaticRouter is a router component provided by React Router specifically designed for server-side rendering (SSR) environments. Unlike client-side routers that interact with the browser’s address bar and history API, StaticRouter is completely stateless.

Because a Node.js server does not have access to a browser’s window or document object, standard routers like BrowserRouter will fail on the server. StaticRouter solves this by taking a fixed location (a URL) as a prop and rendering the application based solely on that provided path.

Why Use StaticRouter?

When a user requests a page from a React application utilizing SSR, the server must pre-render the React component tree into a static HTML string before sending it to the client.

To determine which components to render for a specific URL, the server uses StaticRouter. It reads the requested URL from the incoming HTTP request, matches the route, and generates the corresponding HTML. Once the browser receives this HTML, React “hydrates” the application on the client side, where a dynamic router like BrowserRouter takes over.

How to Implement StaticRouter

In React Router v6, StaticRouter is imported from react-router-dom/server. Below is a basic implementation of how to use StaticRouter on an Express.js server.

Server-Side Code (Node.js/Express)

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './src/App';

const app = express();

app.get('*', (req, res) => {
  // Pass the requested URL to the StaticRouter via the 'location' prop
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000);

In this setup, req.url provides the current path requested by the user. StaticRouter uses this path to determine which route components inside <App /> should be converted into HTML.

Key Differences: StaticRouter vs. BrowserRouter

Feature	StaticRouter	BrowserRouter
Environment	Server-side (Node.js)	Client-side (Web Browser)
Location Source	Passed explicitly via the `location` prop	Automatically read from `window.location`
History Navigation	No history; navigation actions (back/forward) are ignored	Interactive; manages session history via HTML5 History API
Primary Goal	Pre-rendering initial HTML for SEO and faster loads	Managing dynamic route transitions without page reloads

By utilizing StaticRouter on the server and transitioning to BrowserRouter on the client, developers can achieve fast initial load times and robust search engine optimization (SEO) without losing the benefits of a Single Page Application (SPA).