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 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 has been minimized.

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

This comment has been minimized.

@Timer Timer marked this pull request as ready for review April 19, 2020 07:23
@ijjk

This comment has been minimized.

@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

Copy link
Member

@ijjk ijjk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🎉

@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
@Timer Timer deleted the enhancement/react-refresh branch April 19, 2020 17:58
@matteing
Copy link

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

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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants