Add with-redux-toolkit example #11103

jazibjafri · 2020-03-16T12:34:17Z

Related to #11097

jazibjafri · 2020-03-16T12:40:11Z

It's the same as with-redux example, just tried with toolkit.

ijjk · 2020-03-16T12:40:11Z

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
buildDuration	10s	10s	⚠️ +20ms
nodeModulesSize	54.8 MB	54.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.js gzip	5.77 kB	5.77 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..8eb0.js gzip	9.78 kB	9.78 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	55.4 kB	55.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.js gzip	1.09 kB	1.09 kB	✓
_error.js gzip	2.97 kB	2.97 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	1.89 kB	1.89 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.39 kB	7.39 kB	✓

Client Pages Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	JazibJafri/next.js issue-11097	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	JazibJafri/next.js issue-11097	Change
index.html gzip	916 B	916 B	✓
link.html gzip	924 B	924 B	✓
withRouter.html gzip	911 B	911 B	✓
Overall change	2.75 kB	2.75 kB	✓

Serverless Mode (Decrease detected ✓)

General

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
buildDuration	10.8s	10.9s	⚠️ +95ms
nodeModulesSize	54.8 MB	54.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.js gzip	5.77 kB	5.77 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..8eb0.js gzip	9.78 kB	9.78 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	55.4 kB	55.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.js gzip	1.09 kB	1.09 kB	✓
_error.js gzip	2.97 kB	2.97 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	1.89 kB	1.89 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.39 kB	7.39 kB	✓

Client Pages Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	JazibJafri/next.js issue-11097	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 decrease ✓

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_error.js gzip	294 kB	293 kB	-81 B
404.html gzip	1.32 kB	1.32 kB	✓
hooks.html gzip	956 B	956 B	✓
index.js gzip	293 kB	293 kB	-7 B
link.js gzip	301 kB	301 kB	-186 B
routerDirect.js gzip	300 kB	300 kB	⚠️ +37 B
withRouter.js gzip	300 kB	300 kB	⚠️ +58 B
Overall change	1.49 MB	1.49 MB	-179 B

jazibjafri · 2020-03-17T06:52:53Z

Also I looked into updating the example to use getStaticProps, but I can't seem to understand how to use getStaticProps from redux.js (it being an exported function an not a property on the page component), so any help is appreciated.

ijjk · 2020-03-17T11:17:12Z

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
buildDuration	9.1s	9.1s	⚠️ +82ms
nodeModulesSize	54.8 MB	54.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.js gzip	5.77 kB	5.77 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..8eb0.js gzip	9.78 kB	9.78 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	55.4 kB	55.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.js gzip	1.09 kB	1.09 kB	✓
_error.js gzip	2.97 kB	2.97 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	1.89 kB	1.89 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.39 kB	7.39 kB	✓

Client Pages Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	JazibJafri/next.js issue-11097	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	JazibJafri/next.js issue-11097	Change
index.html gzip	916 B	916 B	✓
link.html gzip	924 B	924 B	✓
withRouter.html gzip	911 B	911 B	✓
Overall change	2.75 kB	2.75 kB	✓

Serverless Mode (Increase detected ⚠️)

General

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
buildDuration	10s	10s	-26ms
nodeModulesSize	54.8 MB	54.8 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.js gzip	5.77 kB	5.77 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..8eb0.js gzip	9.78 kB	9.78 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	55.4 kB	55.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.js gzip	1.09 kB	1.09 kB	✓
_error.js gzip	2.97 kB	2.97 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	1.89 kB	1.89 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.39 kB	7.39 kB	✓

Client Pages Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	JazibJafri/next.js issue-11097	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	JazibJafri/next.js issue-11097	Change
_error.js gzip	293 kB	293 kB	⚠️ +619 B
404.html gzip	1.32 kB	1.32 kB	✓
hooks.html gzip	956 B	956 B	✓
index.js gzip	293 kB	294 kB	⚠️ +704 B
link.js gzip	301 kB	301 kB	⚠️ +736 B
routerDirect.js gzip	300 kB	299 kB	-512 B
withRouter.js gzip	300 kB	300 kB	-43 B
Overall change	1.49 MB	1.49 MB	⚠️ +1.5 kB

