fix: resolve dynamic templates to inner component before rendering to prevent hydration mismatches and double renders

Author: ahuseyn

.changeset/shaky-toes-open.md

@@ -0,0 +1,5 @@
+---
+'@faustwp/core': patch
+---
+
+Fixed an issue where dynamic template components were rendered via the next/dynamic wrapper directly, causing hydration mismatches and double renders, by resolving the dynamic component to its inner function and storing it in state before rendering.

examples/next/faustwp-getting-started/wp-templates/category.js

@@ -43,7 +43,7 @@ const GET_CATEGORY_QUERY = gql`
 
 export default function Component(props) {
 	const { generalSettings, headerMenuItems, footerMenuItems } =
-		useFaustQuery(GET_LAYOUT_QUERY);
+		useFaustQuery(GET_LAYOUT_QUERY) ?? {};
 	const { nodeByUri } = useFaustQuery(GET_CATEGORY_QUERY) ?? {};
 
 	const { title: siteTitle, description: siteDescription } =

examples/next/faustwp-getting-started/wp-templates/index.js

@@ -1,25 +1,10 @@
 import dynamic from 'next/dynamic';
 import { default as FrontPage } from './front-page.js';
 
-const category = dynamic(() => import('./category.js'), {
-	loading: () => <p>Loading Category Template...</p>,
-	ssr: false,
-});
-
-const tag = dynamic(() => import('./tag.js'), {
-	loading: () => <p>Loading Tag Template...</p>,
-	ssr: false,
-});
-
-const page = dynamic(() => import('./page.js'), {
-	loading: () => <p>Loading Page Template...</p>,
-	ssr: false,
-});
-
-const single = dynamic(() => import('./single.js'), {
-	loading: () => <p>Loading Single Post Template...</p>,
-	ssr: false,
-});
+const category = dynamic(() => import('./category.js'));
+const tag = dynamic(() => import('./tag.js'));
+const page = dynamic(() => import('./page.js'));
+const single = dynamic(() => import('./single.js'));
 
 export default {
 	category,

examples/next/faustwp-getting-started/wp-templates/page.js

@@ -26,7 +26,7 @@ const GET_PAGE_QUERY = gql`
 
 export default function Component(props) {
 	// Loading state for previews
-	if (props.loading) {
+	if (props?.loading) {
 		return <>Loading...</>;
 	}
 

packages/faustwp-core/src/components/WordPressTemplate.tsx

@@ -76,7 +76,10 @@ export function WordPressTemplateInternal(
 		...wordpressTemplateProps
 	} = props;
 	const unknownTemplate = getTemplate(seedNode, templates);
+	const isDynamic = isDynamicComponent(unknownTemplate);
 	const [data, setData] = useState<any | null>(templateQueryDataProp);
+	const [resolvedTemplate, setResolvedTemplate] =
+		useState<WordPressTemplateType | null>(null);
 	const { setQueries } = useContext(FaustContext) || {};
 
 	/**
@@ -88,7 +91,7 @@ export function WordPressTemplateInternal(
 				return;
 			}
 
-			const template = isDynamicComponent(unknownTemplate)
+			const template = isDynamic
 				? await loadDynamicComponent(unknownTemplate)
 				: unknownTemplate;
 
@@ -152,7 +155,7 @@ export function WordPressTemplateInternal(
 				return;
 			}
 
-			const template = isDynamicComponent(unknownTemplate)
+			const template = isDynamic
 				? await loadDynamicComponent(unknownTemplate)
 				: unknownTemplate;
 
@@ -185,11 +188,26 @@ export function WordPressTemplateInternal(
 		})();
 	}, [data, unknownTemplate, seedNode, isPreview, isAuthenticated, setLoading]);
 
+	useEffect(() => {
+		if (!unknownTemplate || !isDynamic) {
+			return;
+		}
+		void loadDynamicComponent(unknownTemplate).then((template) => {
+			setResolvedTemplate(() => template);
+		});
+	}, [unknownTemplate]);
+
 	if (!unknownTemplate) {
 		return null;
 	}
 
-	const Component = unknownTemplate as React.FC<{ [key: string]: any }>;
+	if (isDynamic && !resolvedTemplate) {
+		return null;
+	}
+
+	const Component = (
+		isDynamic ? resolvedTemplate : unknownTemplate
+	) as React.FC<{ [key: string]: any }>;
 	const newProps = {
 		...wordpressTemplateProps,
 		__TEMPLATE_QUERY_DATA__: templateQueryDataProp,