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 loading until needed.
  • 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: 80178177-f536-4e82-8ce1-a9cdf56e7b4c

📥 Commits

Reviewing files that changed from the base of the PR and between 1fbc90b and 23faae4.

📒 Files selected for processing (2)

• frontend/app/[locale]/page.tsx
• 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 next/dynamic 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

Possibly related PRs

• DevLoversTeam/devlovers.net#270: Introduced the CTA first-render state and effect removed here.
• DevLoversTeam/devlovers.net#278: Also modified the CTA first-render state and effect.
• DevLoversTeam/devlovers.net#326: Changed homepage composition and features hero integration.

Suggested reviewers: am1007, viktorsvertoka, lesiaukr

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title indicates optimization but does not identify the homepage bundle or below-the-fold lazy-loading changes.	Use a descriptive title such as "Optimize homepage rendering with lazy-loaded below-the-fold content."

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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.

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