[Beta] Fewer sync calls

[gaearon]

This tries to make hydration asynchronous. (By fixing setState-during-hydration issues and adding a top-level Suspense boundary.) Not sure if this works.

[github-actions]

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	95.24 KB (🟡 +314 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Hundred Eighty-six Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/	51.39 KB (🟡 +368 B)	146.63 KB
/404	50.49 KB (🟡 +367 B)	145.73 KB
/apis	51.08 KB (🟡 +366 B)	146.32 KB
/apis/reactdom	51.19 KB (🟡 +367 B)	146.43 KB
/apis/render	53.25 KB (🟡 +364 B)	148.49 KB
/apis/useref	56.31 KB (🟡 +365 B)	151.55 KB
/apis/usestate	62.2 KB (🟡 +368 B)	157.44 KB
/blog	41.32 KB (🟡 +295 B)	136.55 KB
/blog/2013/06/02/jsfiddle-integration	61.73 KB (🟡 +326 B)	156.97 KB
/blog/2013/06/05/why-react	63.46 KB (🟡 +326 B)	158.7 KB
/blog/2013/06/12/community-roundup	63.16 KB (🟡 +325 B)	158.4 KB
/blog/2013/06/19/community-roundup-2	63.83 KB (🟡 +326 B)	159.07 KB
/blog/2013/06/21/react-v0-3-3	61.88 KB (🟡 +325 B)	157.12 KB
/blog/2013/06/27/community-roundup-3	64.19 KB (🟡 +326 B)	159.43 KB
/blog/2013/07/02/react-v0-4-autobind-by-default	62.5 KB (🟡 +328 B)	157.74 KB
/blog/2013/07/03/community-roundup-4	63.57 KB (🟡 +326 B)	158.8 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values	62.37 KB (🟡 +327 B)	157.61 KB
/blog/2013/07/17/react-v0-4-0	63.08 KB (🟡 +326 B)	158.32 KB
/blog/2013/07/23/community-roundup-5	63.96 KB (🟡 +326 B)	159.2 KB
/blog/2013/07/26/react-v0-4-1	61.84 KB (🟡 +325 B)	157.08 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails	62.45 KB (🟡 +326 B)	157.69 KB
/blog/2013/08/05/community-roundup-6	63.25 KB (🟡 +326 B)	158.49 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications	62.46 KB (🟡 +326 B)	157.7 KB
/blog/2013/08/26/community-roundup-7	63.42 KB (🟡 +326 B)	158.66 KB
/blog/2013/09/24/community-roundup-8	64.85 KB (🟡 +324 B)	160.09 KB
/blog/2013/10/03/community-roundup-9	63.79 KB (🟡 +326 B)	159.03 KB
/blog/2013/10/16/react-v0.5.0	63.47 KB (🟡 +327 B)	158.71 KB
/blog/2013/10/29/react-v0-5-1	61.83 KB (🟡 +326 B)	157.07 KB
/blog/2013/11/06/community-roundup-10	65.45 KB (🟡 +325 B)	160.69 KB
/blog/2013/11/18/community-roundup-11	64.53 KB (🟡 +326 B)	159.77 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2	62.3 KB (🟡 +326 B)	157.54 KB
/blog/2013/12/19/react-v0.8.0	62.72 KB (🟡 +326 B)	157.96 KB
/blog/2013/12/23/community-roundup-12	64.18 KB (🟡 +325 B)	159.42 KB
/blog/2013/12/30/community-roundup-13	63.97 KB (🟡 +325 B)	159.21 KB
/blog/2014/01/02/react-chrome-developer-tools	62.22 KB (🟡 +326 B)	157.46 KB
/blog/2014/01/06/community-roundup-14	63.56 KB (🟡 +328 B)	158.8 KB
/blog/2014/02/05/community-roundup-15	64.78 KB (🟡 +326 B)	160.02 KB
/blog/2014/02/15/community-roundup-16	64.49 KB (🟡 +326 B)	159.73 KB
/blog/2014/02/16/react-v0.9-rc1	64.89 KB (🟡 +327 B)	160.13 KB
/blog/2014/02/20/react-v0.9	65.34 KB (🟡 +326 B)	160.58 KB
/blog/2014/02/24/community-roundup-17	64.2 KB (🟡 +326 B)	159.44 KB
/blog/2014/03/14/community-roundup-18	65.17 KB (🟡 +327 B)	160.41 KB
/blog/2014/03/19/react-v0.10-rc1	63.48 KB (🟡 +326 B)	158.72 KB
/blog/2014/03/21/react-v0.10	63.5 KB (🟡 +326 B)	158.74 KB
/blog/2014/03/28/the-road-to-1.0	63.61 KB (🟡 +326 B)	158.85 KB
/blog/2014/04/04/reactnet	62.25 KB (🟡 +325 B)	157.49 KB
/blog/2014/05/06/flux	62.38 KB (🟡 +325 B)	157.62 KB
/blog/2014/05/29/one-year-of-open-source-react	62.6 KB (🟡 +326 B)	157.84 KB
/blog/2014/06/27/community-roundup-19	64.15 KB (🟡 +325 B)	159.39 KB
/blog/2014/07/13/react-v0.11-rc1	64.53 KB (🟡 +326 B)	159.77 KB
/blog/2014/07/17/react-v0.11	65.79 KB (🟡 +326 B)	161.03 KB
/blog/2014/07/25/react-v0.11.1	62.74 KB (🟡 +326 B)	157.98 KB
/blog/2014/07/28/community-roundup-20	64.29 KB (🟡 +326 B)	159.53 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher	63.92 KB (🟡 +326 B)	159.16 KB
/blog/2014/08/03/community-roundup-21	63.96 KB (🟡 +326 B)	159.2 KB
/blog/2014/09/03/introducing-the-jsx-specification	61.96 KB (🟡 +327 B)	157.2 KB
/blog/2014/09/12/community-round-up-22	64.44 KB (🟡 +326 B)	159.68 KB
/blog/2014/09/16/react-v0.11.2	62.74 KB (🟡 +325 B)	157.97 KB
/blog/2014/09/24/testing-flux-applications	65.92 KB (🟡 +327 B)	161.15 KB
/blog/2014/10/14/introducing-react-elements	64.87 KB (🟡 +326 B)	160.11 KB
/blog/2014/10/16/react-v0.12-rc1	64.83 KB (🟡 +325 B)	160.07 KB
/blog/2014/10/17/community-roundup-23	65.41 KB (🟡 +326 B)	160.65 KB
/blog/2014/10/27/react-js-conf	62.01 KB (🟡 +326 B)	157.25 KB
/blog/2014/10/28/react-v0.12	64.78 KB (🟡 +326 B)	160.02 KB
/blog/2014/11/24/react-js-conf-updates	62.4 KB (🟡 +327 B)	157.63 KB
/blog/2014/11/25/community-roundup-24	65.63 KB (🟡 +326 B)	160.87 KB
/blog/2014/12/18/react-v0.12.2	62.42 KB (🟡 +326 B)	157.66 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship	62.82 KB (🟡 +325 B)	158.06 KB
/blog/2015/01/27/react-v0.13.0-beta-1	63.79 KB (🟡 +326 B)	159.03 KB
/blog/2015/02/18/react-conf-roundup-2015	65.77 KB (🟡 +326 B)	161.01 KB
/blog/2015/02/20/introducing-relay-and-graphql	64.92 KB (🟡 +326 B)	160.16 KB
/blog/2015/02/24/react-v0.13-rc1	63.82 KB (🟡 +326 B)	159.06 KB
/blog/2015/02/24/streamlining-react-elements	66.38 KB (🟡 +326 B)	161.62 KB
/blog/2015/03/03/react-v0.13-rc2	63.16 KB (🟡 +326 B)	158.4 KB
/blog/2015/03/04/community-roundup-25	64.12 KB (🟡 +326 B)	159.36 KB
/blog/2015/03/10/react-v0.13	64.44 KB (🟡 +325 B)	159.68 KB
/blog/2015/03/16/react-v0.13.1	62.26 KB (🟡 +325 B)	157.5 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay	65.02 KB (🟡 +326 B)	160.26 KB
/blog/2015/03/26/introducing-react-native	62.15 KB (🟡 +326 B)	157.39 KB
/blog/2015/03/30/community-roundup-26	64.09 KB (🟡 +325 B)	159.33 KB
/blog/2015/04/17/react-native-v0.4	63 KB (🟡 +326 B)	158.24 KB
/blog/2015/04/18/react-v0.13.2	62.34 KB (🟡 +326 B)	157.58 KB
/blog/2015/05/01/graphql-introduction	66.83 KB (🟡 +327 B)	162.07 KB
/blog/2015/05/08/react-v0.13.3	62.23 KB (🟡 +326 B)	157.46 KB
/blog/2015/05/22/react-native-release-process	62.38 KB (🟡 +326 B)	157.62 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools	62.83 KB (🟡 +326 B)	158.07 KB
/blog/2015/07/03/react-v0.14-beta-1	64.34 KB (🟡 +326 B)	159.58 KB
/blog/2015/08/03/new-react-devtools-beta	62.94 KB (🟡 +326 B)	158.18 KB
/blog/2015/08/11/relay-technical-preview	63 KB (🟡 +326 B)	158.24 KB
/blog/2015/08/13/reacteurope-roundup	64.59 KB (🟡 +326 B)	159.83 KB
/blog/2015/09/02/new-react-developer-tools	62.36 KB (🟡 +325 B)	157.6 KB
/blog/2015/09/10/react-v0.14-rc1	68.04 KB (🟡 +325 B)	163.28 KB
/blog/2015/09/14/community-roundup-27	64.52 KB (🟡 +326 B)	159.76 KB
/blog/2015/10/01/react-render-and-top-level-api	63.49 KB (🟡 +325 B)	158.73 KB
/blog/2015/10/07/react-v0.14	68.53 KB (🟡 +326 B)	163.77 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord	64.24 KB (🟡 +326 B)	159.48 KB
/blog/2015/10/28/react-v0.14.1	62.25 KB (🟡 +326 B)	157.49 KB
/blog/2015/11/02/react-v0.14.2	62.28 KB (🟡 +325 B)	157.52 KB
/blog/2015/11/18/react-v0.14.3	62.4 KB (🟡 +326 B)	157.64 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship	63.28 KB (🟡 +325 B)	158.51 KB
/blog/2015/12/16/ismounted-antipattern	62.88 KB (🟡 +325 B)	158.11 KB
/blog/2015/12/18/react-components-elements-and-instances	66.8 KB (🟡 +326 B)	162.04 KB
/blog/2015/12/29/react-v0.14.4	62.07 KB (🟡 +326 B)	157.31 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A	63.09 KB (🟡 +326 B)	158.33 KB
/blog/2016/01/12/discontinuing-ie8-support	61.9 KB (🟡 +325 B)	157.14 KB
/blog/2016/02/19/new-versioning-scheme	63.28 KB (🟡 +326 B)	158.52 KB
/blog/2016/03/07/react-v15-rc1	66.03 KB (🟡 +325 B)	161.27 KB
/blog/2016/03/16/react-v15-rc2	62.89 KB (🟡 +326 B)	158.13 KB
/blog/2016/03/29/react-v0.14.8	62.03 KB (🟡 +326 B)	157.26 KB
/blog/2016/04/07/react-v15	70.22 KB (🟡 +327 B)	165.46 KB
/blog/2016/04/08/react-v15.0.1	62.78 KB (🟡 +326 B)	158.02 KB
/blog/2016/07/11/introducing-reacts-error-code-system	62.49 KB (🟡 +325 B)	157.73 KB
/blog/2016/07/13/mixins-considered-harmful	70.65 KB (🟡 +326 B)	165.89 KB
/blog/2016/07/22/create-apps-with-no-configuration	65.98 KB (🟡 +326 B)	161.22 KB
/blog/2016/08/05/relay-state-of-the-state	66.02 KB (🟡 +326 B)	161.26 KB
/blog/2016/09/28/our-first-50000-stars	67.46 KB (🟡 +326 B)	162.7 KB
/blog/2016/11/16/react-v15.4.0	65.42 KB (🟡 +326 B)	160.65 KB
/blog/2017/04/07/react-v15.5.0	65.98 KB (🟡 +326 B)	161.22 KB
/blog/2017/05/18/whats-new-in-create-react-app	65.38 KB (🟡 +326 B)	160.62 KB
/blog/2017/06/13/react-v15.6.0	64 KB (🟡 +326 B)	159.24 KB
/blog/2017/07/26/error-handling-in-react-16	64.35 KB (🟡 +326 B)	159.58 KB
/blog/2017/09/08/dom-attributes-in-react-16	64.78 KB (🟡 +326 B)	160.02 KB
/blog/2017/09/25/react-v15.6.2	63.11 KB (🟡 +326 B)	158.35 KB
/blog/2017/09/26/react-v16.0	68.24 KB (🟡 +325 B)	163.48 KB
/blog/2017/11/28/react-v16.2.0-fragment-support	66.18 KB (🟡 +325 B)	161.42 KB
/blog/2017/12/07/introducing-the-react-rfc-process	62.69 KB (🟡 +325 B)	157.93 KB
/blog/2017/12/15/improving-the-repository-infrastructure	78.49 KB (🟡 +327 B)	173.73 KB
/blog/2018/03/01/sneak-peek-beyond-react-16	62.65 KB (🟡 +326 B)	157.89 KB
/blog/2018/03/27/update-on-async-rendering	67.89 KB (🟡 +327 B)	163.13 KB
/blog/2018/03/29/react-v-16-3	64.72 KB (🟡 +328 B)	159.96 KB
/blog/2018/05/23/react-v-16-4	64.85 KB (🟡 +326 B)	160.09 KB
/blog/2018/06/07/you-probably-dont-need-derived-state	68.51 KB (🟡 +326 B)	163.75 KB
/blog/2018/08/01/react-v-16-4-2	63.5 KB (🟡 +327 B)	158.74 KB
/blog/2018/09/10/introducing-the-react-profiler	65.11 KB (🟡 +326 B)	160.35 KB
/blog/2018/10/01/create-react-app-v2	65.59 KB (🟡 +325 B)	160.83 KB
/blog/2018/10/23/react-v-16-6	64.79 KB (🟡 +325 B)	160.03 KB
/blog/2018/11/13/react-conf-recap	62.5 KB (🟡 +326 B)	157.74 KB
/blog/2018/11/27/react-16-roadmap	68.7 KB (🟡 +326 B)	163.94 KB
/blog/2018/12/19/react-v-16-7	63.63 KB (🟡 +326 B)	158.87 KB
/blog/2019/02/06/react-v16.8.0	65.89 KB (🟡 +325 B)	161.13 KB
/blog/2019/02/23/is-react-translated-yet	65.45 KB (🟡 +325 B)	160.69 KB
/blog/2019/08/08/react-v16.9.0	68.39 KB (🟡 +326 B)	163.63 KB
/blog/2019/08/15/new-react-devtools	63 KB (🟡 +326 B)	158.24 KB
/blog/2019/10/22/react-release-channels	64.8 KB (🟡 +326 B)	160.04 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense	69.51 KB (🟡 +326 B)	164.75 KB
/blog/2020/02/26/react-v16.13.0	65.73 KB (🟡 +326 B)	160.97 KB
/blog/2020/08/10/react-v17-rc	72.01 KB (🟡 +326 B)	167.25 KB
/blog/all	57.33 KB (🟡 +295 B)	152.57 KB
/community	51.08 KB (🟡 +366 B)	146.31 KB
/community/acknowledgements	52.27 KB (🟡 +369 B)	147.51 KB
/community/meet-the-team	52.79 KB (🟡 +368 B)	148.03 KB
/learn	55.57 KB (🟡 +362 B)	150.81 KB
/learn/add-react-to-a-website	55.9 KB (🟡 +367 B)	151.14 KB
/learn/adding-interactivity	57.71 KB (🟡 +366 B)	152.95 KB
/learn/choosing-the-state-structure	63.44 KB (🟡 +363 B)	158.68 KB
/learn/conditional-rendering	55.67 KB (🟡 +366 B)	150.91 KB
/learn/describing-the-ui	54.89 KB (🟡 +364 B)	150.13 KB
/learn/editor-setup	52.21 KB (🟡 +370 B)	147.45 KB
/learn/escape-hatches	50.41 KB (🟡 +365 B)	145.65 KB
/learn/extracting-state-logic-into-a-reducer	61.08 KB (🟡 +368 B)	156.32 KB
/learn/importing-and-exporting-components	54.07 KB (🟡 +364 B)	149.31 KB
/learn/installation	51.73 KB (🟡 +367 B)	146.97 KB
/learn/javascript-in-jsx-with-curly-braces	54.15 KB (🟡 +367 B)	149.39 KB
/learn/keeping-components-pure	58.28 KB (🟡 +366 B)	153.52 KB
/learn/managing-state	57 KB (🟡 +365 B)	152.24 KB
/learn/manipulating-the-dom-with-refs	59.26 KB (🟡 +365 B)	154.5 KB
/learn/passing-data-deeply-with-context	58.42 KB (🟡 +366 B)	153.66 KB
/learn/passing-props-to-a-component	57.85 KB (🟡 +366 B)	153.09 KB
/learn/preserving-and-resetting-state	60.66 KB (🟡 +364 B)	155.9 KB
/learn/queueing-a-series-of-state-updates	55.64 KB (🟡 +366 B)	150.88 KB
/learn/react-developer-tools	51.6 KB (🟡 +368 B)	146.84 KB
/learn/reacting-to-input-with-state	60.12 KB (🟡 +367 B)	155.36 KB
/learn/referencing-values-with-refs	57.17 KB (🟡 +364 B)	152.41 KB
/learn/render-and-commit	54.14 KB (🟡 +364 B)	149.38 KB
/learn/rendering-lists	58.2 KB (🟡 +367 B)	153.44 KB
/learn/responding-to-events	57.19 KB (🟡 +366 B)	152.43 KB
/learn/scaling-up-with-reducer-and-context	55.22 KB (🟡 +365 B)	150.46 KB
/learn/sharing-state-between-components	55.93 KB (🟡 +366 B)	151.17 KB
/learn/start-a-new-react-project	52.57 KB (🟡 +369 B)	147.81 KB
/learn/state-a-components-memory	61.37 KB (🟡 +367 B)	156.61 KB
/learn/state-as-a-snapshot	55.19 KB (🟡 +365 B)	150.43 KB
/learn/thinking-in-react	57.01 KB (🟡 +365 B)	152.25 KB
/learn/updating-arrays-in-state	59.25 KB (🟡 +366 B)	154.49 KB
/learn/updating-objects-in-state	58.97 KB (🟡 +364 B)	154.21 KB
/learn/writing-markup-with-jsx	54.07 KB (🟡 +365 B)	149.31 KB
/learn/your-first-component	54.98 KB (🟡 +364 B)	150.22 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.