[example] Progressive rendered application (vercel#998)

sergiodxa · timneutkens · commit 592c666e827b · 2017-02-05T13:43:28.000+01:00
* [add] example of a progressive rendered app

* [update] remove extra blank line

* [update] fix typo

* [update] more use cases

* [update] example link

* Update README.md

* [update] next.js dependency version

* [update] fix readme typos
diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md
@@ -0,0 +1,36 @@
+# Example app implementing progressive server-side render
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/progressive-render
+cd progressive-render
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+Sometimes you want to **not** server render some parts of your application. That can be third party components without server render capabilities, components that depends on `window` and other browser only APIs or just because that content isn't important enough for the user (eg. below the fold content).
+
+In that case you can wrap the component in `react-no-ssr` which will only render the component client-side.
+
+This example features:
+
+* An app with a component that must only be rendered in the client
+* A loading component that will be displayed before rendering the client-only component
+
+**Example**: https://progressive-render-raceuevkqw.now.sh/
diff --git a/examples/progressive-render/components/Loading.js b/examples/progressive-render/components/Loading.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default () => (
+  <div>
+    <h3>Loading...</h3>
+    <style jsx>{`
+      div {
+        align-items: center;
+        display: flex;
+        height: 50vh;
+        justify-content: center;
+      }
+    `}</style>
+  </div>
+)
diff --git a/examples/progressive-render/package.json b/examples/progressive-render/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "progressive-render",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react-no-ssr": "1.1.0"
+  }
+}
diff --git a/examples/progressive-render/pages/index.js b/examples/progressive-render/pages/index.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import NoSSR from 'react-no-ssr'
+import Loading from '../components/Loading'
+
+export default () => (
+  <main>
+    <section>
+      <h1>
+        This section is server-side rendered.
+      </h1>
+    </section>
+
+    <NoSSR onSSR={<Loading />}>
+      <section>
+        <h2>
+          This section is <em>only</em> client-side rendered.
+        </h2>
+      </section>
+    </NoSSR>
+
+    <style jsx>{`
+      section {
+        align-items: center;
+        display: flex;
+        height: 50vh;
+        justify-content: center;
+      }
+    `}</style>
+  </main>
+)
