Next.js 14+ App Router中fetch API调用失败问题求助

核心问题分析 #

服务端组件中直接调用await getPosts()失败，但客户端用useEffect能成功，本质是服务端与客户端环境的请求配置差异导致的：

• 服务端环境无法解析WPGraphQL端点域名（比如本地开发时用localhost，但Node服务端容器无法访问）
• 请求缺少服务端环境需要的身份验证头（客户端请求会自动携带浏览器Cookie，服务端不会）
• getPosts函数中硬编码了客户端专属的变量（比如window.location，服务端无此对象）

具体修复方案 #

1. 修正getPosts函数的请求配置 #

用环境变量存储WPGraphQL端点，避免硬编码，同时配置服务端友好的缓存策略：

// lib/getPosts.js
export async function getPosts() {
  const res = await fetch(`${process.env.WORDPRESS_API_URL}/graphql`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 若WPGraphQL需要身份验证，添加对应头信息
      // 'Authorization': `Bearer ${process.env.WPGRAPHQL_API_KEY}`
    },
    body: JSON.stringify({
      query: `
        query GetPosts {
          posts {
            nodes {
              id
              title
              content
            }
          }
        }
      `
    }),
    // 自定义服务端缓存规则：每60秒重新验证一次数据
    next: { revalidate: 60 }
  });

  if (!res.ok) {
    throw new Error(`请求失败: ${res.status} ${res.statusText}`);
  }

  const data = await res.json();
  return data.data.posts.nodes;
}

2. 配置服务端可访问的环境变量 #

在项目根目录的.env.local中添加正确的端点地址：

WORDPRESS_API_URL=https://你的WordPress站点域名

注意：服务端组件可直接读取process.env变量，无需添加NEXT_PUBLIC_前缀。

3. 服务端组件中添加错误捕获与调试 #

在服务端组件里捕获错误，便于定位问题：

// app/posts/page.js（服务端组件）
import getPosts from '@/lib/getPosts';

export default async function PostsPage() {
  try {
    const posts = await getPosts();
    return (
      <div className="posts-list">
        {posts.map(post => (
          <article key={post.id}>
            <h2>{post.title}</h2>
            <div dangerouslySetInnerHTML={{ __html: post.content }} />
          </article>
        ))}
      </div>
    );
  } catch (error) {
    console.error('获取文章失败:', error);
    return <div>加载失败，请稍后重试</div>;
  }
}

4. 自定义服务端缓存策略 #

根据需求调整缓存规则：

• next: { revalidate: 3600 }：每小时自动刷新数据
• next: { tags: ['posts'] }：添加缓存标签，后续可通过revalidateTag('posts')主动触发刷新
• next: { revalidate: 0 }：禁用缓存，每次请求获取最新数据

常见避坑点 #

• 服务端组件中禁止使用window、document等浏览器专属API
• 若WordPress站点有IP限制，需允许Next.js服务端的IP访问
• 本地开发时，若WordPress用HTTPS，可临时在fetch中添加{ rejectUnauthorized: false }跳过证书验证（仅开发环境使用）

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