nextjs SSR in production;

Our project's still running on the page's router due to project size and running the latest version of apollo client 3.4 given we haven't had time to migrate to 4.x yet, however we're running in to an SSR problem in production and i'm not sure what the recommended approach is to resolve it:

 const [submitPostMutation, postMutation] = useSubmitPostMutation({
    onCompleted: ({ submitPost: { id, relativeUrl } }) => {
     
      push(relativeUrl)
    }
  })

we have the following mutation that pushes you to /post/id which our backend generates that url for you.

Our SSR code looks like:

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const postId = context.query.id as string
  
  return renderWithQueriesCached<PostPageProps>(context, {
    props: { postVariables},
    queries: [
      {
        query: PostDocument,
        variables: postVariables
      },
      
    ]
  })
}

and our renderWithQueriesCached function looks like:

export const renderWithQueriesCached = async <T>(
  context: GetServerSidePropsContext,
  options: RenderWithQueriesCachedOptions<T>
): Promise<GetServerSidePropsResult<T>> => {
  const client = options.client ?? initializeApollo({ context })

  // run all queries in parallel, ignoring errors
  const queries = (options.queries || []).concat(DEFAULT_SSR_QUERIES)

  await Promise.all(
    queries.map(async query => {
      await client.query(query).catch(console.error)
    })
  )

  if (options.hook) {
    const hookResult = await options.hook(client)
    if (hookResult) return hookResult
  }

  return addStateToPageProps(client, {
    props: options.props ?? ({} as T),
  })
}

our issue is when we push the user to the given post page, the page 404s initially, however refreshing the page it works normally.

This does not occur when we run locally using next dev