Update react relay modern ssr example #11193

rishabhsaxena · 2020-03-19T09:19:16Z

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.

ijjk · 2020-03-19T09:25:01Z

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	rishabhsaxena/next.js update-relay-modern-ssr-example	Change
buildDuration	9.6s	9.6s	⚠️ +71ms
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	✓

Rendered Page Sizes

	zeit/next.js canary	rishabhsaxena/next.js update-relay-modern-ssr-example	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	rishabhsaxena/next.js update-relay-modern-ssr-example	Change
buildDuration	9.8s	9.8s	⚠️ +41ms
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	⚠️ +352 B
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	⚠️ +749 B
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	⚠️ +196 B

ijjk · 2020-03-19T09:42:59Z

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	rishabhsaxena/next.js update-relay-modern-ssr-example	Change
buildDuration	8.5s	8.3s	-136ms
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	✓

Rendered Page Sizes

	zeit/next.js canary	rishabhsaxena/next.js update-relay-modern-ssr-example	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	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	⚠️ +343 B
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	⚠️ +338 B
routerDirect.js gzip	300 kB	300 kB	⚠️ +88 B
withRouter.js gzip	300 kB	300 kB	-44 B
Overall change	1.49 MB	1.49 MB	⚠️ +461 B

ijjk · 2020-03-19T09:43:38Z

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	rishabhsaxena/next.js update-relay-modern-ssr-example	Change
buildDuration	8.8s	8.7s	-83ms
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	✓

Rendered Page Sizes

	zeit/next.js canary	rishabhsaxena/next.js update-relay-modern-ssr-example	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	rishabhsaxena/next.js update-relay-modern-ssr-example	Change
buildDuration	9.6s	9.6s	⚠️ +41ms
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	⚠️ +21 B
404.html gzip	1.32 kB	1.32 kB	✓
hooks.html gzip	957 B	957 B	✓
index.js gzip	293 kB	293 kB	⚠️ +151 B
link.js gzip	301 kB	302 kB	⚠️ +138 B
routerDirect.js gzip	300 kB	300 kB	⚠️ +101 B
withRouter.js gzip	300 kB	300 kB	-51 B
Overall change	1.49 MB	1.49 MB	⚠️ +360 B

lfades · 2020-03-19T22:41:39Z

examples/with-react-relay-network-modern/pages/_app.js

@@ -27,17 +37,19 @@ export default class App extends NextApp {

    return {
      variables,
+      store,


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

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.

@Timer Can you confirm that this will work properly 🙏

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.

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

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

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.

@lfades Ok sure, thanks. Have created another PR: #11343

rishabhsaxena · 2020-03-25T10:36:58Z

closing in favour of: #11343

rishabhsaxena requested review from lfades and Timer as code owners March 19, 2020 09:19

rishabhsaxena mentioned this pull request Mar 19, 2020

Update react relay modern example #11135

Closed

use a common store instance for init and create envs

b4a5f0e

rishabhsaxena force-pushed the update-relay-modern-ssr-example branch from df4a809 to b4a5f0e Compare March 19, 2020 09:37

Merge branch 'canary' into update-relay-modern-ssr-example

6780780

lfades reviewed Mar 19, 2020

View reviewed changes

rishabhsaxena closed this Mar 25, 2020

vercel locked as resolved and limited conversation to collaborators Jan 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update react relay modern ssr example #11193

Update react relay modern ssr example #11193

rishabhsaxena commented Mar 19, 2020 •

edited

ijjk commented Mar 19, 2020

ijjk commented Mar 19, 2020

ijjk commented Mar 19, 2020

lfades Mar 19, 2020

rishabhsaxena Mar 20, 2020

lfades Mar 20, 2020

lfades Mar 20, 2020

rishabhsaxena Mar 21, 2020

rishabhsaxena Mar 21, 2020

lfades Mar 23, 2020

rishabhsaxena Mar 25, 2020

rishabhsaxena commented Mar 25, 2020

Update react relay modern ssr example #11193

Update react relay modern ssr example #11193

Conversation

rishabhsaxena commented Mar 19, 2020 • edited

ijjk commented Mar 19, 2020

Stats from current PR

ijjk commented Mar 19, 2020

Stats from current PR

ijjk commented Mar 19, 2020

Stats from current PR

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rishabhsaxena commented Mar 25, 2020

rishabhsaxena commented Mar 19, 2020 •

edited