diff --git a/core/app/[locale]/(default)/product/[slug]/_components/product-review-schema/product-review-schema.tsx b/core/app/[locale]/(default)/product/[slug]/_components/product-review-schema/product-review-schema.tsx index 21917a35e8..1a6ccc3c7b 100644 --- a/core/app/[locale]/(default)/product/[slug]/_components/product-review-schema/product-review-schema.tsx +++ b/core/app/[locale]/(default)/product/[slug]/_components/product-review-schema/product-review-schema.tsx @@ -3,6 +3,7 @@ // eslint-disable-next-line import/no-named-as-default import DOMPurify from 'dompurify'; import { useFormatter } from 'next-intl'; +import { useEffect, useState } from 'react'; import { Product as ProductSchemaType, WithContext } from 'schema-dts'; import { FragmentOf } from '~/client/graphql'; @@ -16,6 +17,16 @@ interface Props { export const ProductReviewSchema = ({ reviews, productId }: Props) => { const format = useFormatter(); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + // DOMPurify requires a browser DOM, so we skip SSR and only render on the client. + if (!mounted) { + return null; + } const productReviewSchema: WithContext = { '@context': 'https://schema.org', @@ -43,7 +54,9 @@ export const ProductReviewSchema = ({ reviews, productId }: Props) => { return (