Render layout and page. Optimize data calls.
Using app router. Trying to Optimizing where data is called.
Page - Page works great, get my data on the server side and then render a "ClientView" component in the browser.
My Layout - renders on the client - has a general layout that needs to be client side rendered. - but has a List component inside of it that needs data. - So this will render in the browser then goes back to the server to get data and re-renders again. - Question: How can I grab "list data" server side optimally - Don't want to block page async get data - Don't want to block the rest of layout rendering. How does this look?
Do I create a server component for layout and pass that as props to layout? And use dynamic somehow: Do I use the preload pattern inside of layout? https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data - not sure if this will block pages or the general client side part of my layout.
Page - Page works great, get my data on the server side and then render a "ClientView" component in the browser.
My Layout - renders on the client - has a general layout that needs to be client side rendered. - but has a List component inside of it that needs data. - So this will render in the browser then goes back to the server to get data and re-renders again. - Question: How can I grab "list data" server side optimally - Don't want to block page async get data - Don't want to block the rest of layout rendering. How does this look?
Do I create a server component for layout and pass that as props to layout? And use dynamic somehow: Do I use the preload pattern inside of layout? https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data - not sure if this will block pages or the general client side part of my layout.
0 Replies