NextJS excecuting code client-side from server-side call

Question

I am currently using getStaticProps to fetch data server-side at build time, and pass it to my page component. I make the following call from the page component file:

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

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

This (as validated by console.log(typeof window) ) is correctly executed server-side. Likewise, the fetchPage call is server-side.

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;
};

However, contentfulPreviewApiClient and contentfulDeliveryApiClient are both initialized client side.

Full codebase here

Answer 1

So wierd quirk: Declaring a constant getStaticProps function, then exporting it with the syntax export {getStaticProps} leads to this, while the syntax export const getStaticProps =... does not. No idea why.