Content of statically generated index page shows up on every dynamic routes

[batchor]

Discussed in #12891

^{Originally posted by batchor January 29, 2025}
My situation is a little bit complicated and I will try my best to tell a clear story.

Simple description

The content of the statically generated index page is showing up on every dynamic client-side rendered route.

Please visit https://debug.batchfy.com and https://debug.batchfy.com/a/b to checkout the behaviours.

Detailed story

I have a dynamic route, e.g., '/:user/:project', and all other pages, including the index page, are statically generated during building for SEO purposes.

My react-router.config.ts:

import type { Config } from "@react-router/dev/config";

export default {
    ssr: false,
    async prerender() {
        return ["/", "/about"];
    },
} satisfies Config;

and my app/routes.ts:

import { type RouteConfig, index, route, layout } from "@react-router/dev/routes";

export default [
    index("routes/home.tsx"),
    route("about", "routes/about.tsx"),
    route(":username/:projectname", "routes/project.tsx"),
] satisfies RouteConfig;

In my app/routes/home.tsx, I simply have:

import type { Route } from "./+types/home";
import { Welcome } from "../welcome/welcome";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "ScienHub" },
    { name: "description", content: "LaTeX" },
  ];
}

export default function Home() {
  return <h1>homepage</h1>;
}

And my app/routes/project.tsx displays the route parameters:

import type { Route } from "./+types/project"

export default function Project({
    params,
}: Route.ComponentProps) {
    return <h1 className="text-red">{params.username}/{params.projectname}</h1>
}

The nginx.conf:

server {
    listen 51580;
    server_name example.com;
    root /my-react-router-app/build/client;
    try_files $uri $uri/index.html /index.html;
}

Expected behavior

When I visit example.com, I can see "Homepage" on the screen.
And when I visit example.com/user1/project2, I see "user1/project2".

Actually behavior:

When I visit example.com/user1/project1, the actual result is:
"
Homepage
user1/project1
"

The content of the statically generated index page, "Homepage", shows up on every dynamical route.

Other information

npm run dev works perfectly fine; the issue arises only with the static build when deployed behind Nginx.

Source code

https://github.com/batchor/react-router

[batchor]

Any response? Please help me.

I think this is a bug or something should be documented but actually not.

@esadek @brophdawg11

[brophdawg11]

We just merged some fixes to the interop between ssr:false and prerender in #12948 that should resolve this issue - you can try them out in the 7.2.0-pre.0 prerelease if you'd like. We expect to release 7.2.0 this week.

Specifically, when the app doens't prerender /, then index.htm is a "SPA" file that can hydrate for any path. But in your case when you add / to the prerender config, that index.html file was then only able to load/hydrate for the / route, but not other routes in your app.

We now generate a valid "SPA Fallback" file in __spa-fallback.html that you can use to serve other non-prerendered paths. Here's an updated section in the docs that discusses this detail: https://reactrouter.com/dev/how-to/pre-rendering#pre-rendering-with-a-spa-fallback

You probably want to change your nginx config to something like:

server {
    listen 51580;
    server_name example.com;
    root /my-react-router-app/build/client;
    try_files $uri $uri/index.html /__spa-fallback.html;
}

[batchor]

We just merged some fixes to the interop between ssr:false and prerender in #12948 that should resolve this issue - you can try them out in the 7.2.0-pre.0 prerelease if you'd like. We expect to release 7.2.0 this week.

Specifically, when the app doens't prerender /, then index.htm is a "SPA" file that can hydrate for any path. But in your case when you add / to the prerender config, that index.html file was then only able to load/hydrate for the / route, but not other routes in your app.

We now generate a valid "SPA Fallback" file in __spa-fallback.html that you can use to serve other non-prerendered paths. Here's an updated section in the docs that discusses this detail: https://reactrouter.com/dev/how-to/pre-rendering#pre-rendering-with-a-spa-fallback

You probably want to change your nginx config to something like:

server {
    listen 51580;
    server_name example.com;
    root /my-react-router-app/build/client;
    try_files $uri $uri/index.html /__spa-fallback.html;
}

This resolves my issue perfectly. Big thanks to you!