-
Notifications
You must be signed in to change notification settings - Fork 26.9k
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
feat(example): add ssr zustand example #11222
Conversation
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 | janek26/next.js canary | Change | |
---|---|---|---|
buildDuration | 11.3s | 11.6s | |
nodeModulesSize | 53.2 MB | 53.2 MB | ✓ |
Client Bundles (main, webpack, commons)
zeit/next.js canary | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | 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 | 293 kB | -50 B |
link.js gzip | 301 kB | 301 kB | |
routerDirect.js gzip | 300 kB | 300 kB | -71 B |
withRouter.js gzip | 300 kB | 300 kB | -38 B |
Overall change | 1.49 MB | 1.49 MB |
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 | janek26/next.js canary | Change | |
---|---|---|---|
buildDuration | 12.2s | 12s | -133ms |
nodeModulesSize | 53.2 MB | 53.2 MB | ✓ |
Client Bundles (main, webpack, commons)
zeit/next.js canary | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | 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 | janek26/next.js canary | Change | |
---|---|---|---|
_error.js gzip | 293 kB | 293 kB | -46 B |
404.html gzip | 1.32 kB | 1.32 kB | ✓ |
hooks.html gzip | 956 B | 956 B | ✓ |
index.js gzip | 293 kB | 293 kB | |
link.js gzip | 301 kB | 301 kB | |
routerDirect.js gzip | 300 kB | 300 kB | -15 B |
withRouter.js gzip | 300 kB | 300 kB | |
Overall change | 1.49 MB | 1.49 MB |
@janek26 Can you explain why is state management required for SSR and why is it not only done in the client? - On the scope of this example, where the SSR doesn't do any data fetching. |
@lfades without the state at the server, the clock would just display zeros, until react rehydrates. |
@janek26 As you wish, for this particular use case no data fetching methods are needed. It doesn't matter if the clock is zero, it doesn't provide any value if the page has to be a lambda. If you change the example and start doing data fetching then you can add a data fetching method, ideally In any case, is probably better to not use the store inside the data fetching methods, but in the page. To hydrate the store you can use the props sent to the page instead. |
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.
@janek26 Can we make the example work in a similar way that the current mobx examples work (with-mobx), The main idea is to allow the store to be available for SSR but only if the page needs it, meaning that pages that don't use the store or only need it for CSR work can use it that way too.
I could make the change myself, but due to other priorities, like updating existing examples to use the new data fetching methods, that may take a while. So if you can make the change yourself please do 🙏
We can re-open this PR when it's updated as @lfades requested 🙏 Thanks for your contribution! |
Helps with pmndrs/zustand#182 I have seen the comments from this PR #11222 (review) and this PR matches the with-redux example.
Closes pmndrs/zustand#11