Discussion on strange page loading behavior in a NextJS project with dynamic imports and getStaticProps.

export async function getStaticProps ({ preview = false, previewData, params }) {
  const { slug } = params
  const pageData = await getStaticPage(
    last(slug),
    {
      active: preview,
      token: previewData?.token
    }
  )

  let subscriptionProductData = null
  const product = get(pageData, 'page.product', false)

  if (product) {
    subscriptionProductData = await getSellingPlans(product.handle)
    if (subscriptionProductData) {
      pageData.page.subscriptions = subscriptionProductData
    }
  }

...

import { useMemo } from 'react'
import forEach from 'lodash/forEach'
import ErrorBoundary from '../ErrorBoundary'
import dynamic from 'next/dynamic'

const ProductHero = dynamic(() => import('./ProductHero'))
const ShopGrid = dynamic(() => import('./ShopGrid'))
const AdditionalInfoSlice = dynamic(() => import('./AdditionalInfoSlice'))
const ReviewsSlice = dynamic(() => import('./ReviewsSlice'))
const TextColumnsSlice = dynamic(() => import('./TextColumnsSlice'))
const PagePreviewSlice = dynamic(() => import('./PagePreviewSlice'))

const sliceComponentSelector = {
  shop_grid_slice: ShopGrid,
  additional_info_slice: AdditionalInfoSlice,
  reviews_slice: ReviewsSlice,
  text_columns_slice: TextColumnsSlice,
  page_preview_tiles: PagePreviewSlice
}

const Slices = ({ page, settings, slices, summary }) => {
  const sliceComponents = useMemo(() => {
    const components = []
    forEach(slices, (slice, i) => {
      const Component = sliceComponentSelector[slice._type]
      if (Component) {
        components.push(
          <ErrorBoundary key={`slice-${slice._key}`}>
            <Component data={slice} page={page} summary={summary} first={i === 0} />
          </ErrorBoundary>
        )
      }
    })
    return components
  }, [slices, page])

  if (page.pageType === 'product') {
    return (
      <>
        <ProductHero page={page} settings={settings} />
        {sliceComponents}
      </>
    )
  }

  return sliceComponents
}

export default Slices