this.root = c}
37 | dangerouslySetInnerHTML={{ __html: '' }}
38 | suppressHydrationWarning
39 | />
40 | );
41 | }
42 | }
--------------------------------------------------------------------------------
/react-progressive-hydration/app/components/intro.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function Intro() {
4 | return (
5 |
6 |
7 |
This is an example of how server-side rendered React can enable progressively hydrated experiences.
8 |
Scroll down. The flash of color you see is an indicator of JavaScript being fetched without any direct change to the UI.
9 |
Loading...
;
66 | // // }
67 |
68 | // // let items;
69 | // // if (typeof window==='undefined') {
70 | // // items = __non_webpack_require__('../../data.json').map(user => ({
71 | // // id: user.login.uuid,
72 | // // username: user.login.username
73 | // // }));
74 | // // }
75 | // // else {
76 | // // items = usePromise(async () => console.log('fetching') || await (await fetch('/api')).json());
77 | // // }
78 |
79 | // return (
80 | //
81 | // {items.map((profile, index) =>
82 | //
83 | // )}
84 | //
98 | {items.map(profile =>
99 |
100 | )}
101 |
114 |
115 |
116 |
117 |
118 |
119 |
{profile.name}
120 |
{profile.username}
121 |
122 |
123 |
`);
45 | response.flushHeaders();
46 | });
47 | await new Promise((resolve, reject) => {
48 | stream.on('error', err => {
49 | stream.unpipe(response);
50 | reject(err);
51 | });
52 | stream.on('end', () => {
53 | response.write('
');
54 | resolve();
55 | });
56 | stream.pipe(response);
57 | });
58 | }
59 | catch (err) {
60 | // @see https://twitter.com/_developit/status/1123041336054177792
61 | response.writeHead(500, {
62 | 'content-type': 'text/pain'
63 | });
64 | response.end(String(err && err.stack || err));
65 | return;
66 | }
67 | });
68 |
69 | app.use('/client.js', (req, res) => {
70 | res.redirect('/build/client.js');
71 | });
72 |
73 | app.get('/favicon.ico', (req, res) => res.end());
74 |
75 | app.use(express.static(path.resolve(__dirname, 'app')));
76 | app.use('/build', express.static(path.resolve(__dirname, 'build')));
77 |
78 | const listener = app.listen(process.env.PORT || 2048, () => {
79 | console.log('Your app is listening on port ' + listener.address().port);
80 | });
81 |
--------------------------------------------------------------------------------
/react-progressive-hydration/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 | const merge = require('webpack-merge');
4 | const WebpackBar = require('webpackbar');
5 | const SizePlugin = require('size-plugin');
6 | const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
7 |
8 | const baseConfig = {
9 | context: path.resolve(__dirname, 'app'),
10 | devtool: 'cheap-source-map',
11 | mode: 'production',
12 | stats: {
13 | all: false,
14 | warnings: true,
15 | errors: true,
16 | errorDetails: true
17 | },
18 | output: {
19 | filename: 'main.js',
20 | chunkFilename: '[name].[contenthash].js'
21 | },
22 | module: {
23 | rules: [
24 | {
25 | test: /\.jsx?$/,
26 | exclude: /node_modules/,
27 | loader: 'babel-loader',
28 | options: {
29 | generatorOpts: {
30 | retainLines: true,
31 | compact: true,
32 | shouldPrintComment: c => /^#__PURE__$/.test(c)
33 | }
34 | }
35 | }
36 | ]
37 | },
38 | watchOptions: {
39 | ignored: /node_modules/
40 | }
41 | };
42 |
43 | module.exports = (_, env) => [
44 | merge(baseConfig, {
45 | name: 'server',
46 | target: 'node',
47 | entry: './server',
48 | optimization: {
49 | minimize: false
50 | },
51 | output: {
52 | path: path.resolve(__dirname, 'build', 'ssr'),
53 | libraryExport: 'default',
54 | libraryTarget: 'commonjs2'
55 | },
56 | plugins: [
57 | new webpack.DefinePlugin({
58 | 'typeof window': '"undefined"',
59 | 'typeof document': '"undefined"'
60 | }),
61 | new WebpackBar({ name: 'server' })
62 | ]
63 | }),
64 | merge(baseConfig, {
65 | name: 'client',
66 | entry: './client',
67 | output: {
68 | filename: 'client.js',
69 | path: path.resolve(__dirname, 'build'),
70 | publicPath: '/build/'
71 | },
72 | plugins: [
73 | new webpack.DefinePlugin({
74 | 'typeof window': '"object"',
75 | 'typeof document': '"object"'
76 | }),
77 | new CleanTerminalPlugin({ onlyInWatchMode: true }),
78 | new WebpackBar({ name: 'client' }),
79 | new SizePlugin()
80 | ].filter(Boolean)
81 | })
82 | ];
83 |
--------------------------------------------------------------------------------
/react-ssr-data/app/cached-fetch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2019 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not
5 | * use this file except in compliance with the License. You may obtain a copy of
6 | * the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations under
14 | * the License.
15 | */
16 |
17 | export const CACHE = {};
18 |
19 | let restored = false;
20 | function restore() {
21 | restored = true;
22 | const c = typeof document !== 'undefined' && document.querySelector('script[type="text/props"]');
23 | if (c) {
24 | const entries = JSON.parse(c.textContent);
25 | for (let i in entries) {
26 | (CACHE[i] = Promise.resolve(entries[i])).value = entries[i];
27 | }
28 | }
29 | }
30 |
31 | export function getCache(url) {
32 | if (typeof window !== 'undefined' && !restored) restore();
33 | return CACHE[url] && CACHE[url].value;
34 | }
35 |
36 | export default function cachedFetch(url) {
37 | if (typeof window !== 'undefined' && !restored) restore();
38 | let req = CACHE[url];
39 | if (!req) {
40 | req = CACHE[url] = fetch(url).then(r => r.json()).then(value => req.value = value);
41 | }
42 | req.use = withValue;
43 | return req;
44 | }
45 |
46 | function withValue(successCallback, errorCallback) {
47 | if ('value' in this) {
48 | successCallback(this.value);
49 | }
50 | else {
51 | this.then(successCallback, errorCallback);
52 | }
53 | }
54 |
55 | export function collect() {
56 | const keys = Object.keys(CACHE);
57 | return Promise.all(keys.map(c => CACHE[c]))
58 | .then(() => new Promise(r => setTimeout(r, 10)))
59 | .then(() => {
60 | if (Object.keys(CACHE).join() !== keys.join()) {
61 | return collect();
62 | }
63 | const entries = {};
64 | for (let i in CACHE) {
65 | entries[i] = CACHE[i].value;
66 | }
67 | return entries;
68 | });
69 | }
70 |
--------------------------------------------------------------------------------
/react-ssr-data/app/client.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2019 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not
5 | * use this file except in compliance with the License. You may obtain a copy of
6 | * the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations under
14 | * the License.
15 | */
16 |
17 | import React from 'react';
18 | import ReactDOM from 'react-dom';
19 | import JssProvider from 'react-jss/lib/JssProvider';
20 | import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
21 | import createGenerateClassName from '@material-ui/core/styles/createGenerateClassName';
22 | import App from './index';
23 | import { collect } from './cached-fetch';
24 |
25 | const generateClassName = createGenerateClassName();
26 |
27 | ReactDOM.hydrate(
28 |
29 |
30 |
32 | ,
33 | window.approot
34 | );
35 |
36 | collect().then(() => {
37 | requestAnimationFrame(() => {
38 | performance.mark('hydrated');
39 | performance.measure('hydrated', 'navigationStart', 'hydrated');
40 | console.log(`Hydrated: ${performance.getEntriesByName('hydrated')[0].duration | 0}ms`);
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/react-ssr-data/app/comments.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2019 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not
5 | * use this file except in compliance with the License. You may obtain a copy of
6 | * the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations under
14 | * the License.
15 | */
16 |
17 | import React from 'react';
18 | import cachedFetch from './cached-fetch';
19 |
20 | export default class Comments extends React.Component {
21 | componentWillMount() {
22 | this.update(this.props);
23 | }
24 |
25 | componentWillReceiveProps(nextProps) {
26 | this.update(nextProps);
27 | }
28 |
29 | update(props) {
30 | const url = `/api/2.2/questions/${props.question}/comments?order=desc&sort=creation&site=stackoverflow&filter=!6JW86p(KK2A)N`;
31 | cachedFetch(url).use(data => {
32 | this.setState({ data });
33 | });
34 | }
35 |
36 | render() {
37 | const { data } = this.state || {};
38 |
39 | return (
40 |
41 | {data && data.items.map(item => (
42 |
43 |
44 |
45 |
48 | {new Date(item.creation_date).toLocaleDateString()}
49 |
50 | ))}
51 |
11 |
12 |
13 | 🍔
14 |
15 |
16 |
17 | Stack Overthrow
18 |
19 |
20 |
21 |
22 | Deep
23 | Shallow
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/react-ssr-data/app/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2019 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not
5 | * use this file except in compliance with the License. You may obtain a copy of
6 | * the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations under
14 | * the License.
15 | */
16 |
17 | import React from 'react';
18 | import Header from './header';
19 | import Questions from './questions';
20 |
21 | export default function App({ url }) {
22 | return (
23 |
24 |
25 |
26 | SSR:
27 | Deep
28 | Shallow
29 |
30 |
31 |
51 |
52 | Rendered on the {typeof window == 'undefined' ? 'server' : 'client'} ({renders} times)
53 |
54 |
55 |
56 | {data && data.items.map((item, index) => (
57 |
58 |
59 |
60 |
63 | {index < 5 &&
65 | ))}
66 |
67 |
54 |
55 |
57 |
58 | );
59 | }
60 |
61 | return attempt(ServerApp, props, maxDepth, successHintCallback).then(cache => {
62 | let html = ReactDOMServer.renderToString(${html}
`);
103 | });
104 |
105 | app.use('/', (req, res, next) => {
106 | const url = req.url.replace(/[^/]+\/\.\.(\/|$)/g, '$1');
107 | const file = path.resolve(__dirname, '..', 'app', url.substring(1));
108 | const ext = (file.match(/\.([a-z0-9]+)$/) || [])[1];
109 |
110 | // only process JS files:
111 | if (ext !== 'js' && ext !== 'mjs') return next();
112 |
113 | const start = Date.now();
114 | const cache = CACHES.get(file);
115 | bundle({ entry: file, cache }).then(({ code, cache }) => {
116 | CACHES.set(file, cache);
117 | res.writeHead(200, {
118 | 'content-type': MIMES[ext],
119 | 'x-bundle-time': Date.now() - start
120 | });
121 | res.end(code);
122 | });
123 | });
124 |
125 | app.use(express.static(path.resolve(__dirname, '..', 'app')));
126 |
127 | app.get('/favicon.ico', (req, res) => res.end());
128 |
129 | /** API Proxy */
130 | app.use('/api', (req, res, next) => {
131 | const url = new URL(req.url, 'https://api.stackexchange.com');
132 | const params = new URLSearchParams(url.search);
133 | params.set('key', STACK_EXCHANGE_KEY);
134 | url.search = params;
135 | const headers = {};
136 | for (let i in req.headers) if (i != 'host' && i != 'cookie') headers[i] = req.headers[i];
137 | fetch(url.href, {
138 | method: req.method,
139 | body: req.body,
140 | headers
141 | }).then(r => {
142 | res.writeHead(r.status, res.headers);
143 | r.body.pipe(res);
144 | }).catch(next);
145 | });
146 |
147 | const listener = app.listen(process.env.PORT || 2048, () => {
148 | console.log('Your app is listening on port ' + listener.address().port);
149 | });
150 |
--------------------------------------------------------------------------------
/react-streaming-ssr/app/client.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './components/app';
4 |
5 | ReactDOM.hydrate(
10 |
11 | loading
}>
12 | {new Array(100).fill().map(() =>
28 | {items.map(profile =>
29 |
30 | )}
31 |
38 |
{profile.name}
39 | {profile.username}
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/react-streaming-ssr/app/server.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOMServer from 'react-dom/server';
3 | import App from './components/app';
4 |
5 | export default async function ssr({ streaming, ...props }) {
6 | if (streaming) {
7 | return ReactDOMServer.renderToNodeStream(
48 | `.replace(/\n\s*/g, '');
49 |
50 | /** SSR */
51 | app.get('/', async (request, response) => {
52 | try {
53 | const renderComplete = ssr({
54 | url: request.url,
55 | streaming: false
56 | });
57 | response.useChunkedEncodingByDefault = true;
58 | response.writeHead(200, {
59 | 'content-type': 'text/html',
60 | 'content-transfer-encoding': 'chunked',
61 | 'x-content-type-options': 'nosniff'
62 | });
63 | response.write(BEFORE);
64 | response.flushHeaders();
65 | const html = await renderComplete;
66 | response.write(html);
67 | response.write('
');
68 | response.end();
69 | }
70 | catch (err) {
71 | if (!response.headersSent) {
72 | response.writeHead(500, {
73 | // @see https://twitter.com/_developit/status/1123041336054177792
74 | 'content-type': 'text/pain'
75 | });
76 | }
77 | response.end(String(err && err.stack || err));
78 | }
79 | });
80 |
81 | app.get('/streaming', async (request, response) => {
82 | try {
83 | const stream = await ssr({
84 | url: request.url
85 | });
86 | // Wait until data starts flowing to send a 200 OK,
87 | // so errors don't trigger "headers already sent".
88 | const start = Date.now();
89 | stream.on('data', function handleData() {
90 | console.log('Render Start: ', Date.now() - start);
91 | stream.off('data', handleData);
92 | response.useChunkedEncodingByDefault = true;
93 | response.writeHead(200, {
94 | 'content-type': 'text/html',
95 | 'content-transfer-encoding': 'chunked',
96 | 'x-content-type-options': 'nosniff'
97 | });
98 | response.write(BEFORE);
99 | response.flushHeaders();
100 | });
101 | await new Promise((resolve, reject) => {
102 | stream.on('error', err => {
103 | stream.unpipe(response);
104 | reject(err);
105 | });
106 | stream.on('end', () => {
107 | console.log('Render End: ', Date.now() - start);
108 | response.write(' 
4 |
5 | ### Installation
6 |
7 | ```sh
8 | git clone git@github.com:GoogleChromeLabs/progressive-rendering-frameworks-samples.git
9 | cd progressive-rendering-frameworks-samples
10 |
11 | npm install
12 | npm run lerna bootstrap
13 | ```
14 |
15 | ## Run the Progressive Hydration Demo
16 |
17 | ```sh
18 | cd react-progressive-hydration
19 | npm start
20 | ```
21 |
22 | Now check out the demo on http://localhost:2048!
23 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "packages": [
3 | "react-*",
4 | "angular-*",
5 | "vue-*"
6 | ],
7 | "version": "0.0.0"
8 | }
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "progressive-rendering-frameworks-samples",
3 | "version": "0.0.1",
4 | "scripts": {
5 | "lerna": "lerna",
6 | "bench:streaming": "autocannon http://localhost:2048 && autocannon http://localhost:2048/streaming"
7 | },
8 | "license": "Apache-2.0",
9 | "devDependencies": {
10 | "lerna": "^3.13.1"
11 | },
12 | "engines": {
13 | "node": ">=10"
14 | },
15 | "dependencies": {
16 | "autocannon": "^3.2.1"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/react-progressive-hydration/app/assets/hydrate.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/progressive-rendering-frameworks-samples/82ccd045264753c11966c59bb63dcba76b8b9f5c/react-progressive-hydration/app/assets/hydrate.jpg
--------------------------------------------------------------------------------
/react-progressive-hydration/app/assets/hydrate_lg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/progressive-rendering-frameworks-samples/82ccd045264753c11966c59bb63dcba76b8b9f5c/react-progressive-hydration/app/assets/hydrate_lg.jpg
--------------------------------------------------------------------------------
/react-progressive-hydration/app/client.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './components/app.js';
4 |
5 | ReactDOM.hydrate(
116 | 
61 | {item.owner.display_name}
62 |