This is the first time I am using Next JS so pleaaase correct me if anything is wrong. I am currently implementing auth for my application and I wanted to show a loading spinner when the user info is being fetched. I want the user info to be streamed in from the server and a suspense will wrap around the server component but I don't want to use the loading.ts file since I want the suspense boundary to be more fine-grained (for example replacing the avatar spot with a loading spinner inside a nav component). The auth server component is currently being used in a client component. I tried to import the server component in a client component but it gets rendered as a client component which doesnt work. I found a solution where I pass the server component as prop and prop drill the layers of client components. I assume I can use a context for this but are there other ways to handle this? I would really like to minimize the initial latency and show some spinners if possible.
Another question (maybe a dumb one) is that the route that imports this auth server component cannot be SSG rendered right? Since it is reading cookies and stuff. But I suppose I can still make use of the partial prerendering introduced in Next 14 and stream in a static shell while the user info is being streamed into each auth component?