perf(frontend): Convert home page to Server Component for SSR support
- 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
Assessment
This issue has not been assessed yet.