TommySorensen · 2020-03-19T11:28:04Z

@jazibjafri What about getStaticProps? Can you 🙏make a example of using it with getStaticProps and preloadedState. I'm struggling with this myself.

jazibjafri · 2020-03-19T12:10:57Z

@jazibjafri What about getStaticProps? Can you 🙏make a example of using it with getStaticProps and preloadedState. I'm struggling with this myself.

Take a look at my PR. It already uses preloadedState. As far as the getStaticProps is concerned. Next.js requires getStaticProps to be an exported function and not a property on the component, so I'm facing issues on what maybe the recommended way of running getStaticProps from such component. I tried it by passing the function as parameter to withRedux like withRedux(Component, getStaticProps). It worked, but I doubt that's a good, let alone recommended practice.

ijjk · 2020-03-19T12:11:03Z

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
buildDuration	11.5s	11.2s	-277ms
nodeModulesSize	53.2 MB	53.2 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.js gzip	5.77 kB	5.77 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..8eb0.js gzip	9.78 kB	9.78 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	55.4 kB	55.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.js gzip	1.09 kB	1.09 kB	✓
_error.js gzip	2.97 kB	2.97 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	1.89 kB	1.89 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.39 kB	7.39 kB	✓

Client Pages Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	JazibJafri/next.js issue-11097	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	JazibJafri/next.js issue-11097	Change
index.html gzip	916 B	916 B	✓
link.html gzip	924 B	924 B	✓
withRouter.html gzip	913 B	913 B	✓
Overall change	2.75 kB	2.75 kB	✓

Serverless Mode (Increase detected ⚠️)

General

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
buildDuration	12.6s	12.2s	-411ms
nodeModulesSize	53.2 MB	53.2 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.js gzip	5.77 kB	5.77 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..8eb0.js gzip	9.78 kB	9.78 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	55.4 kB	55.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.js gzip	1.09 kB	1.09 kB	✓
_error.js gzip	2.97 kB	2.97 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	1.89 kB	1.89 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.39 kB	7.39 kB	✓

Client Pages Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	JazibJafri/next.js issue-11097	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	JazibJafri/next.js issue-11097	Change
_error.js gzip	293 kB	294 kB	⚠️ +810 B
404.html gzip	1.32 kB	1.32 kB	✓
hooks.html gzip	957 B	957 B	✓
index.js gzip	294 kB	293 kB	-140 B
link.js gzip	301 kB	302 kB	⚠️ +302 B
routerDirect.js gzip	300 kB	299 kB	-663 B
withRouter.js gzip	300 kB	300 kB	-64 B
Overall change	1.49 MB	1.49 MB	⚠️ +245 B

TommySorensen · 2020-03-19T12:17:16Z

@jazibjafri yeah i know you are using preloadedStatebut you are only using it with getInitialProps.
The recommended way is using getStaticProps and i can't seem to find a way to do it with preloadedState.
I also have a discussion here, where i hoped someone will enlighten me 🙂

jazibjafri · 2020-03-19T12:21:10Z

@TommySorensen let me know when you find out, I'll update the PR, thanks

lfades

Please update the example to not use getInitialProps, and to ideally use getStaticProps. You can read more about this in #11014.

getInitialProps is not deprecated neither going to be deprecated but we are currently updating the examples to use the new data fetching methods and accepting new examples using them is also part of that effort

jazibjafri · 2020-03-20T07:06:48Z

@lfades I'm a little confused, should I remove redux.js and use the next-redux-wrapper in _app.js?
Like

import withRedux from 'next-redux-wrapper';
const MyApp = ({ Component, pageProps, store }) => {
    return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>
    );
};

export default withRedux(initializeStore)(MyApp)

And remove the getInitialProps from index.js?

But that doesn't make use of getStaticProps anywhere.

