Hey everyone, I need some help with a Next.js + Supabase SEO issue

I’m currently working on an SEO-oriented website using the following stack:

Next.js (App Router)

Supabase for backend + CMS

The Problem

Because the website is business/SEO focused, Google crawling and indexing is very important.

Initially, I was fetching data from Supabase inside client components using useEffect.
To do that, I had to mark those components with "use client".

Issue with this approach:

Data is fetched after hydration

Google crawler can’t read the content properly

SEO suffers

What I Tried (Server Component Approach)

To fix SEO, I changed my approach:

Fetch data in the parent server component

Pass that data as props to child components

Avoid useEffect

Keep child components as server components

This works great for SEO Google can read the content properly

New Problem (CMS + Fresh Data)

I also built a CMS using Supabase.

Here’s the issue now:

When the site is deployed, existing database data shows correctly But when I add or update content via the CMS, the changes do NOT reflect on the live website

This happens because:

Server components are cached

Data is not revalidated automatically

Because of this, I’m forced to move back to client components, which again hurts SEO 😞

What I’m Looking For :

I need guidance on:

Best practice for SEO-friendly data fetching in Next.js

How to handle CMS updates with server components

Correct usage of SSR / SSG / ISR / revalidation

How to keep data fresh without breaking SEO

If anyone has faced this before or knows the right architectural approach, I’d really appreciate your help