Skip to content

perf: convert footer to server component#17650

Merged
wackerow merged 1 commit into
devfrom
perf/footer-server-component
Feb 25, 2026
Merged

perf: convert footer to server component#17650
wackerow merged 1 commit into
devfrom
perf/footer-server-component

Conversation

@pettinarip
Copy link
Copy Markdown
Member

@pettinarip pettinarip commented Feb 24, 2026

Summary

  • Convert Footer from client component to async server component
  • Extract interactive "go to top" button into tiny client component (GoToTopButton.tsx)
  • Use getTranslations from next-intl/server instead of client-side useTranslation hook
  • Reduces client JS hydration by ~95% (only 26-line button component needs hydration)

Why

The Footer was marked as "use client" only because:

  1. It used the useTranslation hook (client-side)
  2. It had one onClick handler for the "go to top" button

This meant ~400 lines of static content (links, text) were being hydrated unnecessarily.

Changes

File Description
src/components/Footer/index.tsx Server component using getTranslations
src/components/Footer/GoToTopButton.tsx Small client component for interactivity
src/components/Footer.tsx Deleted (replaced by above)

Test plan

  • Verify footer renders correctly on all pages
  • Verify "go to top" button works
  • Verify translations load correctly
  • Check no hydration errors in console

Extract interactive "go to top" button into tiny client component,
convert main Footer to async server component using getTranslations.
Reduces client JS hydration by ~95%.
@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 24, 2026

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 311454e
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/699ddd550a9f870008667976
😎 Deploy Preview https://deploy-preview-17650.ethereum.it
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 56 (🔴 down 4 from production)
Accessibility: 94 (🟢 up 1 from production)
Best Practices: 100 (no change from production)
SEO: 99 (no change from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown
Member

@wackerow wackerow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉
Lgtm, only tiny suggestion would be to consider just using children prop instead of label but just semantic

@wackerow wackerow merged commit 1de308d into dev Feb 25, 2026
8 checks passed
@wackerow wackerow deleted the perf/footer-server-component branch February 25, 2026 17:33
@pettinarip pettinarip mentioned this pull request Feb 27, 2026
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.

2 participants