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:
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
Bump on this 
wrap the data in
cache and just call it everywhere you need it
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-third-party-librariesData Fetching: Fetching, Caching, and Revalidating
Learn how to fetch, cache, and revalidate data in your Next.js application.
hmm that's interesting ok thanks for linking
not sure i love that but it makes sense
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
cachei like that we're moving more towards this model where components are isolated and able to exist on their own
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.
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
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
im thinking about it - id rather just get it done in one shot over a weekend
react cache reminds me of https://www.npmjs.com/package/dataloader
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.but a more advanced version
Does this also mean that if you have two cache functions inside the same file they will both revalidate once each hour?
no so cache is only caching per react render cycle
I am almost sure that example is just wrong
Building Your Application: Caching
An overview of caching mechanisms in Next.js.
unstable_cache is like react cache but can persist between renders, and be invalidated on demand just like fetchhttps://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.
Yeah that was confusing me, if I’m not lazy I’ll open an issue about that