Cookies which are set from server are missing in the first load: [email protected]

[sathyaku]

I am reading the cookies which are set from cloudflare worker in _app.js. getInitialProps

App.getInitialProps = async ({ Component, router, ctx }) => {
     const cookie = isWindow() ? document.cookie : ctx.req.headers.cookie;
}

I am facing a issue that on the first load of the page the cookies set from cloudflare worker are not coming. If i do hard refresh of the page then cookies are loading.

Can someone help me, that how can i resolve this.

[bobarros]

Are you sure they are loaded by the second time and are not reminiscent of the previous load?
What are you returning from getInitialProps?

Did you pay attention to those two caveats before deciding to handle cookies in _app.js:

---

Adding a custom getInitialProps in your App will disable Automatic Static Optimization in pages without Static Generation.

When you add getInitialProps in your custom app, you must import App from "next/app", call App.getInitialProps(appContext) inside getInitialProps and merge the returned object into the return value.

---

Usually, I try to use _app.js only for what is necessary.

Handling cookies can be done with some layout wrap on every page and I don't have to use getInitialProps.

[sathyaku]

I am importing the Container from 'next/app'.

The return from getInitialProps looks like this. whereAs appCtx is the context required for all pages.

let pageProps = {};

  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(
      { config: publicRuntimeConfig },
      ctx,
      appCtx,
      router
    );
  }

  return {
    pageProps,
    router,
    appCtx
  };

const App = (props) => {
    <Container> {......} </Container>
}

I m using the _app.js for some common data, which will be required for all pages.
Based on the cookie value i am supposed to decide calling API-1 or API-2 to fetch the data. Cookie value will differ for certain % of the traffic.

[bobarros]

I understand. Still hard for me to come up with a good theory.

We know that this will always be false at first -> isWindow()

getInitialProps does not run like useEffect(). Did you investigate when you have true conditions? Maybe it's only when you're leaving a page in a fast refresh.

[geekysaurabh001]

this problem still persists in app router version 15.2.4 nextjs.

[kienpt-dev]

You're running into a common issue when setting cookies via a Cloudflare Worker and trying to read them server-side on the first page load (using getInitialProps in Next.js). Here's a breakdown of what's going on and how you might fix or work around it.

Root Cause:

Cloudflare Workers set cookies via response headers, but:

On the very first request, if the cookie was just set by the Worker (using Set-Cookie header), that cookie is not yet available in the request headers that Next.js receives (i.e., ctx.req.headers.cookie).

Only subsequent requests or a hard reload will include those cookies in the request headers, since the browser persists them after receiving the response.

Solutions / Workarounds

1. Move Cookie Reading to Client Side (if possible)
2. Use Middleware or Edge Functions
   You can intercept requests before they hit your app by using Next.js Middleware (if using Next.js 12+):

Middleware runs before rendering and can read and modify cookies.

You can use request.cookies from NextRequest.

3. Set Cookie Early Using Redirect (Hacky but works)