How to recreate 'global' props in app router?

One pattern that I use a lot that I'm not sure how to do in app router is accessing global props that were returned from getStaticProps in the root of the app. An example of this is:
const MyApp: AppType<{
session: Session | null;
tenant: ServerPublic | undefined;
}> = ({ Component, pageProps: { session, ...pageProps } }) => {
return (
<TenantContextProvider value={pageProps.tenant}>...
const MyApp: AppType<{
session: Session | null;
tenant: ServerPublic | undefined;
}> = ({ Component, pageProps: { session, ...pageProps } }) => {
return (
<TenantContextProvider value={pageProps.tenant}>...
src: https://github.com/AnswerOverflow/AnswerOverflow/blob/main/apps/main-site/src/pages/_app.tsx Then in child components, I have a hook like useIsOnTenantSite to apply custom styling depending on if it's on a custom domain - how do I recreate this in app router? One idea I have is setting a global variable and using that global variable if we're on the server, otherwise using context if we're on the client. That feels hacky however.
18 Replies
Rhys
RhysOP•15mo ago
Bump on this t3ggLove
whatplan
whatplan•15mo ago
Data Fetching: Fetching, Caching, and Revalidating
Learn how to fetch, cache, and revalidate data in your Next.js application.
Rhys
RhysOP•15mo ago
hmm that's interesting ok thanks for linking not sure i love that but it makes sense
whatplan
whatplan•15mo ago
its definately a shift from the top down model react normally puts you in no context means either prop drill like crazy, or deduplicate- thus cache
Rhys
RhysOP•15mo ago
i like that we're moving more towards this model where components are isolated and able to exist on their own
whatplan
whatplan•15mo ago
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed
If you need to use the same data (e.g. current user) in multiple components in a tree, you do not have to fetch data globally, nor forward props between components. Instead, you can use fetch or React cache in the component that needs the data without worrying about the performance implications of making multiple requests for the same data. This is possible because fetch requests are automatically memoized. Learn more about request memoization
Data Fetching: Data Fetching Patterns
Learn about common data fetching patterns in React and Next.js.
Rhys
RhysOP•15mo ago
with that being said, now ive got to like pass the server id into the navbar or something 😅 actually i guess im getting it wrong the request so i can do it from inside the component
whatplan
whatplan•15mo ago
are you trying to move your whole app to app router? i would just incrementally adopt throw the whole thing under "use client" and then you can sprinkle in server components as props here and there
Rhys
RhysOP•15mo ago
im thinking about it - id rather just get it done in one shot over a weekend
Rhys
RhysOP•15mo ago
npm
dataloader
A data loading utility to reduce requests to a backend via batching and caching.. Latest version: 2.2.2, last published: 7 months ago. Start using dataloader in your project by running npm i dataloader. There are 1320 other projects in the npm registry using dataloader.
Rhys
RhysOP•15mo ago
but a more advanced version
Rhys
RhysOP•15mo ago
No description
Rhys
RhysOP•15mo ago
Does this also mean that if you have two cache functions inside the same file they will both revalidate once each hour?
whatplan
whatplan•15mo ago
no so cache is only caching per react render cycle I am almost sure that example is just wrong
whatplan
whatplan•15mo ago
unstable_cache is like react cache but can persist between renders, and be invalidated on demand just like fetch
whatplan
whatplan•15mo ago
https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config revalidate is only for page, layouts, or route handlers
File Conventions: Route Segment Config
Learn about how to configure options for Next.js route segments.
Rhys
RhysOP•15mo ago
Yeah that was confusing me, if I’m not lazy I’ll open an issue about that
Want results from more Discord servers?
Add your server