diff --git a/fixtures/fizz/README.md b/fixtures/fizz/README.md new file mode 100644 index 0000000000000..63acd3ddc545d --- /dev/null +++ b/fixtures/fizz/README.md @@ -0,0 +1,30 @@ +# Fizz Fixtures + +A set of basic tests for Fizz primarily focussed on baseline perfomrance of legacy renderToString and streaming implementations. + +## Setup + +To reference a local build of React, first run `npm run build` at the root +of the React project. Then: + +``` +cd fixtures/fizz +yarn +yarn start +``` + +The `start` command runs a webpack dev server and a server-side rendering server in development mode with hot reloading. + +**Note: whenever you make changes to React and rebuild it, you need to re-run `yarn` in this folder:** + +``` +yarn +``` + +If you want to try the production mode instead run: + +``` +yarn start:prod +``` + +This will pre-build all static resources and then start a server-side rendering HTTP server that hosts the React app and service the static resources (without hot reloading). diff --git a/fixtures/fizz/package.json b/fixtures/fizz/package.json new file mode 100644 index 0000000000000..42becc4b8bce4 --- /dev/null +++ b/fixtures/fizz/package.json @@ -0,0 +1,53 @@ +{ + "name": "react-ssr", + "version": "0.1.0", + "private": true, + "engines": { + "node": ">=14.9.0" + }, + "license": "MIT", + "dependencies": { + "@babel/core": "7.14.3", + "@babel/register": "7.13.16", + "babel-loader": "8.1.0", + "babel-preset-react-app": "10.0.0", + "compression": "^1.7.4", + "concurrently": "^5.3.0", + "express": "^4.17.1", + "nodemon": "^2.0.6", + "react": "link:../../build/node_modules/react", + "react-dom": "link:../../build/node_modules/react-dom", + "react-error-boundary": "^3.1.3", + "resolve": "1.12.0", + "rimraf": "^3.0.2", + "webpack": "4.44.2", + "webpack-cli": "^4.2.0" + }, + "devDependencies": { + "cross-env": "^7.0.3", + "prettier": "1.19.1" + }, + "scripts": { + "start": "concurrently \"npm run server:dev\" \"npm run bundler:dev\"", + "start:prod": "concurrently \"npm run server:prod\" \"npm run bundler:prod\"", + "server:dev": "cross-env NODE_ENV=development nodemon -- --inspect server/server.js", + "server:prod": "cross-env NODE_ENV=production nodemon -- server/server.js", + "bundler:dev": "cross-env NODE_ENV=development nodemon -- scripts/build.js", + "bundler:prod": "cross-env NODE_ENV=production nodemon -- scripts/build.js" + }, + "babel": { + "presets": [ + [ + "react-app", + { + "runtime": "automatic" + } + ] + ] + }, + "nodemonConfig": { + "ignore": [ + "build/*" + ] + } +} diff --git a/fixtures/fizz/public/main.css b/fixtures/fizz/public/main.css new file mode 100644 index 0000000000000..34b4ecb1ce7f4 --- /dev/null +++ b/fixtures/fizz/public/main.css @@ -0,0 +1,74 @@ +body { + font-family: system-ui, sans-serif; +} + +* { + box-sizing: border-box; +} + +nav { + padding: 20px; +} + +.sidebar { + padding: 10px; + height: 500px; + float: left; + width: 30%; +} + +.post { + padding: 20px; + float: left; + width: 60%; +} + +h1, h2 { + padding: 0; +} + +ul, li { + margin: 0; +} + +.post p { + font-size: larger; + font-family: Georgia, serif; +} + +.comments { + margin-top: 40px; +} + +.comment { + border: 2px solid #aaa; + border-radius: 4px; + padding: 20px; +} + +/* https://codepen.io/mandelid/pen/vwKoe */ +.spinner { + display: inline-block; + transition: opacity linear 0.1s; + width: 20px; + height: 20px; + border: 3px solid rgba(80, 80, 80, 0.5); + border-radius: 50%; + border-top-color: #fff; + animation: spin 1s ease-in-out infinite; + opacity: 0; +} +.spinner--active { + opacity: 1; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} +@keyframes spin { + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/fixtures/fizz/scripts/build.js b/fixtures/fizz/scripts/build.js new file mode 100644 index 0000000000000..452f7c750f61f --- /dev/null +++ b/fixtures/fizz/scripts/build.js @@ -0,0 +1,53 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +'use strict'; + +const path = require('path'); +const rimraf = require('rimraf'); +const webpack = require('webpack'); + +const isProduction = process.env.NODE_ENV === 'production'; +rimraf.sync(path.resolve(__dirname, '../build')); +webpack( + { + mode: isProduction ? 'production' : 'development', + devtool: isProduction ? 'source-map' : 'cheap-module-source-map', + entry: [path.resolve(__dirname, '../src/index.js')], + output: { + path: path.resolve(__dirname, '../build'), + filename: 'main.js', + }, + module: { + rules: [ + { + test: /\.js$/, + use: 'babel-loader', + exclude: /node_modules/, + }, + ], + }, + }, + (err, stats) => { + if (err) { + console.error(err.stack || err); + if (err.details) { + console.error(err.details); + } + process.exit(1); + } + const info = stats.toJson(); + if (stats.hasErrors()) { + console.log('Finished running webpack with errors.'); + info.errors.forEach(e => console.error(e)); + process.exit(1); + } else { + console.log('Finished running webpack.'); + } + } +); diff --git a/fixtures/fizz/server/delays.js b/fixtures/fizz/server/delays.js new file mode 100644 index 0000000000000..20a1e870b4e0c --- /dev/null +++ b/fixtures/fizz/server/delays.js @@ -0,0 +1,18 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +// Tweak these to play with different kinds of latency. + +// How long the data fetches on the server. +exports.API_DELAY = 2000; + +// How long the server waits for data before giving up. +exports.ABORT_DELAY = 10000; + +// How long serving the JS bundles is delayed. +exports.JS_BUNDLE_DELAY = 4000; diff --git a/fixtures/fizz/server/render-to-buffer.js b/fixtures/fizz/server/render-to-buffer.js new file mode 100644 index 0000000000000..ba509b812b733 --- /dev/null +++ b/fixtures/fizz/server/render-to-buffer.js @@ -0,0 +1,83 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import {Writable} from 'stream'; +import * as React from 'react'; +import {renderToPipeableStream} from 'react-dom/server'; +import App from '../src/App'; +import {ABORT_DELAY} from './delays'; + +// In a real setup, you'd read it from webpack build stats. +let assets = { + 'main.js': '/main.js', + 'main.css': '/main.css', +}; + +function HtmlWritable(options) { + Writable.call(this, options); + this.chunks = []; + this.html = ''; +} + +HtmlWritable.prototype = Object.create(Writable.prototype); +HtmlWritable.prototype.getHtml = function getHtml() { + return this.html; +}; +HtmlWritable.prototype._write = function _write(chunk, encoding, callback) { + this.chunks.push(chunk); + callback(); +}; +HtmlWritable.prototype._final = function _final(callback) { + this.html = Buffer.concat(this.chunks).toString(); + callback(); +}; + +module.exports = function render(url, res) { + let writable = new HtmlWritable(); + res.socket.on('error', error => { + console.error('Fatal', error); + }); + let didError = false; + let didFinish = false; + + writable.on('finish', () => { + // If something errored before we started streaming, we set the error code appropriately. + res.statusCode = didError ? 500 : 200; + res.setHeader('Content-type', 'text/html'); + res.send(writable.getHtml()); + }); + + const {pipe, abort} = renderToPipeableStream(, { + bootstrapScripts: [assets['main.js']], + onAllReady() { + // Full completion. + // You can use this for SSG or crawlers. + didFinish = true; + }, + onShellReady() { + // If something errored before we started streaming, we set the error code appropriately. + pipe(writable); + }, + onShellError(x) { + // Something errored before we could complete the shell so we emit an alternative shell. + res.statusCode = 500; + res.send('

