5

After refreshing the page (and going through my ssr) it looks like none of the css is sustained unless I navigate through my app and get back to it Or even click some elements. Are there any examples of how this is done correctly?

Im using the exact same code from the controlled 'react material ui grid' example:

https://github.com/kkotwal94/DrivingService (develop branch) <- where the component is under components / demoBase, and the SSR is under server/render/pageRender.jsx. I use the material ui example for how this is done. I utilize demo grid in Students.jsx.

Here is a pic of what happens post refresh: image

Everything else renders fine (all other pages) in production mode and dev mode. I have no clue what im missing here. It looks like the jss-in-css is mapping incorrectly.

I found that reverting back to pre-React 16 everything began to work again SSR and what not, however i cant use dx-react-grid project since it requires 16. Kind of in a wackamole, still investigating where i goofed.

TEST

http://transportation.kkotwal.me/ I hosted it, if you click on login you can log in with yea@yea.com, password: 123, or you can just sign up where the username has to be a email it doesnt matter. After wards if you navigate to the students button on the navigation (if you click on transportation tracker after logging in you should be back to the root page / view). You will see the dev extreme controlled grid example.

If you hit refresh on that page you will see all the css is messed up. In case you arent sure what the page is: http://transportation.kkotwal.me/students. The source is here: https://github.com/kkotwal94/DrivingService/tree/UpdateReact . The server side rendering is located https://github.com/kkotwal94/DrivingService/tree/UpdateReact/server/render. The component for the devExtreme component is called DemoBase.jsx in the components folder, and the container that renders this is https://github.com/kkotwal94/DrivingService/blob/UpdateReact/app/containers/students/Students.jsx.

Karan
  • 1,141
  • 2
  • 19
  • 42
  • First turn off minification in your production build (remove uglify from webpack config) so that you can see if react is throwing any warnings. if you watch closely, on server page load, the grid loads with better styles, then after something happens, it barfs. this could be from the client trying to re-render when react checksums don't match – Andy Ray Jan 16 '18 at 06:52
  • Yea, it mentions that the class on the server and client dont match for a button, which leaves me to believe none of them are matching correctly. That being said, I know that they need to match on the server and client. But I don't know how to accomplish that. – Karan Jan 17 '18 at 01:35

2 Answers2

0

I guess you're already aware that React 16 came with lots of improvements to server-side rendering. The update came with additional server-side render methods like renderToNodeStream().

The official guide on upgrading React from 15 to 16 mentions that it should have no issues, with minor exceptions. One of those exceptions is a break change exactly when you hydrate a server-rendered container:

Hydrating a server-rendered container now has an explicit API. If you’re reviving server-rendered HTML, use ReactDOM.hydrate instead of ReactDOM.render. Keep using ReactDOM.render if you’re just doing client-side rendering.

Having that in mind, I'd search in your project (and possibly in third-party libraries as well) for some ReactDOM.render that was missed to be changed to ReactDOM.hydrate while upgrading React to version 16.

falsarella
  • 12,217
  • 9
  • 69
  • 115
  • hmm, I did though. I will double check however. – Karan Jan 17 '18 at 16:42
  • 1
    Yea doesnt seem to be the issue. Heres a reference to a possible issue for search engine homies: https://github.com/DevExpress/devextreme-reactive/issues/671 – Karan Jan 20 '18 at 01:15
0

this is probably the issue at server side code and your nodejs script.

Reason #1: if you are using material ui version 4.x then you should look at their ssr documentation in material ui version 3.x or below that we use

JssProvider from 'react jss/lib/JssProvider';

however this is no more required, your both github links are broken , kindly check ssr code of yours and compare it with material-ui documentation

Reason #2: you have to refer to your build folder for your expressjs

app.use(express.static(path.join(__dirname, '../../build'))); 
app.use(express.static(path.join(__dirname, 'public')));

this could be another reason and if this is missing then check that your componentDidMount also will not be invoked, so client side rendering won't be happening, however for ssr both client side and server side rendering has to happen

For complete code on SSR kindly refer this link

Sadanand
  • 1,080
  • 3
  • 13
  • 30