PWA项目中如何实现SSR与客户端的条件式Async Await？

问题 #

我开发了一个PWA，服务端渲染（SSR）时需要等待API响应完成后，再构建并返回包含API返回数据的HTML-document；客户端则无需等待响应，可直接渲染加载动画等内容。

需要实现条件式await：

• 服务端执行：

await Promise.all([
  store.dispatch(fetchUser()),
  store.dispatch(fetchFriends()),
  store.dispatch(fetchPosts())
])

• 客户端执行：

Promise.all([
  store.dispatch(fetchUser()),
  store.dispatch(fetchFriends()),
  store.dispatch(fetchPosts())
])

不想在每个调用处重复写冗余的判断代码，尝试了以下封装函数但服务端的await未生效：

export default async function ssrAwait(promise): Promise<any> {
  if (isServer) {
    return await promise;
  } else {
    return promise;
  }
}

ssrAwait(Promise.all([
  store.dispatch(fetchUser()),
  store.dispatch(fetchFriends()),
  store.dispatch(fetchPosts())
]))

解决方案 #

你的封装函数核心逻辑没问题，但调用时未添加await，导致服务端并没有实际等待Promise完成。

优化后的封装函数 #

可以简化函数写法，同时在客户端主动捕获Promise异常避免报错：

export default function ssrAwait(promise) {
  if (isServer) {
    // 服务端返回Promise，外部通过await等待
    return promise;
  } else {
    // 客户端直接触发Promise执行，不等待结果
    promise.catch(err => console.error('API请求异常:', err));
    return undefined;
  }
}

统一调用方式 #

不管服务端还是客户端，统一添加await调用即可：

await ssrAwait(Promise.all([
  store.dispatch(fetchUser()),
  store.dispatch(fetchFriends()),
  store.dispatch(fetchPosts())
]))

问题原因说明 #

之前的调用未加await，即便函数内部return await promise，外部代码也不会等待Promise完成，导致服务端直接跳过等待逻辑继续执行后续代码。

额外提示 #

• 确保isServer变量能准确区分服务端/客户端环境（比如通过process.env.NODE_ENV或框架提供的全局标识）。
• 客户端添加错误捕获可以避免未处理的Promise异常导致控制台报错。

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