Next.js搭建Shopify电商时如何实现仅服务端可用的全局状态？

首先明确结论：Recoil属于客户端状态管理工具，无法实现仅服务端可用的全局状态，且你的全静态生成场景完全不需要引入这类状态管理工具，有更轻量、更适配的实现方案。

最适配场景的实现方式 #

因为你所有页面都采用静态生成，getStaticProps 仅在构建阶段的Node服务端执行，你可以直接通过模块级全局缓存实现一次拉取、全页面复用，具体实现如下：

1. 封装带缓存的Shopify商品拉取工具函数，示例代码：

// lib/shopify.js
// 模块级变量用于缓存全量商品数据
let cachedAllProducts = null;

async function fetchAllProductsFromShopify() {
  // 此处替换为你自己的Shopify GraphQL/REST API调用逻辑
  const res = await fetch("你的Shopify API接口地址", {
    method: "POST",
    headers: { "X-Shopify-Access-Token": "你的访问令牌" },
    body: JSON.stringify({ query: `query { products(first: 3000) { edges { node { id title handle tags priceRange } } } }` })
  });
  const { data } = await res.json();
  return data.products.edges.map(edge => edge.node);
}

export async function getAllProducts() {
  // 已有缓存直接返回，不重复发请求
  if (cachedAllProducts) return cachedAllProducts;
  cachedAllProducts = await fetchAllProductsFromShopify();
  return cachedAllProducts;
}

2. 所有页面的getStaticProps直接调用上述getAllProducts函数即可：
   • 构建时第一次调用会发起API请求拉取全量3000件商品数据
   • 后续所有页面的getStaticProps调用都会直接返回缓存的数据，不会重复发起请求
   • 缓存仅存在于构建阶段的Node进程中，完全不会泄露到客户端，符合你的要求

为什么不推荐用Recoil这类工具 #

Recoil、Redux等状态管理库都是为客户端运行时设计的，在服务端构建/渲染阶段使用会存在状态交叉污染的风险，且完全没有必要额外引入依赖增加项目复杂度。

补充适配场景 #

如果你后续开启了增量静态再生成（ISR）需要运行时更新数据，可以用Next.js内置的cache函数（Next 13+正式稳定）封装拉取逻辑，即可实现带过期时间的服务端全局缓存，不需要调整业务层调用逻辑。

内容的提问来源于stack exchange，提问作者L. Heider