chore(vercel-app-playground): port ssg demo (#12)

vercel-app-playground/package.json

@@ -20,15 +20,15 @@
   },
   "dependencies": {
     "@heroicons/react": "2.1.3",
-    "@hiogawa/react-server": "0.2.1",
+    "@hiogawa/react-server": "0.2.2",
     "@hiogawa/utils-node": "^0.0.1",
     "clsx": "2.1.1",
     "date-fns": "3.6.0",
     "dinero.js": "2.0.0-alpha.10",
     "ms": "3.0.0-canary.1",
-    "react": "19.0.0-rc-8f3c0525f9-20240521",
-    "react-dom": "19.0.0-rc-8f3c0525f9-20240521",
-    "react-server-dom-webpack": "19.0.0-rc-8f3c0525f9-20240521",
+    "react": "19.0.0-rc.0",
+    "react-dom": "19.0.0-rc.0",
+    "react-server-dom-webpack": "19.0.0-rc.0",
     "server-only": "0.0.1",
     "use-count-up": "3.0.1"
   },

vercel-app-playground/src/lib/demos.ts

@@ -65,6 +65,7 @@ export const demos: { name: string; items: Item[] }[] = [
         name: 'Static Data',
         slug: 'ssg',
         description: 'Generate static pages',
+        ok: true,
       },
       {
         name: 'Dynamic Data',

vercel-app-playground/src/routes/page.tsx

@@ -20,6 +20,7 @@ export default function Page() {
                 {section.items.map((item) => {
                   return (
                     <Link
+                      preload
                       href={`/${item.slug}`}
                       key={item.name}
                       className={clsx(

vercel-app-playground/src/routes/patterns/page.tsx

@@ -31,6 +31,7 @@ export default function Page() {
         {items.map((item) => {
           return (
             <Link
+              preload
               href={`/patterns/${item.slug}`}
               key={item.name}
               className={clsx(

vercel-app-playground/src/routes/patterns/search-params/active-link.tsx

@@ -16,6 +16,7 @@ export default function ActiveLink({
 
   return (
     <Link
+      preload
       className={clsx('rounded-lg px-3 py-1 text-sm font-medium no-underline', {
         'bg-gray-700 text-gray-100 hover:bg-gray-500 hover:text-white':
           !isActive,

vercel-app-playground/src/routes/ssg/[id]/page.tsx

@@ -0,0 +1,26 @@
+import { RenderingInfo } from '#/ui/rendering-info';
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const res = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${params.id}`,
+  );
+  const data = (await res.json()) as { title: string; body: string };
+
+  return (
+    <div className="grid grid-cols-6 gap-x-6 gap-y-3">
+      <div className="col-span-full space-y-3 lg:col-span-4">
+        <h1 className="truncate text-2xl font-medium capitalize text-gray-200">
+          {data.title}
+        </h1>
+        <p className="line-clamp-3 font-medium text-gray-500">{data.body}</p>
+      </div>
+      <div className="-order-1 col-span-full lg:order-none lg:col-span-2">
+        <RenderingInfo
+          type={
+            globalThis.process?.env?.['REACT_SERVER_PRERENDER'] ? 'ssg' : 'ssr'
+          }
+        />
+      </div>
+    </div>
+  );
+}

vercel-app-playground/src/routes/ssg/layout.tsx

@@ -0,0 +1,22 @@
+import { Tab } from '#/ui/tab';
+import React from 'react';
+import { Boundary } from '#/ui/boundary';
+
+const title = 'Static Data';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="space-y-9">
+      <title>{title}</title>
+      <div className="flex flex-wrap items-center gap-2">
+        <Tab path="/ssg" item={{ text: 'Home' }} />
+        <Tab path="/ssg" item={{ text: 'Post 1 (prerender)', slug: '1' }} />
+        <Tab path="/ssg" item={{ text: 'Post 2 (prerender)', slug: '2' }} />
+        <Tab path="/ssg" item={{ text: 'Post 3 (dynamic)', slug: '3' }} />
+      </div>
+      <div>
+        <Boundary>{children}</Boundary>
+      </div>
+    </div>
+  );
+}

vercel-app-playground/src/routes/ssg/page.tsx

@@ -0,0 +1,33 @@
+import { ExternalLink } from '#/ui/external-link';
+
+export default function Page() {
+  return (
+    <div className="prose prose-sm prose-invert max-w-none">
+      <h1 className="text-xl font-bold">Static Data</h1>
+
+      <ul>
+        <li className="line-through">
+          By default, data fetching in Next.js is cached static.
+        </li>
+        <li>This example statically caches data fetches for Post 1 and 2.</li>
+        <li className="line-through">
+          A random third post is fetched on-demand the first time it is
+          requested.
+        </li>
+        <li>
+          Try navigating to each post and noting the timestamp of when the page
+          was rendered.
+        </li>
+      </ul>
+
+      <div className="flex gap-2">
+        <ExternalLink href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#static-data-fetching">
+          Docs
+        </ExternalLink>
+        <ExternalLink href="https://github.com/vercel/app-playground/tree/main/app/ssg">
+          Code
+        </ExternalLink>
+      </div>
+    </div>
+  );
+}

vercel-app-playground/src/ui/global-nav.tsx

@@ -85,6 +85,8 @@ function GlobalNavItem({
 
   return (
     <Link
+      preload
+      // TODO: merge onClick handler
       onClick={close}
       href={`/${item.slug}`}
       className={clsx(

vercel-app-playground/src/ui/section-link.tsx

@@ -9,7 +9,7 @@ export const SectionLink = ({
   href: string;
   text: string;
 }) => (
-  <Link href={href} className="group block space-y-2">
+  <Link preload href={href} className="group block space-y-2">
     <div className="-m-[5px] rounded-[20px] border border-gray-900 p-1 transition group-hover:border-blue-600">
       {children}
     </div>

vercel-app-playground/src/ui/tab-nav-item.tsx

@@ -12,6 +12,7 @@ export const TabNavItem = ({
 }) => {
   return (
     <Link
+      preload
       href={href}
       className={clsx('rounded-lg px-3 py-1 text-sm font-medium', {
         'bg-gray-700 text-gray-100 hover:bg-gray-500 hover:text-white':

vercel-app-playground/src/ui/tab.tsx

@@ -21,6 +21,7 @@ export const Tab = ({
 
   return (
     <Link
+      preload
       href={href}
       className={clsx(
         'rounded-lg px-3 py-1 text-sm font-medium',

vercel-app-playground/vite.config.ts

@@ -11,7 +11,12 @@ export default defineConfig({
   clearScreen: false,
   plugins: [
     react(),
-    vitePluginReactServer(),
+    vitePluginReactServer({
+      prerender: async () => {
+        process.env['REACT_SERVER_PRERENDER'] = '1';
+        return ['/ssg/1', '/ssg/2'];
+      },
+    }),
     vitePluginLogger(),
     vitePluginSsrMiddleware({
       entry: process.env['SSR_ENTRY'] || '/src/adapters/node',