From eba01927a3519530d454da3a09af19b1f9415233 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=ADcholas=20Oliveira?= <nicholas.andre@10up.com>
Date: Wed, 31 Jul 2024 20:34:08 -0300
Subject: [PATCH] feat: client and server (streaming) examples

---
 .../src/app/(single)/[...path]/page.tsx       | 37 +++++++++++++++++--
 .../src/components/RelatedPosts.tsx           |  2 +-
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/projects/wp-nextjs-app/src/app/(single)/[...path]/page.tsx b/projects/wp-nextjs-app/src/app/(single)/[...path]/page.tsx
index 665d61aaa..23b1c92df 100644
--- a/projects/wp-nextjs-app/src/app/(single)/[...path]/page.tsx
+++ b/projects/wp-nextjs-app/src/app/(single)/[...path]/page.tsx
@@ -9,6 +9,7 @@ import {
 import { Metadata } from 'next';
 import { removeSourceUrl } from '@headstartwp/core';
 import dynamic from 'next/dynamic';
+import { FC, Suspense } from 'react';
 import Blocks from '../../../components/Blocks';
 
 const ClientRelatedPosts = dynamic(() =>
@@ -52,6 +53,26 @@ export async function generateMetadata({ params }: HeadstartWPRoute): Promise<Me
 	return metatada;
 }
 
+const ServerRelatedPosts: FC<{ post_id: number; category: string }> = async ({
+	post_id,
+	category,
+}) => {
+	const { data } = await queryPosts({
+		params: { postType: 'post', per_page: 3, category, exclude: [post_id] },
+	});
+
+	return (
+		<div>
+			<h2>Related Posts (Streamed from Server)</h2>
+			<ul>
+				{data.posts.map((post) => (
+					<li key={post.id}>{post.title.rendered}</li>
+				))}
+			</ul>
+		</div>
+	);
+};
+
 const Single = async ({ params }: HeadstartWPRoute) => {
 	const { data, seo, config } = await query({ params });
 
@@ -66,10 +87,18 @@ const Single = async ({ params }: HeadstartWPRoute) => {
 			{seo.schema && <JSONLD schema={seo.schema} />}
 
 			{data.post.terms.category && (
-				<ClientRelatedPosts
-					post_id={data.post.id}
-					category={data.post.terms.category[0].slug}
-				/>
+				<>
+					<ClientRelatedPosts
+						post_id={data.post.id}
+						category={data.post.terms.category[0].slug}
+					/>
+					<Suspense fallback="Loading (streaming)">
+						<ServerRelatedPosts
+							post_id={data.post.id}
+							category={data.post.terms.category[0].slug}
+						/>
+					</Suspense>
+				</>
 			)}
 		</article>
 	);
diff --git a/projects/wp-nextjs-app/src/components/RelatedPosts.tsx b/projects/wp-nextjs-app/src/components/RelatedPosts.tsx
index fff864f15..82b7488e5 100644
--- a/projects/wp-nextjs-app/src/components/RelatedPosts.tsx
+++ b/projects/wp-nextjs-app/src/components/RelatedPosts.tsx
@@ -9,7 +9,7 @@ type Props = {
 };
 
 export const RelatedPosts: React.FC<Props> = ({ category, post_id }) => {
-	const { data, loading } = useFetchPosts({ per_page: 3, category, exclude: post_id });
+	const { data, loading } = useFetchPosts({ per_page: 3, category, exclude: [post_id] });
 
 	if (loading) {
 		return <div>Loading...</div>;