I have followed the guide to setup vite-react-ssr in streaming version (https://vitejs.dev/guide/ssr#example-projects). Setup everything as described in the guide and tried to setup the react router in my existing project.

Everything works fine I created routes and provide to client and server. Visiting other routes using the Link (react-router) works good without any error but doesn’t provide any html document.

When I tried to hit the route directly (/about) it returns the html document with just root and the error on the client “Hydration failed because the initial UI does not match what was rendered on the server“. And in the console I got the error no matching routes “about”.

I already read the documentation provided (reactrouter.com/en/v6.3.0/guides/ssr). I read the blog on the medium and dev.to neither was helpful, they are using renderToString method https://github.com/reactwg/react-18/discussions/22 this discussion form was all about renderToPipeableStream which is provided by the vite in the project.

I tried asking this question on react reddit community (https://www.reddit.com/r/reactjs/) haven’t received any answers from the community, I also tried the discord community (https://discord.gg/reactiflux) no one is answering.

I dont know whether my way of asking the question is right or wrong, there are frameworks that provide the SSR/SSG out of the box. But I really want to try it with react and learn the things to serve static and dynamic content alongwith SEO using react on the client.

If you feel like i’m stupid and haven’t followed something that I needed to in that case also provide me the required help. I have already gone through multiple videos and blogs.

Github Repo Link: (https://github.com/mausam-giri/vite-static-ssr-stackoverflow)

Here’s the file structure generated by vite and routes.tsx, About.tsx added by me:

// routes.tsx

const App = React.lazy(() => import("./App"));
const About = React.lazy(() => import("./About"));

export const ROUTES = [
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/about",
    element: (
      <Suspense>
        <About />
      </Suspense>
    ),
  },
  {
    path: "*",
    element: <p>Path not resolved</p>,
  },
];

export default function AppRoutes() {
  return (
    <Routes>
      {ROUTES.map(({ path, element }) => (
        <Route key={path} path={path} element={element} />
      ))}
    </Routes>
  );
}

// entry-client.tsx

import AppRoutes from "./routes";

ReactDOM.hydrateRoot(
  document.getElementById("root") as HTMLElement,
  <BrowserRouter>
    <AppRoutes />
  </BrowserRouter>
);

// entry-server.tsx

import AppRoutes from "./routes";

export function render(_url: string, _ssrManifest?: string,
  options?: RenderToPipeableStreamOptions
) {
  return renderToPipeableStream(
    <StaticRouter location={_url}>
      <AppRoutes />
    </StaticRouter>,
    options
  );
}

Please help me with this, if you can provide my blog and suggest me where to learn which book to read to implement the industry level stuffs using react. I want to level up my self.

Error Screenshot: