feat: static rendering (#825)

.changeset/tall-peas-compete.md

@@ -0,0 +1,6 @@
+---
+"@headstartwp/core": patch
+"@headstartwp/next": patch
+---
+
+Introducing `loadHeadstartWpConfig()`

packages/next/src/rsc/config.ts

@@ -1,18 +1,15 @@
-import { getHeadstartWPConfig, getSiteByHost } from '@headstartwp/core';
-import { headers } from 'next/headers';
+import { HeadstartWPRoute } from './types';
+import { prepareQuery } from './data/queries/prepareQuery';
 
 /**
- * How to make this work in edge runtimes?
+ * Loads the right config based on route params
+ *
+ * @param routeParams The next.js route params
+ *
+ * @returns
  */
-export async function loadHeadstartWPConfig() {
-	const config = getHeadstartWPConfig();
-	const headersList = headers();
-
-	const site = headersList.get('x-headstartwp-site');
-
-	if (site) {
-		return getSiteByHost(site);
-	}
+export function loadHeadstartWPConfig(routeParams: HeadstartWPRoute['params']) {
+	const { config } = prepareQuery({ routeParams });
 
 	return config;
 }

packages/next/src/rsc/data/queries/__tests__/prepareQuery.ts

@@ -169,7 +169,7 @@ describe('prepareQuery with lang and polylang', () => {
 				getHeadstartWPConfig(),
 			),
 		).toThrow(
-			'Unsuported lang, make sure you add all desired locales to `config.i18n.locales`',
+			'Unsuported lang (br), make sure you add all desired locales to "config.i18n.locales"',
 		);
 	});
 });

packages/next/src/rsc/data/queries/prepareQuery.ts

@@ -54,7 +54,7 @@ export function prepareQuery<P extends EndpointParams>(
 		const supportedLocales = rootConfig.i18n?.locales ?? [];
 		if (!supportedLocales.includes(routeParams.lang)) {
 			throw new FrameworkError(
-				'Unsuported lang, make sure you add all desired locales to `config.i18n.locales`',
+				`Unsuported lang (${routeParams.lang}), make sure you add all desired locales to "config.i18n.locales"`,
 			);
 		}
 		params.lang = routeParams.lang;

projects/wp-multisite-nextjs-app/src/app/api/preview/route.ts

@@ -1,6 +1,8 @@
 import { previewRouteHandler } from '@headstartwp/next/app';
 import type { NextRequest } from 'next/server';
 
+export const dynamic = 'force-dynamic';
+
 export async function GET(request: NextRequest) {
 	// @ts-expect-error
 	return previewRouteHandler(request);

projects/wp-multisite-nextjs-app/src/app/api/revalidate/route.ts

@@ -1,6 +1,8 @@
 import { revalidateRouteHandler } from '@headstartwp/next/app';
 import type { NextRequest } from 'next/server';
 
+export const dynamic = 'force-dynamic';
+
 export async function GET(request: NextRequest) {
 	// @ts-expect-error
 	return revalidateRouteHandler(request);

projects/wp-nextjs-app/src/app/(single)/[...path]/page.tsx

@@ -1,8 +1,35 @@
 import { HtmlDecoder } from '@headstartwp/core/react';
-import { HeadstartWPRoute, JSONLD, queryPost } from '@headstartwp/next/app';
+import {
+	HeadstartWPRoute,
+	JSONLD,
+	loadHeadstartWPConfig,
+	queryPost,
+	queryPosts,
+} from '@headstartwp/next/app';
 import { Metadata } from 'next';
+import { removeSourceUrl } from '@headstartwp/core';
 import Blocks from '../../../components/Blocks';
 
+export async function generateStaticParams({ params }: HeadstartWPRoute) {
+	// loads the right config based on route params (this is needed over getHeadstartWP for sites using polylang integration or multisite)
+	const { sourceUrl = '', hostUrl = '/' } = loadHeadstartWPConfig(params);
+
+	const { data } = await queryPosts({
+		routeParams: params,
+		params: { postType: 'post' },
+	});
+
+	return data.posts.map((post) => ({
+		path: removeSourceUrl({
+			backendUrl: sourceUrl,
+			link: post.link,
+			publicUrl: hostUrl,
+		})
+			.substring(1)
+			.split('/'),
+	}));
+}
+
 async function query({ params }: HeadstartWPRoute) {
 	return queryPost({
 		routeParams: params,

projects/wp-nextjs-app/src/app/api/preview/route.ts

@@ -1,6 +1,8 @@
 import { previewRouteHandler } from '@headstartwp/next/app';
 import type { NextRequest } from 'next/server';
 
+export const dynamic = 'force-dynamic';
+
 export async function GET(request: NextRequest) {
 	// @ts-expect-error
 	return previewRouteHandler(request);

projects/wp-nextjs-app/src/app/api/revalidate/route.ts

@@ -1,6 +1,8 @@
 import { revalidateRouteHandler } from '@headstartwp/next/app';
 import type { NextRequest } from 'next/server';
 
+export const dynamic = 'force-dynamic';
+
 export async function GET(request: NextRequest) {
 	// @ts-expect-error
 	return revalidateRouteHandler(request);

projects/wp-nextjs-app/src/app/page.tsx

@@ -8,7 +8,9 @@ async function query({ params }: HeadstartWPRoute) {
 		params: {
 			slug: 'sample-page',
 			postType: 'page',
-			matchCurrentPath: false,
+		},
+		options: {
+			cache: 'force-cache',
 		},
 	});
 }