[Bug]: Using Next.js App Routing SSR with Fluent 9 leads to large js files while building

[fliptrail]

trafficstars

Component

Other...

Package version

9.58.3

React version

18.3.1

Environment

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 7840HS w/ Radeon 780M Graphics
    Memory: 6.13 GB / 11.33 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  npmPackages:
    @fluentui/react-components: ^9.58.3 => 9.58.3
    @types/react: ^18 => 18.3.18
    @types/react-dom: ^18 => 18.3.5
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1

Current Behavior

I tried to use Fluent 9 with NextJS app router SSR by following this guide: https://react.fluentui.dev/?path=/docs/concepts-developer-server-side-rendering-next-js-appdir-setup--docs

Gives no error. (so hopefully works)

However, the js files being generated while building are more than 10 times larger which slows down the initial page load. When using as suggested above.

However, if I add a use client on page.tsx, the .js files generated are much smaller. When using the entire component client-side:

Apologies, new to React and SSR!

Expected Behavior

The .js size while using SSR should be smaller?

Reproduction

https://stackblitz.com/edit/stackblitz-starters-zsdutqpy?file=app%2Flayout.tsx,app%2Fv9Component.tsx,app%2Fpage.tsx

Steps to reproduce

Run npm run build or check waterfall

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

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