Error

'); + }, + onError(x) { + didError = true; + console.error(x); + }, + }); + // Abandon and switch to client rendering if enough time passes. + // Try lowering this to see the client recover. + setTimeout(() => { + if (!didFinish) { + abort(); + } + }, ABORT_DELAY); +}; diff --git a/fixtures/fizz/server/render-to-stream.js b/fixtures/fizz/server/render-to-stream.js new file mode 100644 index 0000000000000..063d776a8dd79 --- /dev/null +++ b/fixtures/fizz/server/render-to-stream.js @@ -0,0 +1,57 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import * as React from 'react'; +import {renderToPipeableStream} from 'react-dom/server'; +import App from '../src/App'; +import {ABORT_DELAY} from './delays'; + +// In a real setup, you'd read it from webpack build stats. +let assets = { + 'main.js': '/main.js', + 'main.css': '/main.css', +}; + +module.exports = function render(url, res) { + // The new wiring is a bit more involved. + res.socket.on('error', error => { + console.error('Fatal', error); + }); + let didError = false; + let didFinish = false; + const {pipe, abort} = renderToPipeableStream(, { + bootstrapScripts: [assets['main.js']], + onAllReady() { + // Full completion. + // You can use this for SSG or crawlers. + didFinish = true; + }, + onShellReady() { + // If something errored before we started streaming, we set the error code appropriately. + res.statusCode = didError ? 500 : 200; + res.setHeader('Content-type', 'text/html'); + setImmediate(() => pipe(res)); + }, + onShellError(x) { + // Something errored before we could complete the shell so we emit an alternative shell. + res.statusCode = 500; + res.send('

Error

'); + }, + onError(x) { + didError = true; + console.error(x); + }, + }); + // Abandon and switch to client rendering if enough time passes. + // Try lowering this to see the client recover. + setTimeout(() => { + if (!didFinish) { + abort(); + } + }, ABORT_DELAY); +}; diff --git a/fixtures/fizz/server/render-to-string.js b/fixtures/fizz/server/render-to-string.js new file mode 100644 index 0000000000000..04ffff06b798b --- /dev/null +++ b/fixtures/fizz/server/render-to-string.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import * as React from 'react'; +import {renderToString} from 'react-dom/server'; +import App from '../src/App'; +import {API_DELAY, ABORT_DELAY} from './delays'; +import {performance} from 'perf_hooks'; + +// In a real setup, you'd read it from webpack build stats. +let assets = { + 'main.js': '/main.js', + 'main.css': '/main.css', +}; + +let textEncoder = new TextEncoder(); + +module.exports = function render(url, res) { + let payload = + '' + + renderToString() + + ''; + let arr = textEncoder.encode(payload); + + let buf = Buffer.from(arr); + res.statusCode = 200; + res.setHeader('Content-type', 'text/html'); + res.send(buf); +}; diff --git a/fixtures/fizz/server/server.js b/fixtures/fizz/server/server.js new file mode 100644 index 0000000000000..38519e5743105 --- /dev/null +++ b/fixtures/fizz/server/server.js @@ -0,0 +1,108 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +'use strict'; + +const babelRegister = require('@babel/register'); +babelRegister({ + ignore: [/[\\\/](build|server\/server|node_modules)[\\\/]/], + presets: [['react-app', {runtime: 'automatic'}]], + plugins: ['@babel/transform-modules-commonjs'], +}); + +const express = require('express'); +const compress = require('compression'); +const {readFileSync} = require('fs'); +const path = require('path'); +const renderToString = require('./render-to-string'); +const renderToStream = require('./render-to-stream'); +const renderToBuffer = require('./render-to-buffer'); +const {JS_BUNDLE_DELAY} = require('./delays'); + +const PORT = process.env.PORT || 4000; +const app = express(); + +app.use(compress()); +app.get( + '/', + handleErrors(async function(req, res) { + await waitForWebpack(); + renderToStream(req.url, res); + }) +); +app.get( + '/string', + handleErrors(async function(req, res) { + await waitForWebpack(); + renderToString(req.url, res); + }) +); +app.get( + '/stream', + handleErrors(async function(req, res) { + await waitForWebpack(); + renderToStream(req.url, res); + }) +); +app.get( + '/buffer', + handleErrors(async function(req, res) { + await waitForWebpack(); + renderToBuffer(req.url, res); + }) +); +app.use(express.static('build')); +app.use(express.static('public')); + +app + .listen(PORT, () => { + console.log(`Listening at ${PORT}...`); + }) + .on('error', function(error) { + if (error.syscall !== 'listen') { + throw error; + } + const isPipe = portOrPipe => Number.isNaN(portOrPipe); + const bind = isPipe(PORT) ? 'Pipe ' + PORT : 'Port ' + PORT; + switch (error.code) { + case 'EACCES': + console.error(bind + ' requires elevated privileges'); + process.exit(1); + break; + case 'EADDRINUSE': + console.error(bind + ' is already in use'); + process.exit(1); + break; + default: + throw error; + } + }); + +function handleErrors(fn) { + return async function(req, res, next) { + try { + return await fn(req, res); + } catch (x) { + next(x); + } + }; +} + +async function waitForWebpack() { + while (true) { + try { + readFileSync(path.resolve(__dirname, '../build/main.js')); + return; + } catch (err) { + console.log( + 'Could not find webpack build output. Will retry in a second...' + ); + await new Promise(resolve => setTimeout(resolve, 1000)); + } + } +} diff --git a/fixtures/fizz/src/App.js b/fixtures/fizz/src/App.js new file mode 100644 index 0000000000000..8610a4603cedc --- /dev/null +++ b/fixtures/fizz/src/App.js @@ -0,0 +1,26 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import Html from './Html'; +import BigComponent from './BigComponent'; + +export default function App({assets, title}) { + const components = []; + + for (let i = 0; i <= 250; i++) { + components.push(); + } + + return ( + +

{title}

+ {components} +

all done

+ + ); +} diff --git a/fixtures/fizz/src/BigComponent.js b/fixtures/fizz/src/BigComponent.js new file mode 100644 index 0000000000000..e199199106840 --- /dev/null +++ b/fixtures/fizz/src/BigComponent.js @@ -0,0 +1,181 @@ +export default function BigComponent() { + return ( +
+
+

Description

+

+ This page has repeating sections purposefully to create very large + trees that stress the rendering and streaming capabilities of Fizz +

+
+
+

Another Section

+

this section has a list

+
    +
  • item one
    • +
  • item two
    • +
  • item three
    • +
  • item four
    • +
  • item five
    • +
+

it isn't a very interesting list

+
+
+

Smiley Section

+

here is a list of smiley emojis

+
    +
  1. ๐Ÿ˜€
    2. +
  2. ๐Ÿ˜ƒ
    3. +
  3. ๐Ÿ˜„
    4. +
  4. ๐Ÿ˜
    5. +
  5. ๐Ÿ˜†
    6. +
  6. ๐Ÿ˜…
    7. +
  7. ๐Ÿ˜‚
    8. +
  8. ๐Ÿคฃ
    9. +
  9. ๐Ÿฅฒ
    10. +
  10. โ˜บ๏ธ
    11. +
  11. ๐Ÿ˜Š
    12. +
  12. ๐Ÿ˜‡
    13. +
  13. ๐Ÿ™‚
    14. +
  14. ๐Ÿ™ƒ
    15. +
  15. ๐Ÿ˜‰
    16. +
  16. ๐Ÿ˜Œ
    17. +
  17. ๐Ÿ˜
    18. +
  18. ๐Ÿฅฐ
    19. +
  19. ๐Ÿ˜˜
    20. +
  20. ๐Ÿ˜—
    21. +
  21. ๐Ÿ˜™
    22. +
  22. ๐Ÿ˜š
    23. +
  23. ๐Ÿ˜‹
    24. +
  24. ๐Ÿ˜›
    25. +
  25. ๐Ÿ˜
    26. +
  26. ๐Ÿ˜œ
    27. +
  27. ๐Ÿคช
    28. +
  28. ๐Ÿคจ
    29. +
  29. ๐Ÿง
    30. +
  30. ๐Ÿค“
    31. +
  31. ๐Ÿ˜Ž
    32. +
  32. ๐Ÿฅธ
    33. +
  33. ๐Ÿคฉ
    34. +
  34. ๐Ÿฅณ
    35. +
  35. ๐Ÿ˜
    36. +
  36. ๐Ÿ˜’
    37. +
  37. ๐Ÿ˜ž
    38. +
  38. ๐Ÿ˜”
    39. +
  39. ๐Ÿ˜Ÿ
    40. +
  40. ๐Ÿ˜•
    41. +
  41. ๐Ÿ™
    42. +
  42. โ˜น๏ธ
    43. +
  43. ๐Ÿ˜ฃ
    44. +
  44. ๐Ÿ˜–
    45. +
  45. ๐Ÿ˜ซ
    46. +
  46. ๐Ÿ˜ฉ
    47. +
  47. ๐Ÿฅบ
    48. +
  48. ๐Ÿ˜ข
    49. +
  49. ๐Ÿ˜ญ
    50. +
  50. ๐Ÿ˜ค
    51. +
  51. ๐Ÿ˜ 
    52. +
  52. ๐Ÿ˜ก
    53. +
  53. ๐Ÿคฌ
    54. +
  54. ๐Ÿคฏ
    55. +
  55. ๐Ÿ˜ณ
    56. +
  56. ๐Ÿฅต
    57. +
  57. ๐Ÿฅถ
    58. +
  58. ๐Ÿ˜ฑ
    59. +
  59. ๐Ÿ˜จ
    60. +
  60. ๐Ÿ˜ฐ
    61. +
  61. ๐Ÿ˜ฅ
    62. +
  62. ๐Ÿ˜“
    63. +
  63. ๐Ÿค—
    64. +
  64. ๐Ÿค”
    65. +
  65. ๐Ÿคญ
    66. +
  66. ๐Ÿคซ
    67. +
  67. ๐Ÿคฅ
    68. +
  68. ๐Ÿ˜ถ
    69. +
  69. ๐Ÿ˜
    70. +
  70. ๐Ÿ˜‘
    71. +
  71. ๐Ÿ˜ฌ
    72. +
  72. ๐Ÿ™„
    73. +
  73. ๐Ÿ˜ฏ
    74. +
  74. ๐Ÿ˜ฆ
    75. +
  75. ๐Ÿ˜ง
    76. +
  76. ๐Ÿ˜ฎ
    77. +
  77. ๐Ÿ˜ฒ
    78. +
  78. ๐Ÿฅฑ
    79. +
  79. ๐Ÿ˜ด
    80. +
  80. ๐Ÿคค
    81. +
  81. ๐Ÿ˜ช
    82. +
  82. ๐Ÿ˜ต
    83. +
  83. ๐Ÿค
    84. +
  84. ๐Ÿฅด
    85. +
  85. ๐Ÿคข
    86. +
  86. ๐Ÿคฎ
    87. +
  87. ๐Ÿคง
    88. +
  88. ๐Ÿ˜ท
    89. +
  89. ๐Ÿค’
    90. +
  90. ๐Ÿค•
    91. +
  91. ๐Ÿค‘
    92. +
  92. ๐Ÿค 
    93. +
  93. ๐Ÿ˜ˆ
    94. +
  94. ๐Ÿ‘ฟ
    95. +
  95. ๐Ÿ‘น
    96. +
  96. ๐Ÿ‘บ
    97. +
  97. ๐Ÿคก
    98. +
  98. ๐Ÿ’ฉ
    99. +
  99. ๐Ÿ‘ป
    100. +
  100. ๐Ÿ’€
    101. +
  101. โ˜ ๏ธ
    102. +
  102. ๐Ÿ‘ฝ
    103. +
  103. ๐Ÿ‘พ
    104. +
  104. ๐Ÿค–
    105. +
  105. ๐ŸŽƒ
    106. +
  106. ๐Ÿ˜บ
    107. +
  107. ๐Ÿ˜ธ
    108. +
  108. ๐Ÿ˜น
    109. +
  109. ๐Ÿ˜ป
    110. +
  110. ๐Ÿ˜ผ
    111. +
  111. ๐Ÿ˜ฝ
    112. +
  112. ๐Ÿ™€
    113. +
  113. ๐Ÿ˜ฟ
    114. +
  114. ๐Ÿ˜พ
    115. +
+
+
+

Translation Section

+

This is the final section you will see before the sections repeat

+

+ English: This is a text block translated from English to another + language in Google Translate. +

+

+ Korean: ์ด๊ฒƒ์€ Google ๋ฒˆ์—ญ์—์„œ ์˜์–ด์—์„œ ๋‹ค๋ฅธ ์–ธ์–ด๋กœ ๋ฒˆ์—ญ๋œ ํ…์ŠคํŠธ + ๋ธ”๋ก์ž…๋‹ˆ๋‹ค. +

+

+ Hindi: เคฏเคน Google เค…เคจเฅเคตเคพเคฆ เคฎเฅ‡เค‚ เค…เค‚เค—เฅเคฐเฅ‡เคœเคผเฅ€ เคธเฅ‡ เคฆเฅ‚เคธเคฐเฅ€ เคญเคพเคทเคพ เคฎเฅ‡เค‚ เค…เคจเฅเคตเคพเคฆเคฟเคค + เคŸเฅ‡เค•เฅเคธเฅเคŸ เคฌเฅเคฒเฅ‰เค• เคนเฅˆเฅค +

+

+ Lithuanian: Tai teksto blokas, iลกverstas iลก anglลณ kalbos ฤฏ kitฤ… + โ€žGoogleโ€œ vertฤ—jo kalbฤ…. +

+
+
+
+
+
+
+ + we're deep in some nested divs here, not that you can tell + visually + +
+
+
+
+
+
+
+
+ ); +} diff --git a/fixtures/fizz/src/Html.js b/fixtures/fizz/src/Html.js new file mode 100644 index 0000000000000..e834f84bac872 --- /dev/null +++ b/fixtures/fizz/src/Html.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +export default function Html({assets, children, title}) { + return ( + + + + + + + {title} + + +