ng/feat/landing-page/optimize

[nazar-gavrylyk]

Description

Optimizes the homepage bundle by moving below-the-fold sections out of the critical render path and trimming a couple of unused leftovers found along the way.

• FeaturesHeroSection and Footer are now code-split via next/dynamic (LazyFeaturesHeroSection / LazyFooter) instead of being statically imported into the page.tsx, so their JS no longer competes with the above-the-fold WelcomeHeroSection for the initial bundle.
• FeaturesHeroSection is converted from a client component (useTranslations) to an async server component (getTranslations), since it has no interactivity of its own — only its children (FlipCardQA, FloatingCode) genuinely need to be client components.
• Removed an unused isFirstRender state/effect in InteractiveCTAButton and an unused React import in WelcomeHeroBackground.

Changes

• Lazy-load FeaturesHeroSection and Footer on the homepage via next/dynamic
• Convert FeaturesHeroSection to an async server component using getTranslations instead of useTranslations
• Remove unused isFirstRender state/effect from InteractiveCTAButton
• Remove unused React import from WelcomeHeroBackground

How Has This Been Tested?

• Tested locally
• Verified in development environment
• Checked responsive layout (if UI-related)
• Tested accessibility (keyboard/screen reader)

Checklist

Before submitting

• Code has been self-reviewed
• No TypeScript or console errors
• Code follows project conventions
• Scope is limited to this feature/fix
• No unrelated refactors included
• English used in code, commits, and docs
• New dependencies discussed with team
• Database migration tested locally (if applicable)
• GitHub Projects card moved to In Review

---

Reviewers

@ViktorSvertoka

Summary by CodeRabbit

• Performance

  • Improved homepage loading by deferring footer content until it approaches the visible area.
  • Enhanced delivery of the Features section through server-rendered content.

• Refactor

  • Simplified homepage rendering and removed unused interaction logic.
  • Preserved existing visual content and interactive behavior while streamlining page delivery.

[vercel]

@nazar-gavrylyk is attempting to deploy a commit to the DevLovers Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 6700ae3c-b9cf-4143-8740-483f792c5700

📥 Commits

Reviewing files that changed from the base of the PR and between 23faae4 and 5a1c817.

📒 Files selected for processing (1)

• frontend/components/shared/LazyFooter.tsx

---

📝 Walkthrough

Walkthrough

The homepage now retrieves feature translations on the server, renders the features section within Suspense, and lazy-loads the footer. Unused first-render state, its mount effect, and an unused React import were removed.

Changes

Homepage rendering

Layer / File(s)	Summary
Server-rendered features hero frontend/components/home/FeaturesHeroSection.tsx	FeaturesHeroSection now uses an async server-side translation lookup.
Lazy homepage component loading frontend/app/[locale]/page.tsx, frontend/components/shared/LazyFooter.tsx	The features section uses Suspense, and the footer loads through LazyFooter with forceVisible preserved.
Home component cleanup frontend/components/home/InteractiveCTAButton.tsx, frontend/components/home/WelcomeHeroBackground.tsx	Removed unused first-render state, its mount effect, and an unnecessary React import.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 5a1c8

The homepage optimization is localized to code-splitting and cleanup, and no actionable merge-blocking risk remains; the PR is merge-ready after normal checks.

Possibly related PRs

• DevLoversTeam/devlovers.net#270: Also modified InteractiveCTAButton and footer integration.
• DevLoversTeam/devlovers.net#278: Also modified InteractiveCTAButton and footer rendering.
• DevLoversTeam/devlovers.net#326: Modified homepage composition and hero integration.

Suggested labels: performance

Suggested reviewers: viktorsvertoka, am1007, lesiaukr

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title suggests landing-page optimization but uses a vague branch-style label instead of a clear summary of the homepage bundle changes.	Replace the branch-style label with a concise title such as "Optimize homepage loading with lazy-loaded below-the-fold content".

✅ Passed checks (4 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/app/`[locale]/page.tsx:
- Around line 1-10: Replace the next/dynamic boundaries in the page’s
LazyFeaturesHeroSection and LazyFooter declarations with a client-side wrapper
or Suspense/viewport-based boundary that actually defers the Footer client
bundle and rendering as intended; keep server rendering behavior correct for
FeaturesHeroSection. Validate the resulting production RSC behavior and client
bundle output.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 05fc42f9-b62e-4c3f-9855-a8793f52b8fb

📥 Commits

Reviewing files that changed from the base of the PR and between 2af84b2 and 1fbc90b.

📒 Files selected for processing (4)

• frontend/app/[locale]/page.tsx
• frontend/components/home/FeaturesHeroSection.tsx
• frontend/components/home/InteractiveCTAButton.tsx
• frontend/components/home/WelcomeHeroBackground.tsx

💤 Files with no reviewable changes (2)

• frontend/components/home/WelcomeHeroBackground.tsx
• frontend/components/home/InteractiveCTAButton.tsx

[ViktorSvertoka]

The Server Component conversion and cleanup changes look good. However, LazyFooter is rendered unconditionally, so according to Next.js behavior it loads immediately in a separate client bundle rather than being deferred until the footer is needed. Suspense also enables streaming but does not make the Features section viewport-lazy. Please either add a viewport/scroll-based rendering boundary or adjust the PR claims and provide before/after bundle measurements. A successful preview/build is also required before approval.

[nazar-gavrylyk]

The Server Component conversion and cleanup changes look good. However, LazyFooter is rendered unconditionally, so according to Next.js behavior it loads immediately in a separate client bundle rather than being deferred until the footer is needed. Suspense also enables streaming but does not make the Features section viewport-lazy. Please either add a viewport/scroll-based rendering boundary or adjust the PR claims and provide before/after bundle measurements. A successful preview/build is also required before approval.

Addressed the footer point with a real fix, and here is the context on the rest:

Footer eagerness (fixed, 5a1c817): LazyFooter was rendered unconditionally, so next/dynamic fetched its chunk on mount regardless of scroll position, same as you flagged. Added an IntersectionObserver sentinel (rootMargin: 300px) so the Footer chunk is now only requested once the user scrolls near it, instead of on initial mount.

Features/Suspense claim: You're right that Suspense here doesn't make the section viewport-lazy, it enables SSR streaming for the newly-converted Server Component (removes it from the client bundle). That's an intentional, separate win, not a viewport-deferral claim. Correcting the PR description so it doesn't conflate the two.

Bundle measurements: checked LazyFooter.tsx's own size via next experimental-analyze before/after, it actually grew (454 B => 1.14 KB uncompressed) from the observer logic, which is expected and not the relevant metric. The actual change is when the Footer chunk is fetched (on scroll proximity vs. immediately), which shows up as network timing, not module size.

Build: npm run build passes locally; pushed so the Netlify deploy preview can confirm too.