ijjk · 2020-03-20T07:25:00Z

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
buildDuration	12s	11.9s	-124ms
nodeModulesSize	53.2 MB	53.2 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.js gzip	5.77 kB	5.77 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..8eb0.js gzip	9.78 kB	9.78 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	55.4 kB	55.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.js gzip	1.09 kB	1.09 kB	✓
_error.js gzip	2.97 kB	2.97 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	1.89 kB	1.89 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.39 kB	7.39 kB	✓

Client Pages Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	JazibJafri/next.js issue-11097	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	JazibJafri/next.js issue-11097	Change
index.html gzip	916 B	916 B	✓
link.html gzip	924 B	924 B	✓
withRouter.html gzip	913 B	913 B	✓
Overall change	2.75 kB	2.75 kB	✓

Serverless Mode (Decrease detected ✓)

General

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
buildDuration	13.1s	12.4s	-703ms
nodeModulesSize	53.2 MB	53.2 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.js gzip	5.77 kB	5.77 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..8eb0.js gzip	9.78 kB	9.78 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	55.4 kB	55.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.js gzip	1.09 kB	1.09 kB	✓
_error.js gzip	2.97 kB	2.97 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	1.89 kB	1.89 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.39 kB	7.39 kB	✓

Client Pages Modern

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	JazibJafri/next.js issue-11097	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 decrease ✓

	zeit/next.js canary	JazibJafri/next.js issue-11097	Change
_error.js gzip	294 kB	294 kB	-88 B
404.html gzip	1.32 kB	1.32 kB	✓
hooks.html gzip	957 B	957 B	✓
index.js gzip	294 kB	293 kB	-617 B
link.js gzip	301 kB	301 kB	-302 B
routerDirect.js gzip	299 kB	300 kB	⚠️ +281 B
withRouter.js gzip	300 kB	300 kB	⚠️ +8 B
Overall change	1.49 MB	1.49 MB	-718 B

TommySorensen · 2020-03-20T08:29:01Z

@lfades I'm a little confused, should I remove redux.js and use the next-redux-wrapper in _app.js?
Like
import withRedux from 'next-redux-wrapper';
const MyApp = ({ Component, pageProps, store }) => {
    return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>
    );
};

export default withRedux(initializeStore)(MyApp)
And remove the getInitialProps from index.js?

But that doesn't make use of getStaticProps anywhere.

The props from getStaticProps or pageProps should go to redux somehow. So i assume your code here does not fix that.

export default withRedux(initializeStore)(MyApp)

I can't seem to find a good way to do it 🤔

lfades · 2020-03-20T15:58:43Z

To use getServerProps or getStaticProps the current method can't be used, however that doesn't mean it's not possible, first, what's the need of having SSR for redux? can't we not use it only in the client?.

You could do it this way:

getStaticProps: The page is rendered at build time, once a user requests the page he will always get static HTML, once the JS loads Redux gets started and after the first render (hydration), you can add the data from the store. Using the store in the server may be possible but not desirable for dynamic data, for example, if you add a date using the store, the date will be prerendered and it will be the same date for every user.
getServerProps: The page would be a serverless function, once a user requests the page he will always execute that function and wait for the HTML, this is not ideal and most likely not required for redux users.

In any case, the current HOC method won't work because the new data fetching methods have to exported in the page, instead of being added as a static method to the exported component.

I think the best scenario is where you don't use Redux for data fetching, and instead use it only after the first render (usually inside useEffect). If Redux is required for data fetching you can return the result as props, and then populate the store right after in the page (not inside the data fetching methods)

jazibjafri · 2020-03-20T18:19:31Z

@lfades I've updated the PR and removed getInitialProps. Check it out and let me know if it's alright now or needs something else, thanks for the help.

lfades · 2020-03-20T18:29:35Z

@jazibjafri next-redux-wrapper adds getInitialProps to all pages, you can read about it here.

jazibjafri · 2020-03-20T18:59:54Z

@jazibjafri next-redux-wrapper adds getInitialProps to all pages, you can read about it here.

Ah! Sorry man, my bad. I'll keep trying, Thanks for bearing with me. :)

TommySorensen · 2020-03-20T19:22:33Z

