loaders inside a shared layout always fires when navigate between child routes.

[semet]

I'm currently working on a project using Remix. It's an awesome experience. However, as far as i read from the Document, layout persists the data between navigation, which is true. But there is a bit of trouble i found: in each child navigation, the loader inside the shared layout re-fires.

let me ilustrate it with s basic Remix app.

routes/
     _layout._index.tsx
     _layout.deposit.tsx
     _layout.tsx

and this is the _layout.tsx looks like:

import { json } from '@remix-run/node'
import { Link, Outlet } from '@remix-run/react'
import axios from 'axios'

export async function loader() {
  const styleData = await axios
    .get('http://localhost:8000/', {})
    .then((res) => {
      console.log(res.data)
      return res.data
    })

  return json({
    styleData: styleData
  })
}

export default function SharedLayout() {
  return (
    <div>
      <h1>Shared Layout</h1>
      <nav className="my-4">
        <ul className="flex gap-2">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/deposit">Deposit</Link>
          </li>
        </ul>
      </nav>
      <Outlet />
    </div>
  )
}

each time i navige between the '/' and '/deposit' page the loader inside the _layout.tsx refires.

i also have used package like remix-flat-routes, but this behaviour is the same.

what might i did wrong here?
Much appreciate any form of suggestion. Thanks

[SydilSohan]

Exporting shouldRevalidate in a specific loader route with a false return will prevent it from firing altogether. However, you might want a more nuanced approach depending on your use case. Here's an example that selectively revalidates based on URL changes:

import type { ShouldRevalidateFunction } from "@remix-run/react";

export const shouldRevalidate: ShouldRevalidateFunction = ({
  defaultShouldRevalidate,
  currentUrl,
  nextUrl,
}) => {
  // Don't revalidate if the URL changes
  if (currentUrl !== nextUrl) return false;

  // Revalidate in all other cases
  return defaultShouldRevalidate;
};

[sergiodxa]

Are you using Single Fetch? Check in your vite.config if you have the future flag for Single Fetch enabled.

If you have Single Fetch that behavior has changed and now it always fetch all routes, this was done to be consistent with document requests.

With the ShouldRevalidateFunction you can control that to prevent it like before Single Fetch.

[semet]

Thanks a lot. I have read through the doc, but accidentally miss this one ... My bad..