Link to the code that reproduces this issue

https://github.com/kamil-wsiiz/server-action-hydration-error

To Reproduce

1. Create new next.js app
2. Add server action in page.tsx

import TestSelect from './components/TestSelect';

export default async function Home() {
  'use server';
  await fetch('https://google.com', { cache: 'no-store' });

  return (
    <TestSelect />
  )
}

3. Create loading.tsx

export default function Loading() {
  return (
    <div>
      loading
    </div>
  );
}

4. npm i react-select
5. Create react-select component

"use client";

import Select from "react-select";

export default function TestSelect() {
  const options = [{ value: 123, label: `test` }];

  return (
    <Select options={options} />
  )
}

6. npm run build && npm run start

Current vs. Expected behavior

Unexpected hydration error appears every few loads

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:27 PDT 2023; root:xnu-10002.41.9~6/RELEASE_X86_64
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.1
  eslint-config-next: 14.0.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

The error appears only in production mode, developer mode works flawlessly. Using this manual https://nextjs.org/docs/messages/react-hydration-error we learn about several solutions, the only working solution is to use next/dynamic, but this is a mediocre solution, because the component appears only after a while.