How I Managed SEO of Dynamic Content on the Store Page of My Glorafy Client Project

🌐 Why SEO Matters for Dynamic Web Apps

When building a web app or website that provides real utility, it must be discoverable by users on the internet. In short → it needs to show up in search engine results.

This process is Search Engine Optimization (SEO), and for my client project (Glorafy, a herbal hair products company), I achieved it using Next.js — specifically by focusing on rendering strategies that generate static pages + metadata for web crawlers.

---

🔍 Static Rendering & Server Components

• Static Site Generation (SSG) → Pages rendered at build time.
• Server Components used for SSG must not include React hooks or event handlers.
• If you need hooks or interactions → declare the file as a Client Component with "use client";.

This distinction is critical for SEO in modern React apps.

For Example: /authcontext.tsx

"use client";
import {createContext, useContext, useState, useEffect, ReactNode} from 'react'
import { AuthContextTypes } from './Auth.Context.types';
import axios from 'axios';


---

💡 My SEO Strategy for Glorafy

I divided the Store Page setup into three parts:

1️⃣ Client Component — Interactive Store Order System

• Handles cart updates, order placement, and user interaction.
• Written as a Client Component (uses hooks, state, etc.).

For Example: /Login.tsx

"use client";
import {useForm} from 'react-hook-form';
import { LoginCreds } from './Login.Creds.Types';
import axios from 'axios';
import UseAuth from '../Context/Auth.Context';
import { useRouter } from 'next/navigation';

2️⃣ CSS-Hidden Server Component — SEO Content Block

• A non-interactive store grid, rendered statically at build time.
• Injects SEO-friendly product content for crawlers.
• Wrapped inside a div with a CSS class like .seo-hidden → hidden visually, but still crawlable.

For Example: /Store.css

.SEO-hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -9999;
  opacity: 0;
}

3️⃣ Shared Single Stream Fetching — ISR (Incremental Static Regeneration)

• Used revalidate: 60 to fetch product data once.
• Shared data between the interactive and static components.
• Ensures fresh content + SEO metadata together.

For Example: Store/page.tsx

export default async function StorePage() {
const response = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/products/fetchMyProducts`
, {
    next: { revalidate: 60 },
  });

  const contentType = response.headers.get('content-type');
  if (!response.ok || !contentType?.includes('application/json')) {
    console.error("Invalid response from API", await response.text());
    throw new Error("Failed to load products");
  }

  const responseData = await response.json();
  const products = responseData.products;

    return (
        <>
         <div className="SEO-hidden">
      <ProductGrid products={products}/>
      </div>
      <OrderCartClientWrapper products={products}/>
        </>
    )
}
` 

---

✅ The Outcome

By combining these three techniques, I:

• Made my client’s products discoverable on search engines.
• Ensured a dynamic, interactive store experience for users.
• Solved the common issue of balancing SEO with modern frontend interactivity.

---

📌 Key Takeaways

• SEO in Next.js requires carefully mixing Server Components and Client Components.
• Use ISR to serve fresh data while still benefiting from static rendering.
• Hiding SEO content with CSS is a practical (and accepted) trick when paired with accessible metadata.

---

🤝 What Do You Think?

Have you ever had to balance SEO and dynamic content in a React/Next.js project?

How did you handle it?

Drop your approach in the comments 👇

---