perf: convert Hero to server component for faster LCP
All checks were successful
Gitea CI / test-build (push) Successful in 11m9s

- Hero now renders server-side, eliminating JS dependency for LCP text
- CMS messages fetched server-side instead of client useEffect
- Removes Hero from client JS bundle (~5KB less)
- LCP element (hero paragraph) now in initial HTML response
- Eliminates 2,380ms 'element rendering delay' reported by PSI

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-03-04 14:16:58 +01:00
parent 60ea4e99be
commit 9fd530c68f
5 changed files with 30 additions and 57 deletions

View File

@@ -41,7 +41,7 @@ export default function HomePage() {
{/* Spacer to prevent navbar overlap */}
<div className="h-16 sm:h-24 md:h-32" aria-hidden="true"></div>
<main className="relative">
<Hero />
<Hero locale="en" />
{/* Wavy Separator 1 - Hero to About */}
<div className="relative h-12 sm:h-16 md:h-24 overflow-hidden">

View File

@@ -1,14 +1,13 @@
import Header from "../components/Header.server";
import Hero from "../components/Hero";
import Script from "next/script";
import {
getHeroTranslations,
getAboutTranslations,
getProjectsTranslations,
getContactTranslations,
getFooterTranslations,
} from "@/lib/translations-loader";
import {
HeroClient,
AboutClient,
ProjectsClient,
ContactClient,
@@ -20,9 +19,8 @@ interface HomePageServerProps {
}
export default async function HomePageServer({ locale }: HomePageServerProps) {
// Parallel laden aller Translations
const [heroT, aboutT, projectsT, contactT, footerT] = await Promise.all([
getHeroTranslations(locale),
// Parallel laden aller Translations (hero translations handled by Hero server component)
const [aboutT, projectsT, contactT, footerT] = await Promise.all([
getAboutTranslations(locale),
getProjectsTranslations(locale),
getContactTranslations(locale),
@@ -57,7 +55,7 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
{/* Spacer to prevent navbar overlap */}
<div className="h-24 md:h-32" aria-hidden="true"></div>
<main className="relative">
<HeroClient locale={locale} translations={heroT} />
<Hero locale={locale} />
{/* Wavy Separator 1 - Hero to About */}
<div className="relative h-24 overflow-hidden">