Getting a value from a request header, and using that value to show a banner – both Server-Side and Client-Side rendered
### In the renderApp
Express route handler
- We look at the value of a request header with the visitor's location country.
- We pass that value to
<App visitorLocationCountry={visitorLocationCountry} />
(i.e. App being called when rendered to string on the server). - We generate a HTML meta tag string using that visitor code, and put that in the head of the generated index.html document
- We query the document to find that meta tag and get visitorLocationCountry
- We call app in the same way as on the server:
<App visitorLocationCountry={visitorLocationCountry} />
-
App passes the
visitorLocationCountry
prop to PageWrapper.- Note: it's hard to use Context, because the Context object needs to be created inside the App function definition (because it needs the
visitorLocationCountry
prop). That means that that Context object can't easily be exported, for other components to import.
- Note: it's hard to use Context, because the Context object needs to be created inside the App function definition (because it needs the
-
PageWrapper uses the value inside
visitorLocationCountry
to decide whether or not to render the banner