Passing down session from the server as initial data

Could someone please help me understand this?: https://www.better-auth.com/docs/guides/optimizing-for-performance#ssr-optimizations

I have a NavigationBar component in my layout.tsx which uses useSession to display the user's name in the navigation bar. However, the docs recommend passing down the session from the server as a fallback.

If I fetch session using auth.api.getSession() in the layout.tsx and pass it down to NavigationBar and do this:
const session = clientSession || serverSession;

If I clear my cookies and navigate to another page using router, the user's name in the navigation bar remains because of the serverSession fallback.

Am I executing this correctly? Would my use case be better with useSession then? Say a user's session is revoked and they navigate, the page content will show unauthenticated, but the navigation bar is still showing the session. I want the navbar + page content to dynamically update if the session is no longer there.
Was this page helpful?