[Bug]: Avatar's initials id differs from server-side and client-side

[sopranopillow]

Library

React Components / v9 (@fluentui/react-components)

System Info

npx: installed 1 in 0.668s

  System:
    OS: Linux 5.10 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 28.75 GB / 62.67 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Browsers:
    Firefox: 104.0

Are you reporting Accessibility issue?

No response

Reproduction

https://codesandbox.io/s/zen-hodgkin-8n86w4?file=/pages/index.tsx

Bug Description

Actual Behavior

Server-side id does not match client-side id in Avatar's initials slot.

Expected Behavior

Both sides should match, this is probably fixed with the SSR Provider.

Note: This should be tested by our current ssr tests, this could be an issue that only appears in NextJS or is not detected by our tests.

Logs

Warning: Prop `id` did not match. Server: "avatar-2__initials" Client: "avatar-4__initials"
    at span
    at span
    at eval (webpack-internal:///./node_modules/@fluentui/react-avatar/lib/components/Avatar/Avatar.js:15:79)
    at div
    at div
    at TextDirectionProvider (webpack-internal:///./node_modules/@griffel/react/TextDirectionContext.esm.js:20:3)
    at eval (webpack-internal:///./node_modules/@fluentui/react-provider/lib/components/FluentProvider/FluentProvider.js:17:95)
    at Home
    at SSRProvider (webpack-internal:///./node_modules/@fluentui/react-utilities/lib/ssr/SSRContext.js:41:54)
    at RendererProvider (webpack-internal:///./node_modules/@griffel/react/RendererContext.esm.js:30:3)
    at MyApp (webpack-internal:///./pages/_app.tsx:36:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:820:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:944:27)

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

Note: This should be tested by our current ssr tests, this could be an issue that only appears in NextJS or is not detected by our tests.

It's a duplicate of #23620, we don't support StrictMode yet, #23620 (comment).