Is auth check on beforeLoad a good idea?

[michaltaberski]

By following documentation we can learn the user auth check should happen on beforeLoad function.

Something like this:

export const Route = createRootRouteWithContext<RootContext>()({
  component: RootComponent,
  beforeLoad: async () => {
    try {
      const { data } = await axiosClient.get("/me")
      return { user: data.user, session: data.session }
    } catch {
      return { user: undefined, session: undefined }
    }
  },
})

However seems like this approach is checking the auth state a way too many times.
If I use <Link /> (where preload has default value true) I am ending up with following effect:

https://share.cleanshot.com/3tkTWQfM

Whats your approach to avoid that effect?