OWASP / OWASP/Nest

perf(frontend): Convert home page to Server Component for SSR support

Open
#4,037 3 comments 0 reactions 1 assignee Claimed by @mddanishh18 View on GitHub
bug enhancement
Dominant language
Python
Stars
451
Forks
707
Avg merge
22h 59m
Merged PRs (30d)
91

Description

**Describe the bug**
The home page ([src/app/page.tsx](cci:7://file:///c:/Users/mddan/OneDrive/Desktop/OWASP/OWASP-nest/frontend/src/app/page.tsx:0:0-0:0)) is currently a Client Component (`'use client'`). This forces GraphQL and Algolia data fetches to happen client-side, causing a loading waterfall and preventing Server-Side Rendering (SSR). This negatively impacts SEO and performance.

**To Reproduce**
Steps to reproduce the behavior:
1. Open [src/app/page.tsx](cci:7://file:///c:/Users/mddan/OneDrive/Desktop/OWASP/OWASP-nest/frontend/src/app/page.tsx:0:0-0:0).
2. Observe `'use client'` at the top of the file.
3. Observe data being fetched via `useQuery` and `useEffect` hooks.

**Expected behavior**
The home page should be an `async` Server Component to pre-fetch data on the server. Interactive elements should be moved to a separate client boundary ([HomePageClient.tsx](cci:7://file:///c:/Users/mddan/OneDrive/Desktop/OWASP/OWASP-nest/frontend/src/app/HomePageClient.tsx:0:0-0:0)).

**Are you going to work on fixing this?**
- [x] Yes
- [ ] No

**Additional context**
I have implemented the fix by:
1. Rewriting [src/app/page.tsx](cci:7://file:///c:/Users/mddan/OneDrive/Desktop/OWASP/OWASP-nest/frontend/src/app/page.tsx:0:0-0:0) as a Server Component performing parallel fetches.
2. Extracting interactive logic to [src/app/HomePageClient.tsx](cci:7://file:///c:/Users/mddan/OneDrive/Desktop/OWASP/OWASP-nest/frontend/src/app/HomePageClient.tsx:0:0-0:0).
3. Adding [src/app/loading.tsx](cci:7://file:///c:/Users/mddan/OneDrive/Desktop/OWASP/OWASP-nest/frontend/src/app/loading.tsx:0:0-0:0) for the idiomatic Next.js loading state.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.