examples: add RSC streaming pre-render with promise fallback example (#…

…2905) examples: add RSC streaming prerender with promise fallback example
vercel · Mar 10, 2024 · aa542a4 · aa542a4
1 parent e4d3768
commit aa542a4
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 45 deletions.
diff --git a/examples/suspense/app/favicon.ico b/examples/suspense/app/favicon.ico
diff --git a/examples/suspense/app/layout.jsx b/examples/suspense/app/layout.jsx
@@ -0,0 +1,9 @@
+export default function RootLayout({
+  children
+}) {
+  return (
+    <html lang="en">
+      <body style={{ textAlign: 'center' }}>{children}</body>
+    </html>
+  )
+}
diff --git a/examples/suspense/app/rsc/[user]/[repo]/error.jsx b/examples/suspense/app/rsc/[user]/[repo]/error.jsx
@@ -0,0 +1,4 @@
+'use client'
+export default function ErrorPage() {
+  return <div>Error happen</div>;
+}
diff --git a/examples/suspense/app/rsc/[user]/[repo]/loading.jsx b/examples/suspense/app/rsc/[user]/[repo]/loading.jsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div>Loading...</div>;
+}
diff --git a/examples/suspense/app/rsc/[user]/[repo]/page.jsx b/examples/suspense/app/rsc/[user]/[repo]/page.jsx
@@ -0,0 +1,23 @@
+import Repo from './repo'
+import fetcher from '../../../../libs/fetch'
+import Link from 'next/link'
+import { Suspense } from 'react'
+const Page = ({ params }) => {
+  const { user, repo } = params
+  const id = `${user}/${repo}`
+  const serverData = fetcher('http://localhost:3000/api/data?id=' + id)
+  return (
+    <div>
+      <div>Repo: {id}</div>
+      <Suspense fallback={<div>Loading stats</div>}>
+        <Repo serverData={serverData} id={id} />
+      </Suspense>
+      <br />
+      <br />
+      <Link href="/rsc">Back</Link>
+    </div>
+  )
+}
+
+
+export default Page
diff --git a/examples/suspense/app/rsc/[user]/[repo]/repo.jsx b/examples/suspense/app/rsc/[user]/[repo]/repo.jsx
@@ -0,0 +1,21 @@
+'use client'
+import fetcher from '../../../../libs/fetch'
+import useSWR from 'swr'
+
+const Repo = ({ id, serverData }) => {
+  const { data } = useSWR('/api/data?id=' + id, fetcher, { suspense: true, fallbackData: serverData })
+  return (
+    <>
+      {data ? (
+        <div>
+          <p>forks: {data.forks_count}</p>
+          <p>stars: {data.stargazers_count}</p>
+          <p>watchers: {data.watchers}</p>
+        </div>
+      ) : null}
+
+    </>
+  )
+}
+
+export default Repo
diff --git a/examples/suspense/app/rsc/loading.jsx b/examples/suspense/app/rsc/loading.jsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div>Loading...</div>;
+}
diff --git a/examples/suspense/app/rsc/page.jsx b/examples/suspense/app/rsc/page.jsx
@@ -0,0 +1,8 @@
+import fetcher from '../../libs/fetch'
+import Repos from './repos'
+const Page = () => {
+  const serverData = fetcher('http://localhost:3000/api/data')
+  return <Repos serverData={serverData} />
+}
+
+export default Page
diff --git a/examples/suspense/app/rsc/repos.jsx b/examples/suspense/app/rsc/repos.jsx
@@ -0,0 +1,24 @@
+'use client'
+import useSWR from 'swr'
+import fetcher from '../../libs/fetch'
+import Link from 'next/link'
+
+const Repos = ({ serverData }) => {
+  const { data } = useSWR('/api/data', fetcher, {
+    suspense: true,
+    fallbackData: serverData
+  })
+  return (
+    <>
+      {data.map(project => (
+        <p key={project}>
+          <Link href={`/rsc/${project}`}>
+            {project}
+          </Link>
+        </p>
+      ))}
+    </>
+  )
+}
+
+export default Repos
diff --git a/examples/suspense/next-env.d.ts b/examples/suspense/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/suspense/pages/[user]/[repo].js b/examples/suspense/pages/[user]/[repo].js
@@ -2,13 +2,10 @@ import { Suspense } from 'react'
 import Link from 'next/link'
 import fetcher from '../../libs/fetch'
 import ErrorHandling from '../../components/error-handling'
