Next JS 从服务器端调用执行代码客户端

Question

我目前正在使用getStaticProps 在构建时获取服务器端数据，并将其传递给我的页面组件。我从页面组件文件中进行了以下调用：

    const getStaticProps: GetStaticProps = async (context) => {
        const page = await fetchPage({
            preview: context.preview,
            slug: context.params.slug.toString(),
        });

        return { props: { page: stringify(page) } };
    };

这（由console.log(typeof window) 验证）在服务器端正确执行。同样，fetchPage 调用是服务器端的。

const fetchPage = async ({
      preview,
      id,
      slug,
    }: FetchEntryOptions): Promise<Entry<Contentful.IPageFields>> => {
      const contentfulClient = preview
        ? contentfulPreviewApiClient
        : contentfulDeliveryApiClient;
   
      let page: Entry<Contentful.IPageFields>;
   
      if (id) {
        page = await contentfulClient.getEntry(id);
      } else {
        const pageCollection: EntryCollection<Contentful.IPageFields> = await contentfulClient.getE      ntries(
          {
            content_type: "page",
            "fields.slug": slug,
          }
        );
   
   page = pageCollection.items?.[0];
  }
  
  return page;
};

但是，contentfulPreviewApiClient 和 contentfulDeliveryApiClient 都是初始化的客户端。

完整代码库here

Answer 1

奇怪的怪癖：声明一个常量 getStaticProps 函数，然后用语法 export {getStaticProps} 导出它会导致这种情况，而语法 export const getStaticProps = ... 不会。不知道为什么。