How to create global data like logotype/phone numbers in header/footer?
Answered
Somali posted this in #help-forum
SomaliOP
I used to use React Context
But this data is not there if you look through the code in the browser, which means that this data is filled in through js, which is probably bad for SEO.
I also don't want to loop through 10 components from page level to Layout level and then header/footer, maybe you know a more elegant solution?
But this data is not there if you look through the code in the browser, which means that this data is filled in through js, which is probably bad for SEO.
I also don't want to loop through 10 components from page level to Layout level and then header/footer, maybe you know a more elegant solution?
Answered by joulev
56 Replies
SomaliOP
Hunter Bertoson
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!
joulev
React context data is still prerendered on the server, so the bug is not there. You need to show us some code
SomaliOP
SomaliOP
either I didn’t understand, or it’s something else altogether (without pre-rendering data from the server)
SomaliOP
can you help please?
other people says its to ReactContext not prerendered
joulev
Can you give a minimal reproduction repository
Your code in the screenshot is too long and complex
Remove the irrelevant parts
SomaliOP
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
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
joulev
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?SomaliOP
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:
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:
joulev
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
itselfthat one i don't understand and i doubt it's intended
SomaliOP
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
may be you have some refs to my problem?
for some reason i cant google it
joulev
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
SomaliOP
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.
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.
joulev
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?
* 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?
SomaliOP
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
joulev
then your way doesn't work because data from
getStaticProps
is only available in the page containing itso, 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
* or if you need to use the pages router, you have to make a prebuild script that fetches the data beforehands
* 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
SomaliOP
okay, thank you
but what yuo mean when says 'React Context is prerender'
joulev
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)Answer
SomaliOP
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
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
joulev
the app router effectively supports
getStaticProps
everywhere, not just page filesyou can do static data fetching even in your
components/any-component.tsx
SomaliOP
in clients component with 'use client' also support prerender?
joulev
yes
SomaliOP
why do people hate app router ? XD
joulev
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
Alfonsus Ardani
So like everything about caching? :v
SomaliOP
should i use app router for production at this time?
joulev
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
SomaliOP
Yes, but I'm newbie, so I still don't understand the depth of the app router problem
joulev
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
SomaliOP
okay, thank you