Middleware for SPAs: How React Router v7 Solves It? #13002

v-hung · 2025-02-11T16:53:03Z

v-hung
Feb 11, 2025

🚀 Issue: React Router v7 - `clientLoader()` Runs Before `loadUser()`

❓ Problem

I recently migrated my project to React Router v7 following the official upgrade guide:
🔗 React Router v7 Upgrade Guide.

Here are my main components:

`root.tsx`

import { Links, Meta, Scripts, ScrollRestoration } from "react-router";
import App from "./App";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" type="image/x-icon" href="logo.svg"></link>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function Root() {
  return <App />;
}

`app.tsx`

const postResource = createSuspender<void>(loadUser());

const AppProvider = () => {
  postResource.read();
  return <Outlet />;
};

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AppProvider />
    </Suspense>
  );
};

export default App;

`home.tsx`

export async function clientLoader() {
  requiredPermission();
  return {
    title: "Home page",
  };
}

export default function Component({ loaderData }: Route.ComponentProps) {
  return <div>{loaderData.title}</div>;
}

🔍 Expected Behavior

loadUser() should run first via Suspense in App.tsx.
clientLoader() in home.tsx should wait for loadUser() to complete before checking permissions.

🛑 Actual Behavior

clientLoader() runs before loadUser() finishes.
Even when trying to include loadUser() in clientLoader, it does not wait for the layout’s clientLoader.

❓ Question

How can I ensure that loadUser() runs first before executing clientLoader()?
Would love any suggestions or best practices on handling this issue in React Router v7. 🚀

Tags: React Router, Suspense, Middleware, Authentication, React

lamhungypl · 2025-02-11T20:01:55Z

lamhungypl
Feb 11, 2025

All loaders run at the time their bundles are loaded => So this is the expected behavior.

How can I ensure that loadUser() runs first before executing clientLoader()?

Put the loadUser to the first line of the loader, then you will need some caching request feature - similar tanstack/query ensureQueryData - if(hasUser) {return user} else {await fetchUser; return user}

3 replies

v-hung Feb 12, 2025
Author

I see your point, but I’d like to have an initial loading screen for fetchUser(), react-i18n, etc., while keeping code duplication to a minimum.

lamhungypl Feb 12, 2025

At root/home, create a loader for initial prefetching : return your fetch promise

fallback that route as your Loading screen.

Let's checkout the Streaming & Suspense on the docs for more information.

v-hung Feb 12, 2025
Author

I tried it, but the loader on the HomePage doesn't delay until Suspense finishes.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Middleware for SPAs: How React Router v7 Solves It? #13002

{{title}}

Replies: 1 comment 3 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Middleware for SPAs: How React Router v7 Solves It? #13002

v-hung Feb 11, 2025

🚀 Issue: React Router v7 - clientLoader() Runs Before loadUser()

❓ Problem

root.tsx

app.tsx

home.tsx

🔍 Expected Behavior

🛑 Actual Behavior

❓ Question

Replies: 1 comment · 3 replies

lamhungypl Feb 11, 2025

v-hung Feb 12, 2025 Author

lamhungypl Feb 12, 2025

v-hung Feb 12, 2025 Author

v-hung
Feb 11, 2025

🚀 Issue: React Router v7 - `clientLoader()` Runs Before `loadUser()`

`root.tsx`

`app.tsx`

`home.tsx`

Replies: 1 comment 3 replies

lamhungypl
Feb 11, 2025

v-hung Feb 12, 2025
Author

v-hung Feb 12, 2025
Author