Feature/yoast payload optimize (#727)

Co-authored-by: Lucy Tomás Cross <lucytomascross@Lucys-MacBook-Pro.local>
Co-authored-by: Nícholas Oliveira <nicholas.andre@10up.com>

Author: 3 people

.changeset/ninety-lemons-care.md

@@ -0,0 +1,6 @@
+---
+"@headstartwp/headstartwp": minor
+"@headstartwp/core": minor
+---
+
+Introducing optimizeYoastPayload to reduce payload size when using the yoast integration

packages/core/src/data/strategies/AbstractFetchStrategy.ts

@@ -28,6 +28,13 @@ export interface EndpointParams {
 	 */
 	lang?: string;
 
+	/**
+	 * The custom parameter to optimize the Yoast payload.
+	 *
+	 * This is only used if the YoastSEO integration is enabled
+	 */
+	optimizeYoastPayload?: boolean;
+
 	[k: string]: unknown;
 }
 

packages/core/src/data/strategies/AuthorArchiveFetchStrategy.ts

@@ -1,4 +1,4 @@
-import { getCustomTaxonomies } from '../../utils';
+import { getCustomTaxonomies, getSiteBySourceUrl } from '../../utils';
 import { PostEntity } from '../types';
 import { authorArchivesMatchers } from '../utils/matchers';
 import { parsePath } from '../utils/parsePath';
@@ -25,6 +25,10 @@ export class AuthorArchiveFetchStrategy<
 		const matchers = [...authorArchivesMatchers];
 		const customTaxonomies = getCustomTaxonomies(this.baseURL);
 
+		const config = getSiteBySourceUrl(this.baseURL);
+
+		this.optimizeYoastPayload = !!config.integrations?.yoastSEO?.optimizeYoastPayload;
+
 		customTaxonomies?.forEach((taxonomy) => {
 			const slug = taxonomy?.rewrite ?? taxonomy.slug;
 			matchers.push({

packages/core/src/data/strategies/PostOrPostsFetchStrategy.ts

@@ -8,7 +8,7 @@ import {
 } from './AbstractFetchStrategy';
 import { PostParams, SinglePostFetchStrategy } from './SinglePostFetchStrategy';
 import { PostsArchiveFetchStrategy, PostsArchiveParams } from './PostsArchiveFetchStrategy';
-import { FrameworkError, NotFoundError } from '../../utils';
+import { FrameworkError, NotFoundError, getSiteBySourceUrl } from '../../utils';
 
 /**
  * The params supported by {@link PostOrPostsFetchStrategy}
@@ -61,11 +61,17 @@ export class PostOrPostsFetchStrategy<
 
 	postsStrategy: PostsArchiveFetchStrategy = new PostsArchiveFetchStrategy(this.baseURL);
 
+	optimizeYoastPayload: boolean = false;
+
 	getDefaultEndpoint(): string {
 		return '@postOrPosts';
 	}
 
 	getParamsFromURL(path: string, params: Partial<P> = {}): Partial<P> {
+		const config = getSiteBySourceUrl(this.baseURL);
+
+		this.optimizeYoastPayload = !!config.integrations?.yoastSEO?.optimizeYoastPayload;
+
 		this.urlParams = {
 			single: this.postStrategy.getParamsFromURL(path, params.single),
 			archive: this.postsStrategy.getParamsFromURL(path, params.archive),

packages/core/src/data/strategies/PostsArchiveFetchStrategy.ts

@@ -211,6 +211,8 @@ export class PostsArchiveFetchStrategy<
 
 	locale: string = '';
 
+	optimizeYoastPayload: boolean = false;
+
 	getDefaultEndpoint(): string {
 		return endpoints.posts;
 	}
@@ -234,6 +236,8 @@ export class PostsArchiveFetchStrategy<
 		this.locale = config.integrations?.polylang?.enable && params.lang ? params.lang : '';
 		this.path = path;
 
+		this.optimizeYoastPayload = !!config.integrations?.yoastSEO?.optimizeYoastPayload;
+
 		const matchers = [...postsMatchers];
 
 		if (typeof params.taxonomy === 'string') {
@@ -457,6 +461,12 @@ export class PostsArchiveFetchStrategy<
 			}
 		}
 
+		if (this.optimizeYoastPayload) {
+			finalUrl = addQueryArgs(finalUrl, {
+				optimizeYoastPayload: true,
+			});
+		}
+
 		return super.fetcher(finalUrl, params, options);
 	}
 

packages/core/src/data/strategies/SearchNativeFetchStrategy.ts

@@ -74,6 +74,8 @@ export class SearchNativeFetchStrategy<
 
 	locale: string = '';
 
+	optimizeYoastPayload: boolean = false;
+
 	getDefaultEndpoint() {
 		return endpoints.search;
 	}
@@ -94,6 +96,8 @@ export class SearchNativeFetchStrategy<
 		// Required for search lang url.
 		this.locale = config.integrations?.polylang?.enable && params.lang ? params.lang : '';
 
+		this.optimizeYoastPayload = !!config.integrations?.yoastSEO?.optimizeYoastPayload;
+
 		return parsePath(searchMatchers, path) as Partial<P>;
 	}
 
@@ -165,6 +169,10 @@ export class SearchNativeFetchStrategy<
 			queriedObject.search.yoast_head_json = seo_json;
 		}
 
+		if (this.optimizeYoastPayload) {
+			params.optimizeYoastPayload = true;
+		}
+
 		const response = await super.fetcher(url, params, {
 			...options,
 			throwIfNotFound: false,

packages/core/src/data/strategies/SinglePostFetchStrategy.ts

@@ -5,6 +5,7 @@ import {
 	removeSourceUrl,
 	NotFoundError,
 	getSiteBySourceUrl,
+	addQueryArgs,
 } from '../../utils';
 import { PostEntity } from '../types';
 import { postMatchers } from '../utils/matchers';
@@ -90,6 +91,8 @@ export class SinglePostFetchStrategy<
 
 	shouldCheckCurrentPathAgainstPostLink: boolean = true;
 
+	optimizeYoastPayload: boolean = false;
+
 	getDefaultEndpoint(): string {
 		return endpoints.posts;
 	}
@@ -108,6 +111,8 @@ export class SinglePostFetchStrategy<
 
 		this.path = nonUrlParams.fullPath ?? path;
 
+		this.optimizeYoastPayload = !!config.integrations?.yoastSEO?.optimizeYoastPayload;
+
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		const { year, day, month, ...params } = parsePath(postMatchers, path);
 
@@ -289,6 +294,7 @@ export class SinglePostFetchStrategy<
 	 */
 	async fetcher(url: string, params: P, options: Partial<FetchOptions> = {}) {
 		const { burstCache = false } = options;
+		let finalUrl = url;
 
 		if (params.authToken) {
 			options.previewToken = params.authToken;
@@ -319,7 +325,13 @@ export class SinglePostFetchStrategy<
 		}
 
 		try {
-			const result = await super.fetcher(url, params, options);
+			if (this.optimizeYoastPayload) {
+				finalUrl = addQueryArgs(finalUrl, {
+					optimizeYoastPayload: true,
+				});
+			}
+
+			const result = await super.fetcher(finalUrl, params, options);
 
 			return result;
 		} catch (e) {

packages/core/src/types.ts

@@ -48,7 +48,9 @@ export interface Integration {
 	enable: boolean;
 }
 
-export interface YoastSEOIntegration extends Integration {}
+export interface YoastSEOIntegration extends Integration {
+	optimizeYoastPayload?: boolean;
+}
 
 export interface PolylangIntegration extends Integration {}
 

projects/wp-multisite-i18n-nextjs/headstartwp.config.js

@@ -45,4 +45,11 @@ module.exports = {
 			useWordPressPlugin: true,
 		},
 	],
+
+	integrations: {
+		yoastSEO: {
+			enable: true,
+			optimizeYoastPayload: true,
+		},
+	},
 };

projects/wp-multisite-nextjs-app/headstartwp.config.js

@@ -22,4 +22,10 @@ module.exports = {
 			hostUrl: 'http://js1.localhost:3000',
 		},
 	],
+	integrations: {
+		yoastSEO: {
+			enable: true,
+			optimizeYoastPayload: true,
+		},
+	},
 };