Not sure if this what you are looking for. But take a look through this repo. https://github.com/webdevcody/code-racer/tree/main/packages/app

Those may help!

React context data is still prerendered on the server, so the bug is not there. You need to show us some code

either I didn’t understand, or it’s something else altogether (without pre-rendering data from the server)

can you help please?

other people says its to ReactContext not prerendered

Can you give a minimal reproduction repository

Your code in the screenshot is too long and complex

Remove the irrelevant parts

i made it

https://stackblitz.com/edit/nextjs-poylar?file=components%2FHeader.jsx,context%2FGlobalDataContext.js

also you can view github repo

https://github.com/Poylar/nextjs-poylar

your code looks quite hard to understand. why do you use GlobalDataContext outside a provider – is this intended? in the first place what do you want to do here – get the getStaticProps data in the _app.js header?

what you mean "why do you use GlobalDataContext outside a provider – is this intended?" ?

There i just created global store, when i get Global data on index page i want to save this data in store to use it in all others comps.

like this:

what you mean "why do you use GlobalDataContext outside a provider – is this intended?" ?

in the screenshot above, you are using GlobalDataContext for the data variable, which is then used to initialise GlobalDataContext itself

that one i don't understand and i doubt it's intended

okay i remove it like this, but its not help. any ideas?
may be you have some refs to my problem?
for some reason i cant google it

ok i think it'll be easier this way: what exactly do you want to achieve?

i still dont understand what you truly need to do so i cant say anything

what do you want to forward the data from? where is the data fetched, where is it displayed

where is the role of global contexts in this

i want to create global store with data from my api.For example i want to save 'title' field from this endpoint to my global data store

https://jsonplaceholder.typicode.com/todos/1

Then i want to use this data on any component from store with SSG, like im trying in stackblitz exaample.

In my real case i have /config endpont where i get some globalData for website like 'navigation,logo,header/footer buttons text, socials link and etc' so i want to have access to this data in any components with SSG

English is not my native language, so if it's still not clear, I'll try to explain in another way.

so i will paraphrase your problem like so:

* you have a data source, say https://jsonplaceholder.typicode.com/todos/1
* you want to fetch data from it during build time (SSG)
* and make that data available globally to display in navbar etc

am I right?

yes

but

I don't want to pass this data through 10 components, i.e. I want to use something like context

so method with indexPage -> getStaticProps -> Layout -> Header/Footer etc its not for me

then your way doesn't work because data from getStaticProps is only available in the page containing it

so, in the example above, the data is only available in / (pages/index.js)

to do what you need to do, you have to either
* use the app router to get a native nextjs solution, because getStaticProps is not available in _app.tsx.
* or if you need to use the pages router, you have to make a prebuild script that fetches the data beforehands

i will come up with an example for the second case

wait a few mins

okay, thank you

but what yuo mean when says 'React Context is prerender'

const Context = createContext(null);

function Component() {
  const data = useContext(Context);
  return <div>{data}</div>
}

export default function Page() {
  return (
    <Context.Provider value="Foo">
      <Component />
    </Context.Provider>
  );
}

will be prerendered to <div>Foo</div> without the need of client-side JS (so it's SEO friendly and you can see the "foo" in the page source)

I understood your solution. Thank you

It is a pity that there is nothing more natively supported by nextjs and react itself

Do you says this is not problem in app router

the app router effectively supports getStaticProps everywhere, not just page files

you can do static data fetching even in your components/any-component.tsx

in clients component with 'use client' also support prerender?

yes

why do people hate app router ? XD

tbf it still has some annoying design issues, like [this one](https://github.com/vercel/next.js/discussions/54075)

also mutation is not stable and there are annoying bugs popping up all the time

So like everything about caching? :v

should i use app router for production at this time?

this answer definitely doesn't satisfy you but: it depends. although you definitely should try it in small-scale projects to see how well it suits your projects

i would use the app router for all my projects currently, but it's necessary to note that the ride won't be as smooth as you might expect it to

Yes, but I'm newbie, so I still don't understand the depth of the app router problem

yeah i think just try it. the app router is mostly working well, there isn't any huge centralised problems to note about but rather small separate problems like the caching issue i linked above

so it's hard to answer whether you should use the app router for your production app or not

okay, thank you