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.

Sign up for GitHub

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

Jump to bottom

feat(example): add ssr zustand example #11222

Closed
wants to merge 2 commits into from
Closed

feat(example): add ssr zustand example #11222

wants to merge 2 commits into from

Conversation

janek26
Copy link
Contributor

@janek26 janek26 commented Mar 20, 2020 •
edited
Loading

@janek26 janek26 mentioned this pull request Mar 20, 2020
Closed
@ijjk
Copy link
Member

ijjk commented Mar 20, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary janek26/next.js canary Change
buildDuration 10.7s 10.5s -160ms
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 ✓
Rendered Page Sizes
zeit/next.js canary janek26/next.js canary Change
index.html gzip 915 B 915 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 janek26/next.js canary Change
buildDuration 11.3s 11.6s ⚠️ +314ms
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 ⚠️ +377 B
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 ⚠️ +696 B
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 ⚠️ +914 B

@ijjk
Copy link
Member

ijjk commented Mar 20, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary janek26/next.js canary Change
buildDuration 11.2s 10.8s -342ms
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 ✓
Rendered Page Sizes
zeit/next.js canary janek26/next.js canary Change
index.html gzip 915 B 915 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 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 ⚠️ +72 B
link.js gzip 301 kB 301 kB ⚠️ +636 B
routerDirect.js gzip 300 kB 300 kB -15 B
withRouter.js gzip 300 kB 300 kB ⚠️ +137 B
Overall change 1.49 MB 1.49 MB ⚠️ +784 B

@lfades
Copy link
Member

lfades commented Mar 20, 2020 •
edited
Loading

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

@janek26
Copy link
Contributor Author

janek26 commented Mar 20, 2020 •
edited
Loading

@lfades without the state at the server, the clock would just display zeros, until react rehydrates.
It's based on the redux example, I can also add serverside data fetching if you like that more.

@lfades
Copy link
Member

lfades commented Mar 23, 2020 •
edited
Loading

@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 getStaticProps, choosing getServerSideProps (is the getInitialProps that's never executed in the browser) would require a very good reason, as it would turn the page into a lambda. But that's not really needed, it's okay to do the example without data fetching and only show how the store works.

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.

@timneutkens timneutkens added the examples Issue/PR related to examples label Apr 6, 2020
lfades
lfades requested changes May 6, 2020
View reviewed changes
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.

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

@timneutkens
Copy link
Member

We can re-open this PR when it's updated as @lfades requested 🙏 Thanks for your contribution!

@dai-shi dai-shi mentioned this pull request Sep 14, 2020
Closed
@callumbooth callumbooth mentioned this pull request Oct 13, 2020
Merged
kodiakhq bot pushed a commit that referenced this pull request Nov 10, 2020
@callumbooth
Feat(example): Add with-zustand example (#17835)
f300eca 
Helps with pmndrs/zustand#182 

I have seen the comments from this PR #11222 (review) and this PR matches the with-redux example.
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@lfades lfades lfades requested changes

@Timer Timer Awaiting requested review from Timer

Assignees
No one assigned
Labels
examples Issue/PR related to examples
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

SSR example
4 participants
@janek26 @ijjk @lfades @timneutkens