-
Notifications
You must be signed in to change notification settings - Fork 27.1k
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
Conversation
It's the same as with-redux example, just tried with toolkit. |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
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. |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
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 | |
404.html gzip | 1.32 kB | 1.32 kB | ✓ |
hooks.html gzip | 956 B | 956 B | ✓ |
index.js gzip | 293 kB | 294 kB | |
link.js gzip | 301 kB | 301 kB | |
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 |
@jazibjafri What about |
Take a look at my PR. It already uses |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
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 | |
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 | |
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 |
@jazibjafri yeah i know you are using |
@TommySorensen let me know when you find out, I'll update the PR, thanks |
There was a problem hiding this 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
@lfades I'm a little confused, should I remove
And remove the But that doesn't make use of |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
The props from export default withRedux(initializeStore)(MyApp) I can't seem to find a good way to do it 🤔 |
To use You could do it this way:
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 |
@lfades I've updated the PR and removed |
@jazibjafri |
Ah! Sorry man, my bad. I'll keep trying, Thanks for bearing with me. :) |
@jazibjafri I disagree on that you just said.
In my case, i wanna be able to fetch all data from a CMS at build time, meaning i will use the 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. And this i not really a preloadedState, it's just a initialState if we are not using the props from export const initializeStore = (preloadedState = initialState) => {
return configureStore({
reducer,
preloadedState,
})
} |
@lfades Is this the right practice?
It works, but I'm not so sure with my knowledge of redux with latest next.js. |
@jazibjafri I'm not very good with Redux either, but that code looks good 👍 |
@lfades thanks man, I'll update the PR with this one. |
I'll also try to pass checks |
@jazibjafri For examples the only check you have to worry about is the linter, if something else breaks don't worry. |
Oh nice, thanks |
@jazibjafri I guess we dont have a solution for my comment #11103 (comment) on how to get preloadedState to redux from the page props? |
@TommySorensen You have to hydrate the store with the data returned in props |
@jazibjafri Yeah but how do i do that on _app level? Or should i do it in the page? |
@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. |
There was a problem hiding this 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.
I think it didn't work, I'll just revert that. |
@lfades I need your opinion
Edit: I already created new branch, with these same changes except |
Accidentally closed. I'll wait for your reply. |
@jazibjafri Create a new PR, that's okay! |
Closing this, and re-opened here |
Related to #11097