Cloudscape AppLayoutToolbar SSR Bug — Comparison

These pages are pure static SSR output from ReactDOMServer.renderToString(). No JavaScript is executed in the browser — what you see is exactly what the server sends.

Bug: In mainline 3.0.1286, AppLayoutToolbar does not render content, navigation trigger, or navigation panel during SSR. The useMultiAppLayout hook depends on useLayoutEffect for registration, which never fires server-side — leaving toolbarProps null and registered false.

Fix: The fork adds an SSR bypass in useMultiAppLayout that returns sensible defaults during SSR (registered: true, valid toolbarProps). This enables the skeleton to render all slot content server-side.

Comparison Pages

Version	navigationOpen	Result	Page
Mainline 3.0.1286	`false` (default)	Empty layout — no content, no trigger, no nav (bug)	mainline-closed.html
Mainline 3.0.1286	`true`	Empty layout — no content, no trigger, no nav (bug)	mainline-open.html
Fixed Fork	`false` (default)	Content rendered, hamburger trigger visible (fix)	fixed-closed.html
Fixed Fork	`true`	Content rendered, nav panel open with links (fix)	fixed-open.html

Hydrated Pages (SSG + Client Hydration)

These pages include client JavaScript that hydrates the SSR output, making everything interactive. Buttons work, navigation toggles, links are clickable.

Version	navigationOpen	Result	Page
Fixed Fork	`false`	Full SSG + hydration — fully interactive	fixed-closed-hydrated.html
Fixed Fork	`true`	Full SSG + hydration — nav panel open, fully interactive	fixed-open-hydrated.html

What to Look For

Mainline pages: The content area below the toolbar is completely empty. No hamburger trigger button, no navigation panel, no content — only breadcrumbs render. This confirms the SSR bug.
Fixed pages (static): Content area renders the heading and paragraph text. Hamburger trigger (≡) is visible in the toolbar. With navigationOpen=true, the SideNavigation panel shows links (Home, Dashboard, Settings). Buttons are non-functional (no JavaScript).
Fixed pages (hydrated): Same SSR output as the static fixed pages, plus client JavaScript that hydrates the app. Hamburger button toggles the navigation drawer. Links are clickable. This demonstrates the full SSR → hydration flow.

Next Step

Replace the skeleton SSR path with the real AppLayoutToolbar implementation during server rendering. The skeleton exists for client-side code splitting but is unnecessary during SSR where all code is available synchronously. Rendering the implementation directly eliminates the layout shift on hydration and removes duplicated rendering logic.