Cache routes if root layout is dynamic #55271
-
|
Hey, we're currently using the app router for our site, which incorporates authentication and displays the details of the logged-in user in the navigation bar located at the top of all pages. To achieve this, we've placed the navigation bar in our root layout, and we're fetching the user's information on the server side, passing it down to the navigation bar component. As a result, our root layout currently includes the line Users also have a "profile page", with some info about them they can fill out in a form. We want these profile pages to be cached so they're not built every time they're loaded, but unsure how or if this is possible with our dynamic layout. Ideally this is done using on-demand revalidation, so we can purge the cache when a user updates their profile page. Another important detail is that we're using trpc to enable consistent data fetching on both the server and client sides. This approach means that we can't explicitly define caching parameters for different trpc procedures. Is there a way we can statically render a profile page, and purge the cache when a user updates their info, so we're not fetching from our database every time the page is loaded, yet still have a dynamic nav bar that shows the currently logged in user's info? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Thought I'd come back to this and share our approach here, which was to fetch any user info for the nav bar on the client side, while showing a skeleton in it's place until it's loaded. Note that this could also be achieved using partial pre-rendering, if this data should be fetched on the server-side. In order to get our profile pages statically rendered and revalidated, we use |
Beta Was this translation helpful? Give feedback.
Thought I'd come back to this and share our approach here, which was to fetch any user info for the nav bar on the client side, while showing a skeleton in it's place until it's loaded. Note that this could also be achieved using partial pre-rendering, if this data should be fetched on the server-side.
In order to get our profile pages statically rendered and revalidated, we use
export const generateStaticParams = () => []in our/users/[username]/page.tsxfile, which tells Next.js not to generate any at build time, but that these pages should instead be statically rendered when they're first visited. Then we can userevalidatePath('/users/example')when a user updates their profile page.