-
 import useSWR from 'swr'
 
-const isServer = typeof window === 'undefined'
-
-const Detail = ({ id }) => {
-  const { data } = useSWR('/api/data?id=' + id, fetcher, { suspense: true })
+const Detail = ({ id, serverData }) => {
+  const { data } = useSWR('/api/data?id=' + id, fetcher, { suspense: true, fallbackData: serverData })
 
   return (
     <>
@@ -23,25 +20,25 @@ const Detail = ({ id }) => {
   )
 }
 
-export default function Repo() {
-  const id =
-    typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''
-
+export default function Repo({ id, serverData }) {
   return (
     <div style={{ textAlign: 'center' }}>
       <h1>{id}</h1>
-      {!isServer ? (
-        <Suspense fallback={<div>loading...</div>}>
-          <ErrorHandling fallback={<div>oooops!</div>}>
-            <Detail id={id}></Detail>
-          </ErrorHandling>
-        </Suspense>
-      ) : null}
+      <Suspense fallback={<div>loading...</div>}>
+        <ErrorHandling fallback={<div>oooops!</div>}>
+          <Detail id={id} serverData={serverData}></Detail>
+        </ErrorHandling>
+      </Suspense>
       <br />
       <br />
-      <Link href="/">
-        Back
-      </Link>
+      <Link href="/">Back</Link>
     </div>
   )
 }
+
+export const getServerSideProps = async ({ params }) => {
+  const { user, repo } = params
+  const id = `${user}/${repo}`
+  const data = await fetcher('http://localhost:3000/api/data?id=' + id).catch(() => {})
+  return { props: { serverData: data, id } }
+}
diff --git a/examples/suspense/pages/api/data.js b/examples/suspense/pages/api/data.js
@@ -12,21 +12,19 @@ export default function api(req, res) {
       setTimeout(() => {
         res.json({ msg: 'not found' })
       })
-
-      return
+    } else {
+      // a slow endpoint for getting repo data
+      fetch(`https://api.github.com/repos/${req.query.id}`)
+        .then(res => res.json())
+        .then(data => {
+          setTimeout(() => {
+            res.json(data)
+          }, 2000)
+        })
     }
-    // a slow endpoint for getting repo data
-    fetch(`https://api.github.com/repos/${req.query.id}`)
-      .then(res => res.json())
-      .then(data => {
-        setTimeout(() => {
-          res.json(data)
-        }, 2000)
-      })
-
-    return
+  } else {
+    setTimeout(() => {
+      res.json(projects)
+    }, 2000)
   }
-  setTimeout(() => {
-    res.json(projects)
-  }, 2000)
 }
diff --git a/examples/suspense/pages/index.js b/examples/suspense/pages/index.js
@@ -1,13 +1,14 @@
 import { Suspense } from 'react'
 import Link from 'next/link'
-import fetcher from '../libs/fetch';
+import fetcher from '../libs/fetch'
 
 import useSWR from 'swr'
 
-const isServer = typeof window === 'undefined'
-
-const Repos = () => {
-  const { data } = useSWR('/api/data', fetcher, { suspense: true })
+const Repos = ({ serverData }) => {
+  const { data } = useSWR('/api/data', fetcher, {
+    suspense: true,
+    fallbackData: serverData
+  })
 
   return (
     <>
@@ -22,15 +23,18 @@ const Repos = () => {
   )
 }
 
-export default function Index() {
+export default function Index({ serverData }) {
   return (
     <div style={{ textAlign: 'center' }}>
       <h1>Trending Projects</h1>
-      {!isServer ? (
-        <Suspense fallback={<div>loading...</div>}>
-          <Repos></Repos>
-        </Suspense>
-      ) : null}
+      <Suspense fallback={<div>loading...</div>}>
+        <Repos serverData={serverData}></Repos>
+      </Suspense>
     </div>
   )
 }
+
+export const getServerSideProps = async () => {
+  const data = await fetcher('http://localhost:3000/api/data')
+  return { props: { serverData: data } }
+}