From 311454ed1e63d680c345cdd59044dda63d51bebc Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Tue, 24 Feb 2026 18:17:38 +0100
Subject: [PATCH] perf: convert footer to server component

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%.
---
 src/components/Footer/GoToTopButton.tsx       | 26 +++++++++++++++++
 .../{Footer.tsx => Footer/index.tsx}          | 29 +++++--------------
 2 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Footer/GoToTopButton.tsx
 rename src/components/{Footer.tsx => Footer/index.tsx} (92%)

diff --git a/src/components/Footer/GoToTopButton.tsx b/src/components/Footer/GoToTopButton.tsx
new file mode 100644
index 00000000000..7aca839a7f8
--- /dev/null
+++ b/src/components/Footer/GoToTopButton.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { ChevronUp } from "lucide-react"
+
+import { Button } from "@/components/ui/buttons/Button"
+
+import { scrollIntoView } from "@/lib/utils/scrollIntoView"
+
+type GoToTopButtonProps = {
+  label: string
+}
+
+const GoToTopButton = ({ label }: GoToTopButtonProps) => {
+  return (
+    <Button
+      variant="outline"
+      isSecondary
+      onClick={() => scrollIntoView("body")}
+      data-testid="footer-go-to-top"
+    >
+      <ChevronUp /> {label}
+    </Button>
+  )
+}
+
+export default GoToTopButton
diff --git a/src/components/Footer.tsx b/src/components/Footer/index.tsx
similarity index 92%
rename from src/components/Footer.tsx
rename to src/components/Footer/index.tsx
index 608a9785faa..6564ef01804 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,6 +1,4 @@
-"use client"
-
-import { ChevronUp } from "lucide-react"
+import { getTranslations } from "next-intl/server"
 
 import type { FooterLink, FooterLinkSection } from "@/lib/types"
 
@@ -8,18 +6,14 @@ import Discord from "@/components/icons/discord.svg"
 import Farcaster from "@/components/icons/farcaster.svg"
 import Github from "@/components/icons/github.svg"
 import Twitter from "@/components/icons/twitter.svg"
-import Translation from "@/components/Translation"
+import { BaseLink } from "@/components/ui/Link"
+import { List, ListItem } from "@/components/ui/list"
 
 import { cn } from "@/lib/utils/cn"
-import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
 import { ENTERPRISE_ETHEREUM_URL } from "@/lib/constants"
 
-import { Button } from "./ui/buttons/Button"
-import { BaseLink } from "./ui/Link"
-import { List, ListItem } from "./ui/list"
-
-import { useTranslation } from "@/hooks/useTranslation"
+import GoToTopButton from "./GoToTopButton"
 
 const socialLinks = [
   {
@@ -48,8 +42,8 @@ type FooterProps = {
   lastDeployLocaleTimestamp: string
 }
 
-const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
-  const { t } = useTranslation("common")
+const Footer = async ({ lastDeployLocaleTimestamp }: FooterProps) => {
+  const t = await getTranslations("common")
 
   const linkSections: FooterLinkSection[] = [
     {
@@ -322,17 +316,10 @@ const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
     <footer className="px-4 py-4">
       <div className="flex flex-wrap items-center justify-center gap-8 border-t border-body-light px-4 py-4 md:justify-between">
         <p className="text-sm italic text-body-medium">
-          <Translation id="website-last-updated" />: {lastDeployLocaleTimestamp}
+          {t("website-last-updated")}: {lastDeployLocaleTimestamp}
         </p>
 
-        <Button
-          variant="outline"
-          isSecondary
-          onClick={() => scrollIntoView("body")}
-          data-testid="footer-go-to-top"
-        >
-          <ChevronUp /> <Translation id="go-to-top" />
-        </Button>
+        <GoToTopButton label={t("go-to-top")} />
       </div>
 
       <div className="px-4 py-4">