Workaround for setting cookies during rendering in NextJS app router

I am making an integration for a CMS that may return variants of content elements. I want different users to see different variants, but the same users to always get the same variants between refreshes, so I setup the backend to store their selected variants against a session Id that I store in cookies.

This works fine with the pages router because I can read and write cookies in getServerSideProps, something like this:

export const getServerSideProps = async (context) => {
  let sessionId = context.req.cookies['sessionId']
  if (!sessionId) {
    sessionId = createSessionId();
    setCookie('sessionId', sessionId);
  }

  const content = await getContent({
    sessionId
  });

  return {
    props: content,
  }
}

This means the same user will always see the same content because they will always have the same session Id.

But for the life of me I cannot figure out how to make this work with the app router. I don’t want the SDK consumers to have to implement a really convoluted solution on their own.

I was thinking it might be better to use the user’s IP address rather than a cookie. Is this feasible? Some hosting providers don’t provide the IP address.