Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Experimental: React Refresh Support #12008

Merged
merged 13 commits into from Apr 19, 2020
Merged

Conversation

@Timer
Copy link
Member

Timer commented Apr 18, 2020

This pull request adds experimental support for React Refresh (aka Fast Refresh, hot reloading) to Next.js.

It can be enabled in next.config.js:

module.exports = {
  experimental: {
    reactRefresh: true
  }
}

Contains a basic test case. We'll need to work with @gaearon to write a full acceptance suite before this feature is enabled-by-default.


Related PR: #12006

Implementation advice from facebook/react#16604

@ijjk

This comment was marked as outdated.

@Timer Timer force-pushed the Timer:enhancement/react-refresh branch from 9e7983b to 5ac499a Apr 19, 2020
@Timer Timer force-pushed the Timer:enhancement/react-refresh branch from 5ac499a to 62b327c Apr 19, 2020
@Timer Timer added this to the 9.3.6 milestone Apr 19, 2020
@ijjk

This comment was marked as outdated.

Timer added 3 commits Apr 19, 2020
…-refresh
@Timer Timer marked this pull request as ready for review Apr 19, 2020
@Timer Timer requested review from ijjk, lfades and timneutkens as code owners Apr 19, 2020
@ijjk

This comment was marked as outdated.

@ijjk
Copy link
Member

ijjk commented Apr 19, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
buildDuration 12s 11.9s -88ms
nodeModulesSize 55.5 MB 55.6 MB ⚠️ +77.3 kB
Page Load Tests Overall decrease ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
/ failed reqs 0 0
/ total time (seconds) 2.125 2.069 -0.06
/ avg req/sec 1176.2 1208.24 ⚠️ +32.04
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.178 1.227 ⚠️ +0.05
/error-in-render avg req/sec 2122.44 2037.88 -84.56
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5e5e.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39 kB 39 kB
Overall change 56.7 kB 56.7 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.module.js gzip 4.79 kB 4.79 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39 kB 39 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.12 kB 3.12 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.85 kB 7.85 kB
Client Pages Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
index.html gzip 928 B 928 B
link.html gzip 938 B 938 B
withRouter.html gzip 926 B 926 B
Overall change 2.79 kB 2.79 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
buildDuration 13.2s 12.6s -553ms
nodeModulesSize 55.5 MB 55.6 MB ⚠️ +77.3 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5e5e.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39 kB 39 kB
Overall change 56.7 kB 56.7 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.module.js gzip 4.79 kB 4.79 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39 kB 39 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.12 kB 3.12 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.85 kB 7.85 kB
Client Pages Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_error.js 558 kB 558 kB ⚠️ +152 B
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 558 kB 558 kB ⚠️ +152 B
link.js 594 kB 595 kB ⚠️ +152 B
routerDirect.js 587 kB 587 kB ⚠️ +152 B
withRouter.js 587 kB 587 kB ⚠️ +152 B
Overall change 2.89 MB 2.89 MB ⚠️ +760 B
@ijjk
Copy link
Member

ijjk commented Apr 19, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
buildDuration 12.1s 12.3s ⚠️ +150ms
nodeModulesSize 55.5 MB 55.6 MB ⚠️ +77.3 kB
Page Load Tests Overall increase ✓
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
/ failed reqs 0 0
/ total time (seconds) 2.123 2.07 -0.05
/ avg req/sec 1177.81 1207.85 ⚠️ +30.04
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.213 1.192 -0.02
/error-in-render avg req/sec 2061.07 2097.41 ⚠️ +36.34
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5e5e.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39 kB 39 kB
Overall change 56.7 kB 56.7 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.module.js gzip 4.79 kB 4.79 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39 kB 39 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.12 kB 3.12 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.85 kB 7.85 kB
Client Pages Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
index.html gzip 928 B 928 B
link.html gzip 938 B 938 B
withRouter.html gzip 926 B 926 B
Overall change 2.79 kB 2.79 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
buildDuration 12.9s 12.8s -197ms
nodeModulesSize 55.5 MB 55.6 MB ⚠️ +77.3 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5e5e.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39 kB 39 kB
Overall change 56.7 kB 56.7 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.module.js gzip 4.79 kB 4.79 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39 kB 39 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.12 kB 3.12 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.85 kB 7.85 kB
Client Pages Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_error.js 558 kB 558 kB ⚠️ +152 B
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 558 kB 558 kB ⚠️ +152 B
link.js 594 kB 595 kB ⚠️ +152 B
routerDirect.js 587 kB 587 kB ⚠️ +152 B
withRouter.js 587 kB 587 kB ⚠️ +152 B
Overall change 2.89 MB 2.89 MB ⚠️ +760 B
Timer added 5 commits Apr 19, 2020
@ijjk
ijjk approved these changes Apr 19, 2020
Copy link
Member

