PageLayout.Header + PageLayout.Footer not rendered with SSG

[pveierland]

Description

When using PageLayout and server-side generation using next build + next export using Next.js v13.1.5 - PageLayout.Header and PageLayout.Footer are not rendered as part of SSG, and are only displayed when JavaScript is enabled on the client.

This behavior is disruptive as it can affect accessibility, layout shifts, and search engine visibility, as page titles may not be rendered without executing JavaScript.

The expected behavior would be that PageLayout.Header and PageLayout.Footer can be rendered using SSG in the same way as PageLayout.Content and PageLayout.Pane.

Steps to reproduce

Test 1

1. Create a page:

<PageLayout>
  <PageLayout.Header>
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content>
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane>
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer>
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

2. Render page using SSG.
3. View page in browser with JavaScript disabled.

Result: Content and Pane are visible. Header and Footer are not visible.
Expected: Header and Footer would also be visible.

Test 2

1. Create a page:

<PageLayout padding="none" rowGap="none" columnGap="none">
  <PageLayout.Header padding="normal" divider="line">
    <Placeholder label="Header" height={64} />
  </PageLayout.Header>
  <PageLayout.Content padding="normal">
    <Placeholder label="Content" height={240} />
  </PageLayout.Content>
  <PageLayout.Pane padding="normal" divider="line">
    <Placeholder label="Pane" height={120} />
  </PageLayout.Pane>
  <PageLayout.Footer padding="normal" divider="line">
    <Placeholder label="Footer" height={64} />
  </PageLayout.Footer>
</PageLayout>

2. Render page using SSG.
3. View page in browser with JavaScript disabled.

Result: Content and Pane are rendered. Header and Footer are not rendered. Dividers are not rendered.
Expected: Header + Footer + dividers would also be rendered.

Note

• Pane renders correctly on either side depending on position attribute.
• Render with NavList in Pane renders correctly.

Version

v35.18.0

Browser

Chrome, Firefox

[siddharthkp]

Hi!

Thanks for taking the time, this is indeed a bug. There is more context in this issue:

• Related: Slots doesn't support SSR yet [Batch] Improve slots implementation in PRC to enable React SSR compatibility & performance gain #1690

[joshblack]

I believe this was closed in: #3036

Let me know if that's not the case and we can re-open!