Pseudo detail pages

app/[id]/page.tsx

@@ -0,0 +1,69 @@
+import {
+  RecommendedProducts,
+  RecommendedProductsSkeleton,
+} from '#/components/recommended-products';
+import { Reviews, ReviewsSkeleton } from '#/components/reviews';
+import { SingleProduct } from '#/components/single-product';
+import { Ping } from '#/components/ping';
+import { delayRecommendedProducts, delayReviews } from '#/lib/constants';
+import { Suspense } from 'react';
+
+export const revalidate = 60;
+export const generateStaticParams = () => {
+  return [];
+};
+
+export default async function Page({
+  params,
+}: {
+  params: {
+    id: string;
+  };
+}) {
+  console.log('==> Rendering page');
+  return (
+    <div className="space-y-8 lg:space-y-14">
+      <div className="text-2xl font-medium text-white">
+        Streaming Demo {params.id} {new Date().toISOString()}
+      </div>
+      <SingleProduct
+        data={fetch(`https://app-router-api.vercel.app/api/products?id=1`)}
+      />
+
+      <Ping />
+
+      <Suspense fallback={<RecommendedProductsSkeleton />}>
+        <RecommendedProducts
+          path="/streaming/node/product"
+          data={fetch(
+            // We intentionally delay the response to simulate a slow data
+            // request that would benefit from streaming
+            `https://app-router-api.vercel.app/api/products?delay=${delayRecommendedProducts}&filter=1`,
+            {
+              // We intentionally disable Next.js Cache to better demo
+              // streaming
+              cache: 'no-store',
+            },
+          )}
+        />
+      </Suspense>
+
+      <Ping />
+
+      <Suspense fallback={<ReviewsSkeleton />}>
+        <Reviews
+          data={fetch(
+            // We intentionally delay the response to simulate a slow data
+            // request that would benefit from streaming
+            `https://app-router-api.vercel.app/api/reviews?delay=${delayReviews}`,
+            {
+              // We intentionally disable Next.js Cache to better demo
+              // streaming
+              cache: 'no-store',
+            },
+          )}
+        />
+      </Suspense>
+    </div>
+  );
+}