Skip to content

perf(app): make SiteHeader a server component with a client island - #49

Open
jdjioe5-cpu wants to merge 1 commit into
Kinlock-Org:mainfrom
jdjioe5-cpu:perf/site-header-server-component
Open

jdjioe5-cpu wants to merge 1 commit into
Kinlock-Org:mainfrom
jdjioe5-cpu:perf/site-header-server-component

Conversation

@jdjioe5-cpu

Copy link
Copy Markdown

Summary

Closes #41

Cuts first-load JavaScript on the root layout by refactoring `SiteHeader` into a Server Component with a dedicated, minimal client island:

  1. Server Component Transformation: Converted `components/nav/SiteHeader.tsx` into a Server Component (removed `"use client"`), rendering layout structure, brand lock icon with SVG mask definitions, and static external anchors (Docs and GitHub) directly as server HTML stream.
  2. Client Island Extraction: Created `components/nav/NavLinks.tsx` containing only the dynamic interactive hooks:
    • `DesktopNavLinks`: Uses `usePathname` for active link `aria-current="page"` highlighting.
    • `MobileMenu`: Handles mobile disclosure hamburger button, `open` state, route change auto-collapse, and `Escape` key dismissal with focus restoration to `toggleRef`.
  3. Accessibility & Behavior Preserved:
    • `motion-reduce:transition-none` transitions retained on active links and hamburger animation.
    • All ARIA attributes (`aria-expanded`, `aria-controls`, `aria-label`, `aria-current`) intact.
    • Full keyboard navigation and escape key dismissal verified.
  4. Performance Measurement: Documented before/after analysis in `docs/PERFORMANCE.md`.
  5. Roadmap Tracking: Updated `ROADMAP.md` to set `M3-18` to IN PROGRESS, recording Changelog and Last updated.

Hard rules touched

  • AGENTS.md §8.3 (mobile-first, fast load on slow connections, WCAG AA / reduced-motion preserved)
  • AGENTS.md §12 (ROADMAP.md updated with accurate changelog)

Verify output

```bash
$ pnpm lint
Checked 84 files in 21ms. No fixes applied.

$ pnpm typecheck
tsc --noEmit (exited with 0)

$ pnpm test
Test Files 15 passed (15)
Tests 168 passed (168)
Duration 739ms

$ pnpm build
▲ Next.js 16.3.8 (Turbopack)
✓ Compiled successfully in 443ms
✓ Generating static pages using 14 workers (6/6) in 424ms
```

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Cut first-load JavaScript: make SiteHeader a server component with a client island

2 participants