NextJS静态渲染页面后如何加载用户专属权限数据？

你的核心需求是：静态渲染通用文章内容，再异步加载用户权限数据来展示锁图标，避免整页客户端化、避免重复请求全量数据。以下是几种适配Relay/GraphQL的通用模式：

方案1：拆分GraphQL查询，服务器组件渲染静态内容+客户端组件单独请求权限数据集 #

这是最直接的方案，核心是把整页Query拆成两个独立查询：

• 服务器端（getStaticProps或App Router服务器组件）：仅请求所有用户通用的文章基础数据（标题、摘要、发布时间等），完成静态渲染。
• 客户端组件：仅请求当前用户对所有文章的权限状态（比如articleId + hasAccess字段），不需要重复请求基础数据。

代码示例（Pages Router） #

// 服务器端静态查询：仅获取通用基础数据
const StaticArticleQuery = graphql`
  query StaticArticlePageQuery {
    articles {
      id
      title
      excerpt
      publishDate
    }
  }
`;

export const getStaticProps = async () => {
  const data = await fetchQuery(environment, StaticArticleQuery, {});
  return { props: { staticArticles: data.articles } };
};

// 页面组件：服务器渲染静态内容，嵌套客户端组件处理权限
const ArticlePage = ({ staticArticles }) => {
  return (
    <div className="article-list">
      {staticArticles.map(article => (
        <ArticleItem key={article.id} article={article} />
      ))}
    </div>
  );
};

// 客户端组件：仅请求权限数据，渲染锁图标
'use client';
const ArticleItem = ({ article }) => {
  // 推荐批量传入所有articleId，一次请求搞定所有权限
  const { data } = useQuery(ArticlePermissionQuery, {
    variables: { articleIds: [article.id] }
  });

  const hasAccess = data?.articlePermissions?.find(p => p.id === article.id)?.hasAccess;

  return (
    <div className="article-item">
      <h3>{article.title}</h3>
      <p>{article.excerpt}</p>
      {!hasAccess && <LockIcon />}
    </div>
  );
};

// 客户端权限查询：仅获取必要的权限字段
const ArticlePermissionQuery = graphql`
  query ArticlePermissionQuery($articleIds: [ID!]!) {
    articlePermissions(ids: $articleIds) {
      id
      hasAccess
    }
  }
`;

优势 #

• 页面主体保持静态渲染，SEO友好，首屏加载快。
• 客户端仅请求极小的权限数据集，避免重复加载全量文章数据。
• 无需整页设为客户端组件，仅子组件客户端化，性能影响最小。

方案2：App Router下的服务器组件+客户端组件组合（Next13+推荐） #

如果用Next13+的App Router，页面默认是服务器组件，可以直接在服务器端获取静态数据，然后嵌套客户端组件处理权限逻辑：

// app/articles/page.js（服务器组件）
import ArticleItem from './ArticleItem';

const StaticArticleQuery = graphql`
  query AppStaticArticleQuery {
    articles {
      id
      title
      excerpt
      publishDate
    }
  }
`;

export default async function ArticlesPage() {
  const staticArticles = await fetchQuery(environment, StaticArticleQuery, {});
  
  return (
    <div className="article-list">
      {staticArticles.articles.map(article => (
        <ArticleItem key={article.id} article={article} />
      ))}
    </div>
  );
}

// app/articles/ArticleItem.js（客户端组件）
'use client';
import { useQuery } from 'react-relay';

// 可优化为批量查询：在父客户端组件一次性请求所有文章权限，再分发到子组件
const ArticlePermissionQuery = graphql`
  query ArticleItemPermissionQuery($articleId: ID!) {
    articlePermission(id: $articleId) {
      hasAccess
    }
  }
`;

export default function ArticleItem({ article }) {
  const { data } = useQuery(ArticlePermissionQuery, {
    variables: { articleId: article.id }
  });

  return (
    <div className="article-item">
      <h3>{article.title}</h3>
      <p>{article.excerpt}</p>
      {data?.articlePermission?.hasAccess === false && <LockIcon />}
    </div>
  );
}

优化点 #

• 把客户端的权限查询改为批量请求：在父客户端组件中一次性传入所有文章ID，只发起一次GraphQL请求，再把权限数据分发给子组件，避免多个子组件重复请求。

方案3：利用Relay的初始缓存，复用静态数据+补充权限字段 #

如果不想拆分Query，可以利用Relay的缓存机制，把服务器端获取的静态数据作为初始缓存，客户端仅请求缺失的权限字段：

// 服务器端获取全量字段（权限字段返回默认值）
const FullArticleQuery = graphql`
  query FullArticlePageQuery {
    articles {
      id
      title
      excerpt
      publishDate
      hasAccess # 服务器端返回null或默认值
    }
  }
`;

export const getStaticProps = async () => {
  const data = await fetchQuery(environment, FullArticleQuery, {});
  // 将静态数据作为Relay初始缓存传入客户端
  const initialRecords = environment.getStore().getSource().toJSON();
  return { props: { initialRecords, staticArticles: data.articles } };
};

// 页面组件：初始化Relay缓存，客户端查询补充真实权限
'use client';
const ArticlePage = ({ initialRecords, staticArticles }) => {
  // 初始化Relay环境时注入初始缓存
  const environment = useRelayEnvironment(initialRecords);
  
  // 客户端查询仅请求hasAccess字段，Relay自动合并已有基础数据
  const { data } = useQuery(FullArticleQuery, {
    fetchPolicy: 'network-only' // 确保请求最新权限
  });

  const articles = data?.articles || staticArticles;

  return (
    <div className="article-list">
      {articles.map(article => (
        <div key={article.id}>
          <h3>{article.title}</h3>
          {!article.hasAccess && <LockIcon />}
        </div>
      ))}
    </div>
  );
};

注意点 #

• 需要确保Relay初始缓存正确注入，客户端查询时会自动合并已有数据，仅请求差异字段。
• 这种方式页面仍需客户端化，但相比原始方案，不会重复加载全量基础数据，仅补充权限字段。

总结推荐 #

优先选择方案1或方案2，既能保持页面主体的静态渲染优势，又能最小化客户端请求量，同时避免整页客户端化的性能问题。如果必须使用单个Query，再考虑方案3。

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