From 874d3daf77b685fab68838a2d7e4ea4cf54356fc Mon Sep 17 00:00:00 2001 From: Hannah Luedeke Date: Mon, 20 Aug 2018 17:21:54 -0500 Subject: [PATCH 1/6] Updates the docs to include checking for MUI version mismatch between the client and server when doing SSR. --- .../server-rendering/server-rendering.md | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md index d9286138533de8..3a22a83ddbbef9 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering.md +++ b/docs/src/pages/guides/server-rendering/server-rendering.md @@ -221,7 +221,8 @@ function handleRender(req, res) { ### React class name hydration mismatch -There is a class name mismatch between the client and the server (it might work for the first request). +There is a class name mismatch between the client and the server. It might work for the first request. +Another symptom is that the styling changes between initial page load and the downloading of the client scripts. #### Action to Take @@ -230,6 +231,10 @@ The whole page needs to be rendered with **a single generator**. This generator needs to behave identically on the server and on the client. This has one important implication, you need to provide a new class name generator for each request. +The first thing to look at to make sure your class name generator is behaving identically on +the server and on the client is that `createGenerateClassName()` needs to be inside the request +handler: + *example of fix:* ```diff -// Create a new class name generator. @@ -244,3 +249,21 @@ function handleRender(req, res) { // Render the component to a string. const html = renderToString( ``` + +The second thing to look at is to verify that your client and server are running the **same exact +version** of Material UI. It is possible that a mismatch of even minor versions can cause styling +problems. To check version numbers, run `npm list @material-ui/core` in the +environment where you build your application and also in your deployment environment. + +You can also ensure the same version in different environments by specifying a specific MUI version +in the dependencies of your package.json. + +*example of fix (package.json):* +```diff + "dependencies": { + ... + -"@material-ui/core": "^1.4.2", + +"@material-ui/core": "1.4.3", + ... + }, +``` From 57a93e42bbc7c82712cb98753c0c944652766fc0 Mon Sep 17 00:00:00 2001 From: Hannah Luedeke Date: Mon, 20 Aug 2018 17:27:47 -0500 Subject: [PATCH 2/6] Markdown style update to properly show diff --- .../guides/server-rendering/server-rendering.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md index 3a22a83ddbbef9..d639fa558bba44 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering.md +++ b/docs/src/pages/guides/server-rendering/server-rendering.md @@ -260,10 +260,10 @@ in the dependencies of your package.json. *example of fix (package.json):* ```diff - "dependencies": { - ... - -"@material-ui/core": "^1.4.2", - +"@material-ui/core": "1.4.3", - ... - }, + "dependencies": { + ... +- "@material-ui/core": "^1.4.2", ++ "@material-ui/core": "1.4.3", + ... + }, ``` From c4cc21200de0020c9c22b4b33f9747a724cef04a Mon Sep 17 00:00:00 2001 From: Hannah Luedeke Date: Mon, 20 Aug 2018 18:13:24 -0500 Subject: [PATCH 3/6] Grammar edit --- docs/src/pages/guides/server-rendering/server-rendering.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md index d639fa558bba44..21645ba5ea02c3 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering.md +++ b/docs/src/pages/guides/server-rendering/server-rendering.md @@ -250,8 +250,7 @@ function handleRender(req, res) { const html = renderToString( ``` -The second thing to look at is to verify that your client and server are running the **same exact -version** of Material UI. It is possible that a mismatch of even minor versions can cause styling +The second thing to look at is to verify that your client and server are running the **exactly the same version** of Material UI. It is possible that a mismatch of even minor versions can cause styling problems. To check version numbers, run `npm list @material-ui/core` in the environment where you build your application and also in your deployment environment. From 881de38f2826b8de2609b6fe705b054c54d032f9 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 21 Aug 2018 09:26:26 +0200 Subject: [PATCH 4/6] Update server-rendering.md --- docs/src/pages/guides/server-rendering/server-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md index 21645ba5ea02c3..aafe30875a9274 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering.md +++ b/docs/src/pages/guides/server-rendering/server-rendering.md @@ -250,7 +250,7 @@ function handleRender(req, res) { const html = renderToString( ``` -The second thing to look at is to verify that your client and server are running the **exactly the same version** of Material UI. It is possible that a mismatch of even minor versions can cause styling +The second thing to look at is to verify that your client and server are running the **exactly the same version** of Material-UI. It is possible that a mismatch of even minor versions can cause styling problems. To check version numbers, run `npm list @material-ui/core` in the environment where you build your application and also in your deployment environment. From ed72bd372562d2f89af25f2613795dccdbd19fa2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 21 Aug 2018 09:33:09 +0200 Subject: [PATCH 5/6] Update server-rendering.md --- .../guides/server-rendering/server-rendering.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md index aafe30875a9274..dec1eebc33c0e5 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering.md +++ b/docs/src/pages/guides/server-rendering/server-rendering.md @@ -228,12 +228,9 @@ Another symptom is that the styling changes between initial page load and the do The class names value relies on the concept of [class name generator](/customization/css-in-js#creategenerateclassname-options-class-name-generator). The whole page needs to be rendered with **a single generator**. -This generator needs to behave identically on the server and on the client. -This has one important implication, you need to provide a new class name generator for each request. +This generator needs to behave identically on the server and on the client. For instance: -The first thing to look at to make sure your class name generator is behaving identically on -the server and on the client is that `createGenerateClassName()` needs to be inside the request -handler: +- You need to provide a new class name generator for each request. But you might share a `createGenerateClassName()` between different requests: *example of fix:* ```diff @@ -250,12 +247,11 @@ function handleRender(req, res) { const html = renderToString( ``` -The second thing to look at is to verify that your client and server are running the **exactly the same version** of Material-UI. It is possible that a mismatch of even minor versions can cause styling -problems. To check version numbers, run `npm list @material-ui/core` in the -environment where you build your application and also in your deployment environment. +- You need to verify that your client and server are running the **exactly the same version** of Material-UI. +It is possible that a mismatch of even minor versions can cause styling problems. +To check version numbers, run `npm list @material-ui/core` in the environment where you build your application and also in your deployment environment. -You can also ensure the same version in different environments by specifying a specific MUI version -in the dependencies of your package.json. +You can also ensure the same version in different environments by specifying a specific MUI version in the dependencies of your package.json. *example of fix (package.json):* ```diff From d5eb37d2cafaf0021d24b76a63a144dc504bf26b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 21 Aug 2018 09:35:37 +0200 Subject: [PATCH 6/6] Update server-rendering.md --- docs/src/pages/guides/server-rendering/server-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/guides/server-rendering/server-rendering.md b/docs/src/pages/guides/server-rendering/server-rendering.md index dec1eebc33c0e5..74e70ae831bf18 100644 --- a/docs/src/pages/guides/server-rendering/server-rendering.md +++ b/docs/src/pages/guides/server-rendering/server-rendering.md @@ -250,8 +250,8 @@ function handleRender(req, res) { - You need to verify that your client and server are running the **exactly the same version** of Material-UI. It is possible that a mismatch of even minor versions can cause styling problems. To check version numbers, run `npm list @material-ui/core` in the environment where you build your application and also in your deployment environment. - -You can also ensure the same version in different environments by specifying a specific MUI version in the dependencies of your package.json. + + You can also ensure the same version in different environments by specifying a specific MUI version in the dependencies of your package.json. *example of fix (package.json):* ```diff