Are multiple calls to the same Supabase operation cached across pages and components?

[btahir]

Hi - basic App Router question but I'm trying to understand if calling the same Supabase operation gets automatically cached in app router similar to fetch?

I need to fetch the User on multiple pages and am calling the same function again rather than trying to pass it in Context like the good (bad) ol' useUser days.

export async function getUser() {
  const supabase = createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()
  return user
}

I noticed you did the same on login and pricing pages. Just want to confirm this pattern is ok and we can re-use DB read operations across pages and components without worrying about performance hits?

Thanks!
Love this starter and appreciate the app router upgrade. :)

UPDATE

I can confirm that using getUser causes the function to be called again and again at least across routes. Maybe that's ok though since you want the latest user state? Still feels very sluggish when i first click on a link and have to wait a few secondd for page to route.

[Ronyo]

I'm facing the same issue with the code from the starter and I think it's a bug because navigating between pages causes an Auth Login event. This is not right because you quickly hit limits and user's can't do anything.
The middleware is resetting user's Login on each page visit.
To reproduce deploy a clean starter code and navigate between the main page and Account page. You will see Login events spammed in your Supabase Logs.

[btahir]

Yeah - the experience in dev is also so bad. I have to wait a couple of seconds for every navigation. I've already used this starter's logic to deploy an app to production and now not sure how much fixing is needed.

[leerob]

Sounds like you want the React cache function here: https://react.dev/reference/react/cache

[btahir]

I tried caching and it didn't seem to work. I'll look into it again to see if I missed anything.

[btahir]

Sounds like you want the React cache function here: https://react.dev/reference/react/cache

OK - I am trying out React cache and maybe it works?

If I have a page with getUser called in both Nav and Main component the first time i'll get two calls if I refresh the page. Then if I jump to another page and come back its one call...and sometimes even none(?). I guess that works once things are cached? I guess the basic unease here is a lack of clarity on best practices. In the old world, it was a fairly obvious pattern to load these functions in a high-level component or layout and pass them down in a provider. Now, there's a lot of confusing messaging going on. We're told, "you can just call them as many times as you want, and it works," but then we hear, "wait, now we are changing the default cache" but also thats just fetch GET requests and not clear how that impacts DB calls and auth.

I know you've gone above and beyond to explain this (thank you!), and I've even watched your video on caching multiple times, but I'm still not quite sure of the best practice for calling functions that will be reused across the app. In any basic Saas app, you'll be calling functions like getUser and getSubscription multiple times on the same page and then again on different pages. So, how many times are they actually called?

Sorry for the ramble, but this stuff is much more confusing now. It might be a good investment to set the record straight. The best places to educate are these 'official' starters where we can be reasonably certain the next team looked them over and signed off on the pattern.

[leerob]

I would recommend checking out this repository for another example: https://github.com/vercel/commerce.

For calls that are user-specific and where you are using them multiple times, yes, you would want to wrap those with React's cache function. We can probably update this repo (open to community PRs) to improve this template!

[leerob]

Started on a PR here: #346

[btahir]

Thank you! Will give this a shot and hopefully get a perf boost. Still not sure how much this helps particularly with auth since it depends on how the cookies are being set and retrieved (since that would invalidate cache). But I guess its good to have this.