fix: Resolve dynamic templates to inner component before rendering to… (#2296)

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

* fix: add isDynamic to effect deps

* ci: add fallback dependency installation for lint and format checks

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.

.github/workflows/check-packages.yml

@@ -26,6 +26,10 @@ jobs:
         uses: actions/checkout@v4
       - name: Set up Node.js
         uses: ./.github/actions/cache-restore
+        id: cache-node-modules
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: npm ci
       - name: Check Linting
         run: npm run lint
   check_format:
@@ -37,5 +41,9 @@ jobs:
         uses: actions/checkout@v4
       - name: Set up Node.js
         uses: ./.github/actions/cache-restore
+        id: cache-node-modules
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: npm ci
       - name: Check Formatting
         run: npm run test:format

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;
 
@@ -141,6 +144,7 @@ export function WordPressTemplateInternal(
 		unknownTemplate,
 		setQueries,
 		setLoading,
+		isDynamic,
 	]);
 
 	/**
@@ -152,7 +156,7 @@ export function WordPressTemplateInternal(
 				return;
 			}
 
-			const template = isDynamicComponent(unknownTemplate)
+			const template = isDynamic
 				? await loadDynamicComponent(unknownTemplate)
 				: unknownTemplate;
 
@@ -183,13 +187,36 @@ export function WordPressTemplateInternal(
 
 			setLoading(false);
 		})();
-	}, [data, unknownTemplate, seedNode, isPreview, isAuthenticated, setLoading]);
+	}, [
+		data,
+		unknownTemplate,
+		seedNode,
+		isPreview,
+		isAuthenticated,
+		setLoading,
+		isDynamic,
+	]);
+
+	useEffect(() => {
+		if (!unknownTemplate || !isDynamic) {
+			return;
+		}
+		void loadDynamicComponent(unknownTemplate).then((template) => {
+			setResolvedTemplate(() => template);
+		});
+	}, [unknownTemplate, isDynamic]);
 
 	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,