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
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!
@Somali 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?
React context data is still prerendered on the server, so the bug is not there. You need to show us some code
@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
SomaliOP
either I didn’t understand, or it’s something else altogether (without pre-rendering data from the server)
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
@Somali 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?@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:
@Somali 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
itselfthat one i don't understand and i doubt it's intended
@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` itself
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
@Somali 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
@joulev ok i think it'll be easier this way: what exactly do you want to achieve?
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.
@Somali 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?
* 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?
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
@Somali yes
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
@joulev wait a few mins
SomaliOP
okay, thank you
but what yuo mean when says 'React Context is prerender'
@Somali 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)Answer
@joulev check this https://github.com/joulev/debug/tree/nextjs-pages-router-global-static-data-example
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
@Somali 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 filesyou can do static data fetching even in your
components/any-component.tsx
@joulev the app router effectively supports `getStaticProps` everywhere, not just page files
SomaliOP
in clients component with 'use client' also support prerender?
@joulev yes
SomaliOP
why do people hate app router ? XD
@Somali 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
@joulev also mutation is not stable and there are annoying bugs popping up all the time
SomaliOP
should i use app router for production at this time?
@Somali 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
@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
SomaliOP
Yes, but I'm newbie, so I still don't understand the depth of the app router problem
@Somali 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