I want to fetch some data server-side, and make it available on all the pages of my app. How can I do that?

[lumenwrites]

I have a Header component that is used on all my pages (_app.js wraps all pages into a Layout component which renders the Header). I need the Header to display the username of a logged in user.

I want the Header to be server-side rendered, so I need to fetch the user data in getServerSideProps() (I'm assuming). It would request the data from the api route, api router would use JWT to find out if the user is logged in, and send me back his username.

The problem is - how do I make this data available to the Header?

I have multiple pages, and it wouldn't make sense to use getServerSideProps() in each one of them, and copy paste the username-fetching code. It would be cool if I could use this function in the _app component, and make the fetched data available to all the pages at once, but I'm not sure that's allowed.

How do people usually solve this probem?