How do I get getServerSideProps to work with Apollo cache?

[erip2]

So, I've got a project which uses getServerSidePropson on each page. The Apollo client boilerplate is taken from the official apollo next js example (https://github.com/vercel/next.js/blob/canary/examples/with-apollo/lib/apolloClient.js).

What I want is that when I navigate to a page for the first time, it will make a server request for the .json data as it should, but if I navigate to another page and then go back, it shouldn't make a server request since this data should be on the browser cache. This happens on NextJS official site or for example on https://jobs.netflix.com/.

I don't understand what I haven't done in order for this cache to work.

This is my _app.js:

import { ApolloProvider } from "@apollo/client";
import GlobalStyle from "../components/styles/globalStyles";
import Header from "../components/Header";
import { initializeApollo, useApollo } from "../lib/apolloClient";
import { GET_MENU } from "../queries/get-menu";
import Footer from "../components/Footer";
import { createContext } from "react";
import Router from "next/router";
import NProgress from "nprogress";
import "../styles/nprogress.css";

Router.events.on("routeChangeStart", () => NProgress.start());
Router.events.on("routeChangeComplete", () => NProgress.done());
Router.events.on("routeChangeError", () => NProgress.done());
export const HostnameContext = createContext();

process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;

function App({ Component, pageProps, props }) {
  const apolloClient = useApollo(props);

  const { data, host } = props;

  return (
    <ApolloProvider client={apolloClient}>
      <HostnameContext.Provider value={host}>
        <GlobalStyle />
        <Header menuItems={data.headerMenu} />
        <Component {...pageProps} />
        <Footer data={data.footerMenu} boutiquesPage={data.highlightedStore} />
      </HostnameContext.Provider>
    </ApolloProvider>
  );
}

App.getInitialProps = async (context) => {
  const apolloClient = initializeApollo();

  const { data } = await apolloClient.query({
    query: GET_MENU,
    variables: {
      headerId: "dGVybTo1MzI=",
      footerId: "dGVybTozNw==",
    },
  });

  const { req } = context.ctx;
  
  let host = req?.headers.host; // will give you localhost:3000
  
  return {
    props: { data, host },
  };
};

export default App;

I use getInitialProps only for global data like header and footer data, then on pages, I use getServerSideProps.