reactjs – How to deploy a react router 7 frontend app with node express backend in SSR?

I ran into the same issue when trying to deploy a React Router 7 app with an Express backend. The key is:

Server.js

import express from "express";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";
import fs from "fs";
import App from "./src/App.jsx";

const app = express();
app.use(express.static("build"));

app.get("*", (req, res) => {
  const html = renderToString(
    
  );
  const index = fs.readFileSync("./build/index.html", "utf8");
  res.send(index.replace('', `
${html}
`));
});

app.listen(5000);

index.js

import { hydrateRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

hydrateRoot(document.getElementById("root"),
  
);

run this:
npm run build

 node server.js