javascript - NextJS 从服务器端调用执行代码客户端

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都是初始化的客户端。

完整的代码库在这里

标签： javascriptreactjsnext.js

Answer 1

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