We have a simple setup involving a Context API provider wrapping the _app.tsx
page. The flow we're trying to implement is:
- On a page we collect some data from an API by using
getServerSideProps
- We send the data to the page through the props
- We update the context from the page (the context provider is wrapping the
_app.tsx
as mentioned above) - The context is updated and all the children components can access the data in it
So we have a pretty standard setup that works correctly on the client side. The problem is that the updated context values are not being used to SSR the pages.
Context API
const ContextValue = createContext();
const ContextUpdate = createContext();
export const ContextProvider = ({children}) => {
const [context, setContext] = useState({});
return <ContextValue.Provider value={context}>
<ContextUpdate.Provider value={setContext}>
{children}
</ContextValue.Provider>
</ContextUpdate.Provider>
}
export const useContextValue = () => {
const context = useContext(ContextValue);
return context;
}
export const useContextUpdate = () => {
const update = useContext(ContextUpdate);
return update;
}
Then we have on _app.jsx
:
...
return <ContextProvider>
<ContextApiConsumingComponent />
<Component {...pageProps} />
</Context>
And in any page, if we can update the context by using the hook provided above. For example:
export function Index({customData, isSSR}) {
const update = useContextUpdate();
if(isSSR) {
update({customData})
}
return (
<div>...</div>
);
}
export async function getServerSideProps(context) {
...
return {
props: { customData , isSSR}
};
};
And we can consume the context in our ContextApiConsumingComponent
:
export function ContextApiConsumingComponent() {
const context = useContextValue()
return <pre>{JSON.stringify(context?.customData ?? {})}</pre>
}
The (very simplified) code above works fine on the client. But during the SSR, if we inspect the HTML sent to the browser by the server, we'll notice that the <pre></pre>
tags are empty even though the context values are correctly sent to the browser in the __NEXT_DATA__
script section (they are precisely filled with the data on the browser after the app is loaded).
I've put together a GitHub repo with a minimum reproduction too.
Am I missing something?
isSSR
? How is that variable defined? You should also not call a state setter function (setContext
viaupdate
) directly from render, call it inside auseEffect
.const isSSR = !context?.req?.url?.includes('_next/')
. Theupdate
cannot be called from auseEffect
because I wanted it to be executed during the server-side rendering. I can add more logic to make this happen only on the server-side though.