title: Next.js page crashes on browser back button click in Safari Mac/Iphone
body: <p>With a few versions of IOS, The context object is undefined and when checked in the network tab the cached .json files in the browser disk cache throw &quot;403&quot; error on the click of back button.</p>
  <p>Attached is the snapshot of the network tab. Works fine perfectly in the chrome browser.</p>
  <p>This is the live site <a href="https://www.directv.com/forbusiness/" rel="nofollow noreferrer">https://www.directv.com/forbusiness/</a> and it's accessible outside US there is no geofencing.</p>
  <p>The context is undefined i.e ctx &amp;&amp; ctx.req.cache, Snippet from one of the page</p>
  <pre><code>customerServiceIndex.getInitialProps = async (ctx) =&gt; {
    const page: string =
      ctx &amp;&amp; ctx.query &amp;&amp; ctx.query.page.length &gt; 0
        ? ctx.query.page
        : `customer-support`;
    const path: string = `/dtvcms/dtvb/prod/customerservice.model.dtv.json`;
    let pages = ctx?.query?.page;
    let reqQueryParams: any;
    if (ctx.req) {
      reqQueryParams = ctx?.req?.query;
    } else {
      reqQueryParams = queryStringToObject(window.location.search);
    }
    let pagesInfoData = await fetchPageData(ctx, ctx.query.page, page, path);
    let cmsFeed = pagesInfoData?.cmsFeed;
    let feed = pagesInfoData?.feed;
    let fragments: any = feed &amp;&amp; feed?.data ? feed.data : {};
    const contentProvider: ContentProvider = new ContentProvider();
    const data = contentProvider.buildDataFromLayout(
      // data1,
      fragments,
      page,
      pages,
      null,
      reqQueryParams,
      ctx.asPath
    );
    const initialProps = {
      data,
      err: cmsFeed == &quot;&quot; ? { statusCode: 404 } : undefined,
      feed: fragments?.pageProperties?.elements?.analyticsPageLoad?.analytics,
      cmsFeed: cmsFeed,
      page,
      pagePath: ctx.asPath,
      seo: fragments?.pageProperties?.elements || undefined,
      root: publicRuntimeConfig.root,
    };
    return initialProps;
  };
  </code></pre>
  <p>---- Fetch Call ------</p>
  <pre><code>export const fetchPageData = async (
    ctx,
    page: string,
    currentPage,
    path: String
  ) =&gt; {
    console.log(&quot;currentPAge&quot;, currentPage);
    let authorization: string = ``;
    let cmsSource: string = ``;
    let contentSource: string = ``;
    page = ctx.query &amp;&amp; ctx.query.page ? ctx.query.page : currentPage;
    let cmsVersion: string = ``;
    let pages: { [key: string]: { [key: string]: string } };
    let ctxuserAgent: string;
    let reqQueryParams: any;
    let is404page: boolean;
    let dbData: any;
    let feed: any = {};
    if (ctx?.req) {
      if (ctx?.query) {
        authorization = ctx?.query?.authorization || authorization;
        cmsSource = ctx?.query?.contentSourceBu6dot5;
        contentSource = ctx?.query?.contentSource || contentSource;
        pages = ctx?.query?.pages || {};
      }
      cmsVersion = ctx?.req?.query ? ctx?.req?.query.cmsversion : cmsVersion;
      ctxuserAgent =
        ctx?.req?.headers[&quot;idpctx-user-agent&quot;] || ctx?.req?.headers[&quot;user-agent&quot;];
      is404page = ctx?.query &amp;&amp; ctx?.query?.is404Page === true;
      delete ctx.query.depVersion;
      delete ctx.query.authorization;
      delete ctx.query.pages;
      reqQueryParams = ctx?.req?.query;
    } else {
      dbData = (await dbGet(page)) as {
        [key: string]: { [key: string]: string };
      };
      if (typeof window !== undefined) {
        cmsSource = `${window.location.protocol}//${window.location.host}`;
      }
      reqQueryParams = queryStringToObject(window?.location?.search);
    }
    console.log(`DBDB`, dbData);
    console.log(`pages`, pages);
    const cmsFeed: string =
      pages &amp;&amp;
      pages[page] &amp;&amp;
      pages[page].cmsFeed &amp;&amp;
      pages[page].cmsFeed.length &gt; 0
        ? pages[page].cmsFeed
        : dbData &amp;&amp; dbData.cmsFeed &amp;&amp; dbData.cmsFeed.length &gt; 0
        ? dbData.cmsFeed
        : path;
    let cacheData: any =
      ctx &amp;&amp; ctx?.req &amp;&amp; ctx?.req?.cache ? ctx?.req?.cache : {};
    feed = await handleResponse(cacheData);
    if (cmsSource === &quot;&quot;) {
      if (process?.env?.GN_6DOT5_CMS_HOST) {
        cmsSource = `${process?.env?.GN_6DOT5_CMS_HOST}`
        console.log(&quot;@@@@ &quot;)
      } else {    
      cmsSource =
        publicRuntimeConfig &amp;&amp; publicRuntimeConfig.prod === false
          ? `https://tst3.directv.com`
          : `https://www.directv.com`;
      }
    }
    const url = `${cmsSource}${cmsFeed}`;
    if (!Object.values(feed).some((v) =&gt; v)) {
      console.log(&quot;cms cache failed going to call api&quot;);
      feed = await failoverCmsCall(url, page);
    }
    return {
      feed,
      pages,
      cmsFeed,
    };
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/b4eWE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b4eWE.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/36wdU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/36wdU.png" alt="enter image description here" /></a></p>