ijjk left a comment

LGTM 🎉

@Timer Timer added the ready to land label Apr 19, 2020
@ijjk
Copy link
Member

ijjk commented Apr 19, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
buildDuration 12.9s 13s ⚠️ +107ms
nodeModulesSize 55.5 MB 55.6 MB ⚠️ +76.9 kB
Page Load Tests Overall decrease ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
/ failed reqs 0 0
/ total time (seconds) 2.223 2.284 ⚠️ +0.06
/ avg req/sec 1124.46 1094.65 -29.81
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.276 1.317 ⚠️ +0.04
/error-in-render avg req/sec 1959.08 1898.28 -60.8
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5e5e.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39 kB 39 kB
Overall change 56.7 kB 56.7 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.module.js gzip 4.79 kB 4.79 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39 kB 39 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.12 kB 3.12 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.85 kB 7.85 kB
Client Pages Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
index.html gzip 928 B 928 B
link.html gzip 938 B 938 B
withRouter.html gzip 926 B 926 B
Overall change 2.79 kB 2.79 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
buildDuration 13.5s 13.6s ⚠️ +40ms
nodeModulesSize 55.5 MB 55.6 MB ⚠️ +76.9 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..5e5e.js gzip 10.3 kB 10.3 kB
framework.a1..NSE.txt gzip 220 B 220 B
framework.a1..NSE.txt gzip 220 B 220 B
framework.HASH.js gzip 39 kB 39 kB
Overall change 56.7 kB 56.7 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
main-HASH.module.js gzip 4.79 kB 4.79 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39 kB 39 kB
Overall change 51.4 kB 51.4 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB
Overall change 26.2 kB 26.2 kB
Client Pages
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.js gzip 1.23 kB 1.23 kB
_error.js gzip 3.12 kB 3.12 kB
hooks.js gzip 663 B 663 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 7.85 kB 7.85 kB
Client Pages Modern
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_app.module.js gzip 598 B 598 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary Timer/next.js enhancement/react-refresh Change
_error.js 558 kB 558 kB ⚠️ +152 B
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 558 kB 558 kB ⚠️ +152 B
link.js 594 kB 595 kB ⚠️ +152 B
routerDirect.js 587 kB 587 kB ⚠️ +152 B
withRouter.js 587 kB 587 kB ⚠️ +152 B
Overall change 2.89 MB 2.89 MB ⚠️ +760 B
@Timer Timer merged commit 450d4bd into vercel:canary Apr 19, 2020
19 of 21 checks passed
19 of 21 checks passed
build
Details
PR Stats
Details
lint
Details
Check Pre-compiled
Details
Test All (1)
Details
Test All (2)
Details
Test All (3)
Details
Test All (4)
Details
Test All (5)
Details
Test All (6)
Details
Test Firefox (production)
Details
Test Safari (production)
Details
thank you, next
Details
Test Safari 10.1 (nav)
Details
Potentially publish release
Details
azure next.js Build #20200419.19 had test failures
Details
azure next.js (test_chrome node-10-1) test_chrome node-10-1 failed
Details
azure next.js (test_chrome node-10-2) test_chrome node-10-2 succeeded
Details
azure next.js (test_chrome node-10-3) test_chrome node-10-3 succeeded
Details
azure next.js (test_chrome node-10-4) test_chrome node-10-4 succeeded
Details
azure next.js (test_ie11) test_ie11 succeeded
Details
@Timer Timer deleted the Timer:enhancement/react-refresh branch Apr 19, 2020
@matteing
Copy link

matteing commented Apr 28, 2020

Hi! This isn't exactly a scientific report, but...

I tried enabling this feature on a semi-large NextJS app and am facing a regression:
Screen Shot 2020-04-28 at 4 57 48 PM

Happy to provide any further stack traces or reports if necessary.

@Timer
Copy link
Member Author

Timer commented Apr 28, 2020

@matteing if you can provide a minimum reproducible demo (or share your project in private) we'd be happy to take a look!

@matteing
Copy link

matteing commented Apr 28, 2020

The repo is here: https://gitlab.com/makerlog/next
I (locally) executed a yarn upgrade next and added the experimental settings to the config file, which resulted in that error.

@paesvitor
Copy link

paesvitor commented Apr 29, 2020

Hi! This isn't exactly a scientific report, but...

I tried enabling this feature on a semi-large NextJS app and am facing a regression:
Screen Shot 2020-04-28 at 4 57 48 PM

Happy to provide any further stack traces or reports if necessary.

same issue here

@Timer
Copy link
Member Author

Timer commented Apr 29, 2020

Tracking the Sass bug here: #12304

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants
You can’t perform that action at this time.