demo: suspense demo

examples/suspense/components/error-handling.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default class ErrorBoundary extends React.Component {
+  state = { hasError: false, error: null }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback
+    }
+    return this.props.children
+  }
+}

examples/suspense/libs/fetch.js

@@ -0,0 +1,6 @@
+import fetch from 'isomorphic-unfetch'
+
+export default async function (...args) {
+  const res = await fetch(...args)
+  return await res.json()
+}

examples/suspense/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "suspense",
+    "version": "1.0.0",
+    "main": "index.js",
+    "license": "MIT",
+    "dependencies": {
+      "react": "^16.11.0",
+      "react-dom": "^16.11.0",
+      "isomorphic-unfetch": "3.0.0",
+      "next": "9.1.1",
+      "swr": "latest"
+    },
+    "scripts": {
+      "dev": "next",
+      "start": "next start",
+      "build": "next build"
+    }
+  }

examples/suspense/pages/[user]/[repo].js

@@ -0,0 +1,47 @@
+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 })
+
+  return (
+    <>
+      {data ? (
+        <div>
+          <p>forks: {data.forks_count}</p>
+          <p>stars: {data.stargazers_count}</p>
+          <p>watchers: {data.watchers}</p>
+        </div>
+      ) : null}
+    </>
+  )
+}
+
+export default () => {
+  const id =
+    typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''
+
+  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}
+      <br />
+      <br />
+      <Link href="/">
+        <a>Back</a>
+      </Link>
+    </div>
+  )
+}

examples/suspense/pages/api/data.js

@@ -0,0 +1,34 @@
+import fetch from 'isomorphic-unfetch'
+
+const projects = [
+  'facebook/flipper',
+  'vuejs/vuepress',
+  'rust-lang/rust',
+  'zeit/next.js',
+  'emperor/clothes'
+]
+
+export default (req, res) => {
+  if (req.query.id) {
+    if (req.query.id === projects[4]) {
+      setTimeout(() => {
+        res.json({ msg: 'not found' })
+      })
+
+      return
+    }
+    // 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
+  }
+  setTimeout(() => {
+    res.json(projects)
+  }, 2000)
+}

examples/suspense/pages/index.js

@@ -0,0 +1,36 @@
+import { Suspense } from 'react'
+import Link from 'next/link'
+import fetcher from '../libs/fetch';
+
+import useSWR from 'swr'
+
+const isServer = typeof window === 'undefined'
+
+const Repos = () => {
+  const { data } = useSWR('/api/data', fetcher, { suspense: true })
+
+  return (
+    <>
+      {data.map(project => (
+        <p key={project}>
+          <Link href="/[user]/[repo]" as={`/${project}`}>
+            <a>{project}</a>
+          </Link>
+        </p>
+      ))}
+    </>
+  )
+}
+
+export default () => {
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <h1>Trending Projects</h1>
+      {!isServer ? (
+        <Suspense fallback={<div>loading...</div>}>
+          <Repos></Repos>
+        </Suspense>
+      ) : null}
+    </div>
+  )
+}