From 3ced357da36a9274671048fb90c4e2f8fa3c8008 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Daniel=20Xalambr=C3=AD?= Date: Sun, 5 Feb 2017 06:44:12 -0500 Subject: [PATCH 1/8] [add] example of a progressive rendered app --- examples/progressive-render/README.md | 34 +++++++++++++++++++ .../progressive-render/components/Loading.js | 16 +++++++++ examples/progressive-render/package.json | 12 +++++++ examples/progressive-render/pages/index.js | 31 +++++++++++++++++ 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 0000000000000..2631f06d0b62a --- /dev/null +++ b/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 diff --git a/examples/progressive-render/components/Loading.js b/examples/progressive-render/components/Loading.js new file mode 100644 index 0000000000000..d8dfe39f439b1 --- /dev/null +++ b/examples/progressive-render/components/Loading.js @@ -0,0 +1,16 @@ +import React from 'react' + + +export default () => ( +
+

Loading...

+ +
+) diff --git a/examples/progressive-render/package.json b/examples/progressive-render/package.json new file mode 100644 index 0000000000000..75840b1a452a9 --- /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": "^2.0.0-beta", + "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 0000000000000..176c63ead5d55 --- /dev/null +++ b/examples/progressive-render/pages/index.js @@ -0,0 +1,31 @@ +import React from 'react' +import NoSSR from 'react-no-ssr' +import Loading from '../components/Loading' + + +export default () => ( +
+
+

+ This section is server-side rendered. +

+
+ + }> +
+

+ This section is only client-side rendered. +

+
+ + + +
+) From f1d5fef384223d604e5e0cc134654f7e662c04e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Daniel=20Xalambr=C3=AD?= Date: Sun, 5 Feb 2017 07:16:34 -0500 Subject: [PATCH 2/8] [update] remove extra blank line --- examples/progressive-render/components/Loading.js | 1 - examples/progressive-render/pages/index.js | 1 - 2 files changed, 2 deletions(-) diff --git a/examples/progressive-render/components/Loading.js b/examples/progressive-render/components/Loading.js index d8dfe39f439b1..3f54ec2076e43 100644 --- a/examples/progressive-render/components/Loading.js +++ b/examples/progressive-render/components/Loading.js @@ -1,6 +1,5 @@ import React from 'react' - export default () => (

Loading...

diff --git a/examples/progressive-render/pages/index.js b/examples/progressive-render/pages/index.js index 176c63ead5d55..860b674b97b07 100644 --- a/examples/progressive-render/pages/index.js +++ b/examples/progressive-render/pages/index.js @@ -2,7 +2,6 @@ import React from 'react' import NoSSR from 'react-no-ssr' import Loading from '../components/Loading' - export default () => (
From 5b872962815e2f7c6fb59c3a24ca19fd4279a1aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Daniel=20Xalambr=C3=AD?= Date: Sun, 5 Feb 2017 07:18:16 -0500 Subject: [PATCH 3/8] [update] fix typo --- examples/progressive-render/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md index 2631f06d0b62a..572cc45ec053c 100644 --- a/examples/progressive-render/README.md +++ b/examples/progressive-render/README.md @@ -24,7 +24,7 @@ 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). +Sometimes 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. From 8fe15fa878decbe5b330eb4cd481d5a5ceaee700 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Daniel=20Xalambr=C3=AD?= Date: Sun, 5 Feb 2017 07:20:50 -0500 Subject: [PATCH 4/8] [update] more use cases --- examples/progressive-render/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md index 572cc45ec053c..1907776d3ebb5 100644 --- a/examples/progressive-render/README.md +++ b/examples/progressive-render/README.md @@ -24,7 +24,7 @@ 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 compatibility or just because that content isn't enough important for the user (eg. below the fold content). +Sometimes you want to **not** server render some parts of your application. That can be third party components without server render compatibility, components that depends on `window` and other only browsers APIs 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. From cf5cbd4ea07ee05d8e31beb06a71b70ec7991539 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Daniel=20Xalambr=C3=AD?= Date: Sun, 5 Feb 2017 07:25:03 -0500 Subject: [PATCH 5/8] [update] example link --- examples/progressive-render/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md index 1907776d3ebb5..5e3a5f2cfc54c 100644 --- a/examples/progressive-render/README.md +++ b/examples/progressive-render/README.md @@ -32,3 +32,5 @@ 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/ From 8a17304496538b1ec1a98d0fb04fb8bc59b85869 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Daniel=20Xalambr=C3=AD?= Date: Sun, 5 Feb 2017 07:27:02 -0500 Subject: [PATCH 6/8] Update README.md --- examples/progressive-render/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md index 5e3a5f2cfc54c..6c560a241bae5 100644 --- a/examples/progressive-render/README.md +++ b/examples/progressive-render/README.md @@ -26,7 +26,7 @@ now Sometimes you want to **not** server render some parts of your application. That can be third party components without server render compatibility, components that depends on `window` and other only browsers APIs 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. +In that case you can wrap the component in `react-no-ssr` which will only render the component client-side. This example features: From 69103866fbb0ec6e29002504dbc471aed35a20e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Daniel=20Xalambr=C3=AD?= Date: Sun, 5 Feb 2017 07:27:57 -0500 Subject: [PATCH 7/8] [update] next.js dependency version --- examples/progressive-render/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/progressive-render/package.json b/examples/progressive-render/package.json index 75840b1a452a9..7742195e0a1d3 100644 --- a/examples/progressive-render/package.json +++ b/examples/progressive-render/package.json @@ -6,7 +6,7 @@ "start": "next start" }, "dependencies": { - "next": "^2.0.0-beta", + "next": "latest", "react-no-ssr": "1.1.0" } } From a783cbf89837ca76d99d6fbbbb9f7069150c2233 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Daniel=20Xalambr=C3=AD?= Date: Sun, 5 Feb 2017 07:33:37 -0500 Subject: [PATCH 8/8] [update] fix readme typos --- examples/progressive-render/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md index 6c560a241bae5..2af3fb7d4da17 100644 --- a/examples/progressive-render/README.md +++ b/examples/progressive-render/README.md @@ -24,7 +24,7 @@ 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 compatibility, components that depends on `window` and other only browsers APIs or just because that content isn't enough important for the user (eg. below the fold content). +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.