[example] Progressive rendered application

examples/progressive-render/README.md

@@ -0,0 +1,34 @@
+# 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
+
+Some times you want to **not** server render some parts of your application. That can be third party components without server render compatibility or just because that content isn't enough important for the user (eg. below the fold content).
+
+In that cases you can use `react-no-ssr` to wrap that client-only components and avoid server rendering it at all and then do the render in the client after the application has loaded.
+
+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

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>
+)

examples/progressive-render/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "progressive-render",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^2.0.0-beta",
+    "react-no-ssr": "1.1.0"
+  }
+}

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>
+)