How I Managed SEO of Dynamic Content on the Store Page of My Glorafy Client Project
When it comes to building web apps or websites that serve a purpose or offer utility, visibility matters — especially in search engines. That's where Search Engine Optimization (SEO) comes in. For the Glorafy project — a herbal hair product store — I had to find a way to balance dynamic interactivity with static SEO metadata.
🔍 Understanding Static Rendering and Server Components
In Next.js, server components rendered during the build (aka Static Site Generation) must not contain React hooks or interactive code. If a component uses hooks, it must be declared a "e;use client"e; component.
💡 My Strategy for Glorafy
To solve SEO for the Store page, I broke the architecture into 3 parts:
- Client Component (Interactive Store Order System): Handles user input, cart, and dynamic interaction — fully client-rendered.
- CSS-Hidden Server Component (SEO Block): A static, non-interactive grid rendered at build time, visually hidden with CSS, but crawlable for search engines.
- Shared Fetch via ISR: I used
revalidate: 60to fetch product data using ISR and serve it to both components, ensuring dynamic freshness and static SEO at the same time.
✅ The Outcome
This hybrid strategy gave Glorafy:
- 📈 Improved SEO visibility of product listings
- ⚡ Fast load times via static rendering
- 🔁 Up-to-date content using ISR
- 🛒 Smooth client-side UX for shopping
If you're working on a Next.js project that needs both SEO and interactivity — this strategy can bridge the gap without losing performance.