Next.js 15服务端Fetch报错：排查客户端组件误用问题

错误核心原因 #

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.

你遇到的问题本质是：你的Blog组件被Next.js判定为Client Component，但你在组件顶层使用了async/await——这是Client Component不允许的，只有Server Component支持顶层async/await。你已经排查了自身文件的'use client'标记，问题大概率出在导入链或环境配置上。

具体排查步骤 #

• 检查导入链中的'use client'标记
  全局搜索时别只局限于当前Blog组件文件，要检查所有导入Blog的父组件，以及这些父组件依赖的其他模块。只要导入链上任意一个文件添加了'use client'，整个组件树都会被标记为Client Component，哪怕你的Blog本身没加。比如如果你的page.js加了'use client'再导入Blog，那Blog也会被强制转为Client Component。

• 核查目录下的layout.js/page.js配置
  如果Blog组件在app目录下，检查同目录或父目录的layout.js、page.js是否带有'use client'。Next.js的app目录中，父组件的'use client'会向下传递，影响所有子组件的类型判定。

• 排查是否导入了客户端专属API
  哪怕没直接写'use client'，只要组件中导入了React客户端钩子（如useState、useEffect）、浏览器专属API（如window、document），或者依赖了带有'use client'标记的第三方库，Next.js会自动将组件标记为Client Component。检查你的Blog组件是否有这类直接或间接导入。

• 验证组件实际运行环境
  在Blog组件顶部添加一段仅Server Component能运行的代码测试：

  // 在Blog组件开头添加
  console.log(process.env.SERVER_SIDE_VAR); // 仅服务器环境能正常输出，客户端会报错
  

  如果运行时报错，说明组件确实在客户端运行，回到前面的步骤找原因；如果正常输出，可能是Next.js缓存问题，试试重启开发服务器。

针对你代码的修复方案 #

方案1：将组件转为Client Component（适合需要交互的场景）

明确标记组件为Client Component，把async/await移到useEffect中执行：

'use client';

import { useEffect, useState } from 'react';

const Blog = () => {
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("http://localhost:1337/api/posts/b6ltz22at1vn0erynq80xz0b?populate=*");
      const data = await res.json();
      setPosts(data);
    };
    fetchData();
  }, []);

  return (
    <section className="gap blog-style-one our-blog-one">
      <div className="container">
        <div className="row">
          {posts && posts.data && <div>{posts.data.title}</div>}
        </div>
      </div>
    </section>
  );
};

export default Blog;

方案2：确保组件为Server Component（适合无交互的静态场景）

• 移除所有客户端专属的导入（如useState、window相关代码）
• 确认导入链上没有任何'use client'标记
• 重启Next.js开发服务器，让框架重新识别组件类型

内容的提问来源于stack exchange，提问作者Matthew KK