Make header/footer server side rendered for better SEO

[damianlegawiec]

Summary by CodeRabbit

Release Notes

• New Features

  • Added shopping cart button to the header displaying item count.
  • Implemented improved search overlay with enhanced keyboard navigation and accessibility features.

• Improvements

  • Footer now dynamically displays product categories with proper navigation links.
  • Optimized header layout structure for better component composition and routing context.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
storefront	Ready	Preview, Comment	Apr 2, 2026 11:07am

[coderabbitai]

Walkthrough

The PR refactors the StorefrontLayout to pass basePath and rootCategories props down to Header and Footer components. Header and Footer are redesigned to accept props instead of managing their own routing context. New SearchToggle and CartButton components extract search overlay and cart button logic respectively.

Changes

Cohort / File(s)	Summary
Layout setup src/app/[country]/[locale]/(storefront)/layout.tsx	StorefrontLayout now passes basePath and rootCategories props to Header and Footer components.
Header refactor src/components/layout/Header.tsx, src/components/layout/SearchToggle.tsx	Header delegates search overlay management to new SearchToggle component and removes client-side state. SearchToggle manages search visibility, keyboard handling, and search bar rendering with configurable slot-based layout.
Footer conversion src/components/layout/Footer.tsx	Footer removed "use client" declaration and client-side hooks. Now accepts rootCategories and basePath as props, dynamically renders category links, and reads store branding from environment variables.
Cart extraction src/components/layout/CartButton.tsx	New CartButton component created to render a shopping bag icon button that opens the cart drawer, consuming cart state from CartContext.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Add store policies pages and consent checkboxes #85 — Modifies Footer basePath/routing handling and policy link generation, directly related to Footer prop changes in this PR.
• Add mobile-responsive header with hamburger menu #77 — Updates Header and layout component structure with basePath/rootCategories prop passing and multi-level category navigation, overlaps with Header refactoring.
• Fix/categories menu #93 — Changes StorefrontLayout rendering logic around category list selection, affects the same layout file being modified here.

Poem

🐰 Components scattered, now they gather 'round,
Props flow downward like clover on the ground,
Search finds a wrapper, cart a button true,
Server-side Footer, no context to construe—
Structure refined, the layout's anew! 🌿

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main objective: refactoring header and footer components to be server-side rendered for SEO improvements, which aligns with the changeset's removal of client directives and context dependencies from these layout components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/ssr-layout

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/layout/Header.tsx (1)

25-32: Consider adding placeholder and blurDataURL for image optimization.

Per coding guidelines, the Image component should include placeholder='blur' and blurDataURL for optimization. For a static logo like /spree.png, you could generate a base64 blur placeholder or use placeholder="empty" if a blur effect isn't desired.

🔧 Optional: Add placeholder for logo

 <Image
   src="/spree.png"
   alt={storeName}
   width={90}
   height={32}
   className="h-8 w-auto max-w-full object-contain"
   priority
+  placeholder="empty"
 />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/layout/Header.tsx` around lines 25 - 32, The Image component
rendering the logo in Header.tsx should include an explicit placeholder and blur
data to follow the optimization guideline: update the <Image ... /> props (the
Image element in Header.tsx) to add placeholder="blur" and a blurDataURL
containing a small base64-encoded SVG/PNG for the /spree.png logo (or if you
prefer no blur, set placeholder="empty"); ensure the new props are passed
alongside src, alt, width, height, className, and priority so the logo uses
Next/Image built-in placeholder behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/layout/Footer.tsx`:
- Around line 103-109: The external Link in the Footer component (the Link with
href="https://spreecommerce.org") opens in a new tab using target="_blank" but
lacks rel="noreferrer"; update that Link element in
src/components/layout/Footer.tsx to include rel="noreferrer" (you may also
include "noopener" as "rel=\"noopener noreferrer\"" for broader compatibility)
so the external link is protected from window.opener-related vulnerabilities.

---

Nitpick comments:
In `@src/components/layout/Header.tsx`:
- Around line 25-32: The Image component rendering the logo in Header.tsx should
include an explicit placeholder and blur data to follow the optimization
guideline: update the <Image ... /> props (the Image element in Header.tsx) to
add placeholder="blur" and a blurDataURL containing a small base64-encoded
SVG/PNG for the /spree.png logo (or if you prefer no blur, set
placeholder="empty"); ensure the new props are passed alongside src, alt, width,
height, className, and priority so the logo uses Next/Image built-in placeholder
behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5001ab79-279a-4506-a84b-d278eeaa3e9b

📥 Commits

Reviewing files that changed from the base of the PR and between 24649b7 and b851f66.

📒 Files selected for processing (5)

• src/app/[country]/[locale]/(storefront)/layout.tsx
• src/components/layout/CartButton.tsx
• src/components/layout/Footer.tsx
• src/components/layout/Header.tsx
• src/components/layout/SearchToggle.tsx