[Bug]: TopNavigation size changes after SSR hydration

[TrevorBurnham]

Browser

No response

Package version

v3.0.913

React version

v18.3.1

Description

On my page that uses SSR, I noticed that the top navigation immediately resized after pageload, going from a "narrow" mode to a larger style:

I also noticed that the class awsui_narrow_k5dlb_2ayr9_187 was attached to the top navigation in the page source, but removed after the page's JS executed.

I believe this code is responsible for the issue.

Deferring the breakpoint logic until the code runs on the client wouldn't solve the issue, since there could still be a mismatch between the appearance of the component as rendered in SSR and its appearance on the client. I believe the best solution would be to use CSS media queries instead of JavaScript to implement the breakpoint-based appearance modifiers.

Source code

No response

Reproduction

Render the top navigation with SSR and open in a desktop browser. When I noticed the issue, my browser viewport was 1024x wide.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[orangevolon]

Hey @TrevorBurnham, thanks for lettings us know. We'll review your request and keep you posted if an update is available.

[YueyingLu]

Hey @TrevorBurnham
thanks for the request, unfortunately our team can not prioritize the fixing TopNavigation SSR at the moment. I will close this request as we can not take actions in the short term future.

[TrevorBurnham]

Would you accept a PR for this? I’m happy to contribute, but I could use more context on why the responsive behavior is currently implemented with JS instead of CSS.

[YueyingLu]

Hey @TrevorBurnham
Contribution is welcome. At the time we created the TopNav we used JS for element queries. You can try to use media queries for your change.

[TrevorBurnham]

I've submitted a PR to fix this issue: #3371