I want to fetch something from backend (using strapi) and I got an error that I am using client side. how can I check where is problem? I already removed every client side components but something is not right.

const fetchData = async () =>{
  const res = await fetch("http://localhost:1337/api/posts/b6ltz22at1vn0erynq80xz0b?populate=*")
  console.log(res)
  return res.json()
}

const  Blog =  async ( ) => {

await fetchData();


  return (
  
      <section className="gap blog-style-one our-blog-one">
        <div className="container">
          <div className="row">
          
          </div>
        </div>

        <div className="container" >
          <div className="row">
           
          </div>
        </div>
      </section>
    
  );
};
export default Blog;

The error is:

async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

I have tried to remove all imports, and also global search for 'use client'.

I want to fetch something from backend (using strapi) and I got an error that I am using client side. how can I check where is problem? I already removed every client side components but something is not right.

const fetchData = async () =>{
  const res = await fetch("http://localhost:1337/api/posts/b6ltz22at1vn0erynq80xz0b?populate=*")
  console.log(res)
  return res.json()
}

const  Blog =  async ( ) => {

await fetchData();


  return (
  
      <section className="gap blog-style-one our-blog-one">
        <div className="container">
          <div className="row">
          
          </div>
        </div>

        <div className="container" >
          <div className="row">
           
          </div>
        </div>
      </section>
    
  );
};
export default Blog;

The error is:

async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

I have tried to remove all imports, and also global search for 'use client'.

• next.js
• server-side-rendering
• next.js13
• strapi

1 Answer 1

In Next.js , when a Server Component (like your Blog function, which is async) is imported into a Client Component, Next.js treats it as a Client Component as well. Since async functions are not allowed in Client Components, this causes the error you’re seeing:

"async/await is not yet supported in Client Components, only Server Components."

How to Identify the Problem: The issue likely comes from where Blog is imported. To check, add console.log('client') in the file where Blog is imported. If it logs in the browser console, Blog is being used inside a Client Component, which causes Next.js to treat it as a client-side component.

How to Fix It: ✅ 1. Keep Blog as a Server Component If you want Blog to remain a Server Component, make sure it’s only imported inside other Server Components (files without "use client" at the top).

✅ 2. Move Fetch Logic to a Client Component If Blog must be used inside a Client Component, move the fetch logic elsewhere:

Use an API route (e.g., /api/posts) to fetch the data.

Use useEffect inside a Client Component:

   "use client";
   import { useEffect, useState } from "react";
   
   const Blog = () => {
     const [data, setData] = useState(null);
   
     useEffect(() => {
       fetch("http://localhost:1337/api/posts/b6ltz22at1vn0erynq80xz0b?populate=*")
         .then((res) => res.json())
         .then((data) => setData(data));
     }, []);
  
     return <section>{/* Render your data */}</section>;
   };
  
   export default Blog;

Consider using a library like React Query (TanStack Query) for better data fetching and caching.

✅ 3. Pass Data via Props Instead of fetching inside Blog, fetch the data in a parent Server Component and pass it down as props:

    const Blog = ({ data }) => {
      return <section>{/* Render data */}</section>;
    };
    
    const Parent = async () => {
      const res = await fetch("http://localhost:1337/api/posts/b6ltz22at1vn0erynq80xz0b?populate=*");
      const data = await res.json();
    
      return <Blog data={data} />;
    };
    export default Parent;

Why This Happens?

Your Blog function is a Server Component (it’s async and has no "use client" directive), but it's likely being imported inside a Client Component. In Next.js Server Components cannot exist inside Client Components, so Next.js forces Blog to become a Client Component, leading to this error.

Let me know if you need further clarification!