From 592c666e827b23c6ce99238dd5513c018b15a794 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20Daniel=20Xalambr=C3=AD?= <sergiodxa@gmail.com>
Date: Sun, 5 Feb 2017 07:43:28 -0500
Subject: [PATCH] [example] Progressive rendered application (#998)

* [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
---
 examples/progressive-render/README.md         | 36 +++++++++++++++++++
 .../progressive-render/components/Loading.js  | 15 ++++++++
 examples/progressive-render/package.json      | 12 +++++++
 examples/progressive-render/pages/index.js    | 30 ++++++++++++++++
 4 files changed, 93 insertions(+)
 create mode 100644 examples/progressive-render/README.md
 create mode 100644 examples/progressive-render/components/Loading.js
 create mode 100644 examples/progressive-render/package.json
 create mode 100644 examples/progressive-render/pages/index.js

diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md
new file mode 100644
index 0000000000..2af3fb7d4d
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..3f54ec2076
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..7742195e0a
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..860b674b97
--- /dev/null
+++ 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>
+)
-- 
GitLab