Skip to content

[Bug]: TopNavigation size changes after SSR hydration #3337

@TrevorBurnham

Description

@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:

Top navigation changing size after pageload

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions