-
Notifications
You must be signed in to change notification settings - Fork 27.7k
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
Update react relay modern ssr example #11193
Update react relay modern ssr example #11193
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 | rishabhsaxena/next.js update-relay-modern-ssr-example | Change | |
---|---|---|---|
buildDuration | 9.8s | 9.8s | |
nodeModulesSize | 53.2 MB | 53.2 MB | ✓ |
Client Bundles (main, webpack, commons)
zeit/next.js canary | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | Change | |
---|---|---|---|
_error.js gzip | 294 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 | -317 B |
link.js gzip | 301 kB | 301 kB | |
routerDirect.js gzip | 300 kB | 300 kB | -57 B |
withRouter.js gzip | 300 kB | 299 kB | -531 B |
Overall change | 1.49 MB | 1.49 MB |
df4a809
to
b4a5f0e
Compare
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 | rishabhsaxena/next.js update-relay-modern-ssr-example | Change | |
---|---|---|---|
buildDuration | 8.9s | 8.9s | -22ms |
nodeModulesSize | 53.2 MB | 53.2 MB | ✓ |
Client Bundles (main, webpack, commons)
zeit/next.js canary | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | -264 B |
link.js gzip | 301 kB | 301 kB | |
routerDirect.js gzip | 300 kB | 300 kB | |
withRouter.js gzip | 300 kB | 300 kB | -44 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | Change | |
---|---|---|---|
buildDuration | 9.6s | 9.6s | |
nodeModulesSize | 53.2 MB | 53.2 MB | ✓ |
Client Bundles (main, webpack, commons)
zeit/next.js canary | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | 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 | rishabhsaxena/next.js update-relay-modern-ssr-example | Change | |
---|---|---|---|
_error.js gzip | 294 kB | 294 kB | |
404.html gzip | 1.32 kB | 1.32 kB | ✓ |
hooks.html gzip | 957 B | 957 B | ✓ |
index.js gzip | 293 kB | 293 kB | |
link.js gzip | 301 kB | 302 kB | |
routerDirect.js gzip | 300 kB | 300 kB | |
withRouter.js gzip | 300 kB | 300 kB | -51 B |
Overall change | 1.49 MB | 1.49 MB |
@@ -27,17 +37,19 @@ export default class App extends NextApp { | |||
|
|||
return { | |||
variables, | |||
store, |
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.
Did you test that this works properly? only values that can be valid JSON are allowed to be returned in props, store
here is a class
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.
Yeah it seemed to work for me, needed a way to share the same store for initEnvironment
and createEnvironment
methods for SSR. We're not using the store prop at the client side.
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.
@Timer Can you confirm that this will work properly 🙏
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.
in my opinion you should create the store every time but send the state and hydrate the new store with the props returned in data fetching.
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.
Yeah that seems a better option, if we're able to init the store using the relayData
like we do for queryRecords
in the with-relay-modern example
I was just wondering if QueryRenderer
should provide the data before rendering, why isn't it fetching from the network in this case
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.
Does this seem better: rishabhsaxena@96b49f2 ?
Have used records to initate store as:
const records = environment
.getStore()
.getSource()
.toJSON()
Did not need to use react-relay-network-modern-ssr
for this though
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.
I'm not sure, I don't know how Relay works, but once you update the example I can take a look into the code, test that it works and review it.
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.
closing in favour of: #11343 |
fixes: #8537
According to the react-relay-network-modern-ssr's readme, we should use the same primed store for create environment as we used in init environment.
So when we do renderToString on the server the store should already be populated since I suppose react won't wait for the query results since they are async?
Quote from react-relay-network-modern-ssr:
// Third, render the app a second time now that the Relay store has been primed
// and send HTML and bootstrap data to the client for rehydration.