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

Add with-redux-toolkit example #11103

Closed
wants to merge 16 commits into from
Closed

Add with-redux-toolkit example #11103

wants to merge 16 commits into from

Conversation

jazibjafri
Copy link
Contributor

Related to #11097

@jazibjafri jazibjafri requested review from lfades and Timer as code owners March 16, 2020 12:34
@jazibjafri
Copy link
Contributor Author

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

@ijjk
Copy link
Member

ijjk commented Mar 16, 2020

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
Copy link
Contributor Author

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
Copy link
Member

ijjk commented Mar 17, 2020

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
Copy link

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

@jazibjafri
Copy link
Contributor Author

jazibjafri commented Mar 19, 2020

@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
Copy link
Member

ijjk commented Mar 19, 2020

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
Copy link

@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
Copy link
Contributor Author

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

Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

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

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
Copy link
Contributor Author

jazibjafri commented Mar 20, 2020

@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
Copy link
Member

ijjk commented Mar 20, 2020

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
Copy link

@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
Copy link
Member

lfades commented Mar 20, 2020

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
Copy link
Contributor Author

@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.

@jazibjafri jazibjafri requested a review from lfades March 20, 2020 18:19
@lfades
Copy link
Member

lfades commented Mar 20, 2020

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

@jazibjafri
Copy link
Contributor Author

@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
Copy link

TommySorensen commented Mar 20, 2020

@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
Copy link
Contributor Author

@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
Copy link
Member

lfades commented Mar 23, 2020

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

@jazibjafri
Copy link
Contributor Author

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

@jazibjafri
Copy link
Contributor Author

I'll also try to pass checks

@lfades
Copy link
Member

lfades commented Mar 23, 2020

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

@jazibjafri
Copy link
Contributor Author

Oh nice, thanks

@TommySorensen
Copy link

@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
Copy link
Member

lfades commented Mar 25, 2020

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

@TommySorensen
Copy link

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

@lfades
Copy link
Member

lfades commented Mar 25, 2020

@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
Copy link

@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

Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

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

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.

@jazibjafri
Copy link
Contributor Author

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

@jazibjafri
Copy link
Contributor Author

jazibjafri commented Mar 25, 2020

@lfades I need your opinion

  1. I can do a git revert of that commit, but that'll just further modify the readme.md file.
  2. 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.
  3. 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 jazibjafri closed this Mar 25, 2020
@jazibjafri jazibjafri deleted the issue-11097 branch March 25, 2020 20:32
@jazibjafri jazibjafri restored the issue-11097 branch March 25, 2020 20:33
@jazibjafri
Copy link
Contributor Author

Accidentally closed. I'll wait for your reply.

@jazibjafri jazibjafri reopened this Mar 25, 2020
@lfades
Copy link
Member

lfades commented Mar 25, 2020

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

@jazibjafri
Copy link
Contributor Author

Closing this, and re-opened here

@jazibjafri jazibjafri closed this Mar 26, 2020
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
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.

4 participants