Layout routes always revalidates with SSR disabled

[mrtinsvitor]

Hi, I'm setting up a new project using the new React Router 7 but without SSR for now. I noticed that my root route and any other layout route with nested routes always revalidates and re-renders the app.

So for instance, if I have a layout route with some nested routes, and I need a clientLoader on the layout route, that loader will run anytime I navigate between the layout's nested routes. This wouldn't be ideal for my app, as I may want to fetch some data on my layout route which will feed into my nested routes, and I don't want to refetch it every time I navigate back and forth between the routes.

I tried using shouldRevalidate function and returning false, as mentioned on the docs, but that doesn't seem to make much difference. I was doing pretty much the same with React Router 6 and wasn't facing this issue. I wonder if I'm missing something?

To reproduce this you can just create a fresh project running npx create-react-router@latest, set the ssr flag to false, create a layout route with two routes. This is my routes.ts:

export default [
  index("routes/home.tsx"),
  layout("routes/layout.tsx", [
    route("login", "routes/login.tsx"),
    route("forgot-password", "routes/forgot-password.tsx"),
  ]),
] satisfies RouteConfig;

On my login route I have a Link to forgot password route, when I click it, my layout clientLoader re-runs.

I'm using:
react-router 7.0.1
react 18.3.1
vite 5.4.11

[iloveitaly]

@mrtinsvitor curious if you figured this out...

[mrtinsvitor]

No, I couldn't 😔. We ended up continuing with React Router's 6 for now, until we can get to v7 using SSR.