Add Server Side Render Example (#132)

* Add Server Side Render Example

* Change SSR example to use pokeapi to get the data

Author: sergiodxa

examples/server-render/README.md

@@ -0,0 +1,38 @@
+# Server Render
+
+## One-Click Deploy
+
+Deploy your own SWR project with ZEIT Now.
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/swr/tree/master/examples/server-render)
+
+## How to Use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/swr/tar.gz/master | tar -xz --strip=2 swr-master/examples/server-render
+cd server-render
+```
+
+Install it and run:
+
+```bash
+yarn
+yarn dev
+# or
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/home) ([download](https://zeit.co/download))
+
+```
+now
+```
+
+## The Idea behind the Example
+
+This examples show how to combine Next.js getInitialProps with the SWR `initialData` option to support Server-Side Rendering.
+
+The application will fetch the data server-side and then receive it as props, that data will be passed as `initialData` to SWR, once the application starts client-side SWR will revalidate it against the API and update the DOM, if it's required, with the new data.

examples/server-render/libs/fetcher.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/server-render/package.json

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

examples/server-render/pages/[pokemon].js

@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import fetcher from '../libs/fetcher'
+
+import useSWR from 'swr'
+
+const getURL = pokemon => `https://pokeapi.co/api/v2/pokemon/${pokemon}`
+
+export default function Pokemon({ pokemon, initialData }) {
+  const { data } = useSWR(getURL(pokemon), fetcher, { initialData })
+
+  return (
+    <div>
+      <h1>{pokemon}</h1>
+      {data ? (
+        <div>
+          <figure>
+            <img src={data.sprites.front_default} />
+          </figure>
+          <p>height: {data.height}</p>
+          <p>weight: {data.weight}</p>
+          <ul>
+            {data.types.map(({ type }) => (
+              <li key={type.name}>{type.name}</li>
+            ))}
+          </ul>
+        </div>
+      ) : (
+        'loading...'
+      )}
+      <br />
+      <br />
+      <Link href="/">
+        <a>Back</a>
+      </Link>
+    </div>
+  )
+}
+
+Pokemon.getInitialProps = async ({ query }) => {
+  const data = await fetcher(getURL(query.pokemon))
+  return { initialData: data, pokemon: query.pokemon }
+}

examples/server-render/pages/index.js

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import fetcher from '../libs/fetcher'
+
+import useSWR from 'swr'
+
+const URL = 'https://pokeapi.co/api/v2/pokemon/'
+
+export default function Home({ initialData }) {
+  const { data } = useSWR(URL, fetcher, { initialData })
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <h1>Trending Projects</h1>
+      <div>
+        {data && data.results
+          ? data.results.map(pokemon => (
+              <p key={pokemon.name}>
+                <Link href="/[pokemon]" as={`/${pokemon.name}`}>
+                  <a>{pokemon.name}</a>
+                </Link>
+              </p>
+            ))
+          : 'loading...'}
+      </div>
+    </div>
+  )
+}
+
+Home.getInitialProps = async () => {
+  const data = await fetcher(URL)
+  return { initialData: data }
+}