@jazibjafri I disagree on that you just said.

You could do it this way:

getStaticProps: The page is rendered at build time, once a user requests the page he will always get static HTML, once the JS loads Redux gets started and after the first render (hydration), you can add the data from the store. Using the store in the server may be possible but not desirable for dynamic data, for example, if you add a date using the store, the date will be prerendered and it will be the same date for every user.

In my case, i wanna be able to fetch all data from a CMS at build time, meaning i will use the getStaticPropsfunction on all pages that need generic CMS data.
On all my pages i would like to render header, footer,smaller translations from the redux store that is generated on the build.

Lets's say i want new data 1 minute after the user visit the site for the header, like a new menu link or something like that. In that case i will only need to fetch new data on the client and replace the state in the redux store, meaning pages will render the header again.
In this case, it makes totally sense to have the data as preloaded state in redux.

And this i not really a preloadedState, it's just a initialState if we are not using the props from getStaticProps

export const initializeStore = (preloadedState = initialState) => {
  return configureStore({
    reducer,
    preloadedState,
  })
}

jazibjafri · 2020-03-21T14:22:43Z

@lfades Is this the right practice?

//_app.js

import React from 'react'
import { Provider } from 'react-redux'
import { store } from '../store'

const MyApp = ({ Component, pageProps }) => {
    return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>
    )
}

export default MyApp

It works, but I'm not so sure with my knowledge of redux with latest next.js.
Also, store is already initialized in store.js.

lfades · 2020-03-23T15:52:04Z

@jazibjafri I'm not very good with Redux either, but that code looks good 👍

jazibjafri · 2020-03-23T16:13:58Z

@lfades thanks man, I'll update the PR with this one.

jazibjafri · 2020-03-23T18:08:30Z

I'll also try to pass checks

lfades · 2020-03-23T18:12:30Z

@jazibjafri For examples the only check you have to worry about is the linter, if something else breaks don't worry.

jazibjafri · 2020-03-23T18:13:23Z

Oh nice, thanks

TommySorensen · 2020-03-25T10:51:19Z

@jazibjafri I guess we dont have a solution for my comment #11103 (comment) on how to get preloadedState to redux from the page props?

lfades · 2020-03-25T16:59:43Z

@TommySorensen You have to hydrate the store with the data returned in props

TommySorensen · 2020-03-25T17:01:05Z

@jazibjafri Yeah but how do i do that on _app level? Or should i do it in the page?

lfades · 2020-03-25T17:05:38Z

@TommySorensen That's up to you, if many pages need it you can do that on _app.js, in any case you create the store only once in the browser, share it for all pages, and hydrate it when needed.

TommySorensen · 2020-03-25T17:08:17Z

@lfades Ok, i just haven't found a way yet without the store on the server is different then the one on the client. See my issue here #11192

lfades

Oh, just noticed something, @jazibjafri Can you please undo the change made to the main readme 🙏 , The PR is removing the symlink that file currently has, and it makes our tests fail

Sure, no problem.

…nto issue-11097

jazibjafri · 2020-03-25T19:23:49Z

I think it didn't work, I'll just revert that.

jazibjafri · 2020-03-25T20:31:00Z

@lfades I need your opinion

I can do a git revert of that commit, but that'll just further modify the readme.md file.
Tried git reset --soft but due to the merges with canary in between, I am getting 100+ changes to be committed. Changes that I did not introduced.
Close this pull request and open a new one by starting over.
I am willing to do the last one, it'll be cleaner, and we can just link with this discussion.
So what do you say?

Edit: I already created new branch, with these same changes except readme.md. Let me know if you prefer a new PR or wanna stick with this one.

jazibjafri · 2020-03-25T20:36:46Z

Accidentally closed. I'll wait for your reply.

lfades · 2020-03-25T22:51:38Z

@jazibjafri Create a new PR, that's okay!

jazibjafri · 2020-03-26T02:05:40Z

Closing this, and re-opened here

Add with-redux-toolkit example

c59319c

jazibjafri requested review from lfades and Timer as code owners March 16, 2020 12:34

