Correct use with NextJS::layout to prevent layout refreshes ?

[prabuvenkat-gh]

Hei!

I have the following setup:

app/
 +-- lib/
 |     +-- userActions.ts
 |     +-- purchaseActions.ts
 |
  `-- user
        + [userId]
           |
           + dashboard/
           |   +- page.tsx
           |
           + purchases/
           +   +- page.tsx
           |
           `--layout.tsx

app/lib/userActions.ts provides fetchUser and app/lib/purhcaseActions.ts provides fetchPurchases server actions.

In [userId]/layout.tsx I setup the user context like this--

export default async ({ children}: PropsWithChildren<any>) => {
    const user = fetchUser(userId);

   console.log('fetched user:', user);

    return (
        <UserProvider user={user}>
            {children}
        </UserProvider>
    )
}

with UserProvider a use client component --

export const UserProvider = ({user, children, ...}) => {
    return (
        <UserContext.Provider user={user}>
            {children}
        </UserContext.Provider>
    );
}

In [userId]/purchases/page.tsx I mount the main component wrapped in SWRConfig

export default async (params: PurchasesParams) => {
    return (
        <SWRConfig>
             <Purchases />
        </SwRConfig>
    )
}

and the main component which uses useSWR --

export const Purchases = () => {
    const { user } = useContext(RespondentContext);
    const { isLoading, data, error } = useSWR(
        `${user.userId}/purchases`,
        fetchPurchases,
        { refreshInteval: 5000 }
    );
}

Now every refreshInterval, when fetchPurchases is called in the final client component, the fetchUser in layout.tsx i executed.

Is this expected? My understandng of how appRouter::layout.tsx is that all child pages (recursively) retain a parent layout which will not be refreshed when the child client components get a refresh.

Or, am I missing something? How can I ensure fetchUser is not called for every fetchPurchase periodic execution?

Thanks in advance!