Converting getStaticPaths and getStaticProps to getServerSideProps- "An unexpected error has occured"

[huy-au-rozettatech]

What I'm trying to achieve

I don't want any of my dynamic routes to be statically generated.

Steps to reproduce the problem

I've updated getStaticProps to getServerSideProps with something like this and getStaticPaths was removed.

export const getServerSideProps: GetServerSideProps<
  ProductPageProps,
  ProductPageProps["params"]
> = async context => {
  const { params } = context;
  const { api } = await getSaleorApi();
  const { data } = await api.products.getDetails({
    slug: params.slug as string,
    channel: channelSlug,
    variantSelection: VariantAttributeScope.VARIANT_SELECTION,
  });
  return {
    props: { data: data || null, params },
  };
};

I have applied those changes to the following pages:

/src/pages/category/[slug].ts /src/pages/page/[slug].ts /src/pages/product/[slug].ts /src/pages/collection/[slug].ts

What I expected to happen

All pages using slug fields are generated dynamically without error.

Screenshots

When I create the product via the dashboard some products encounter an error while others do not, I can not seem to figure out the reason for this difference. Any help would be much appreciated.

System information

Operating system: MacOS Browser: Chrome 90

[huy-au-rozettatech]

Update - The response for some products were returning the description field as null and the RichTextEditorContent component would break when an attempt to render the description was performed.

export const RichTextEditorContent: React.FC<RichTextEditorContentProps> = ({
  jsonData,
}) => {
  const editorHtml = useRef(EditorJSHTML());
  const data = jsonData ? JSON.parse(jsonData) : [];

  return (
    <S.Content
      dangerouslySetInnerHTML={{
        __html: editorHtml.current.parse(data).join(""),
      }}
    />
  );
};

A string type check on jsonData was performed prior to calling JSON.parse otherwise default to an empty array resolved this issue.