Merge branch 'canary' into issue-11097

8f2d45d

Merge branch 'canary' into issue-11097

986c377

lfades requested changes Mar 19, 2020

View reviewed changes

Merge branch 'canary' into issue-11097

2270e0e

jazibjafri added 2 commits March 20, 2020 23:11

Remove getInitialProps

7d7dc8b

Merge branch 'canary' into issue-11097

6a08956

jazibjafri requested a review from lfades March 20, 2020 18:19

Merge branch 'canary' into issue-11097

f1ee85b

jazibjafri added 2 commits March 25, 2020 09:11

Merge branch 'canary' into issue-11097

5413877

Merge branch 'canary' into issue-11097

e04d47d

Merge branch 'canary' into issue-11097

43dd6ff

Merge branch 'canary' into issue-11097

67f5b26

lfades approved these changes Mar 25, 2020

View reviewed changes

lfades requested changes Mar 25, 2020

View reviewed changes

jazibjafri added 2 commits March 26, 2020 00:18

Replace readme.md from canary

8ee34ef

Merge branch 'issue-11097' of https://github.com/JazibJafri/next.js i…

7e11a9f

…nto issue-11097

Merge branch 'canary' into issue-11097

64b4472

jazibjafri closed this Mar 25, 2020

jazibjafri deleted the issue-11097 branch March 25, 2020 20:32

jazibjafri restored the issue-11097 branch March 25, 2020 20:33

jazibjafri reopened this Mar 25, 2020

jazibjafri mentioned this pull request Mar 26, 2020

Add with-redux-toolkit example #11358

Merged

jazibjafri closed this Mar 26, 2020

vercel locked as resolved and limited conversation to collaborators Jan 31, 2022

Add with-redux-toolkit example #11103

Add with-redux-toolkit example #11103

Conversation

jazibjafri commented Mar 16, 2020

jazibjafri commented Mar 16, 2020

ijjk commented Mar 16, 2020

Stats from current PR

jazibjafri commented Mar 17, 2020

ijjk commented Mar 17, 2020

Stats from current PR

TommySorensen commented Mar 19, 2020

jazibjafri commented Mar 19, 2020 • edited Loading

ijjk commented Mar 19, 2020

Stats from current PR

TommySorensen commented Mar 19, 2020

jazibjafri commented Mar 19, 2020

lfades left a comment • edited Loading

Choose a reason for hiding this comment

jazibjafri commented Mar 20, 2020 • edited Loading

ijjk commented Mar 20, 2020

Stats from current PR

TommySorensen commented Mar 20, 2020

lfades commented Mar 20, 2020 • edited Loading

jazibjafri commented Mar 20, 2020

lfades commented Mar 20, 2020

jazibjafri commented Mar 20, 2020

TommySorensen commented Mar 20, 2020 • edited Loading

jazibjafri commented Mar 21, 2020

lfades commented Mar 23, 2020

jazibjafri commented Mar 23, 2020

jazibjafri commented Mar 23, 2020

lfades commented Mar 23, 2020

jazibjafri commented Mar 23, 2020

TommySorensen commented Mar 25, 2020

lfades commented Mar 25, 2020

TommySorensen commented Mar 25, 2020

lfades commented Mar 25, 2020

TommySorensen commented Mar 25, 2020

lfades left a comment • edited by jazibjafri Loading

Choose a reason for hiding this comment

jazibjafri commented Mar 25, 2020

jazibjafri commented Mar 25, 2020 • edited Loading

jazibjafri commented Mar 25, 2020

lfades commented Mar 25, 2020

jazibjafri commented Mar 26, 2020

jazibjafri commented Mar 19, 2020 •

edited

Loading

lfades left a comment •

edited

Loading

jazibjafri commented Mar 20, 2020 •

edited

Loading

lfades commented Mar 20, 2020 •

edited

Loading

TommySorensen commented Mar 20, 2020 •

edited

Loading

lfades left a comment •

edited by jazibjafri

Loading

jazibjafri commented Mar 25, 2020 •

edited

Loading