Server Side Rendering

[Arcadix]

hi

React.Net has Server Side Rendering for React Js to speed it up. For React Native that obviously is not required. But how can React.Net / Server Side Rendering to integrated into React XP so that maximum speed is available for Web Apps? (while maintaining same codebase with react native)?

thanks for your response.

[erictraut]

We (the Skype team) haven't done any experimentation with server-side rendering — mainly because our app has a dependency on local storage for cached data.

I don't anticipate any problems with server-side rendering. We run our web app (which includes the web implementation of ReactXP) within a non-browser (node) environment as part of our test infrastructure. This gives me some level of confidence that we haven't introduced any browser dependencies. In other respects, it should just work like any other React JS app when run on the server, assuming it doesn't depend on local storage for its initial render.

If you give it a try, let us know if you run into any problems.

[MovingGifts]

@ArcadixPascal were you able to get a ReactXP app running with SSR?

[robbie-c]

It would be incredibly useful to have an example of SSR with hot reloading set up. I tried to get this working this weekend and hit a wall, I suspect a bit more knowledge about the tech stack would have come in handy.

[manishoo]

I managed to get SSR working by forking reactxp and fixing the parts which were raising errors on server environment + using jsdom and shimming some other parts such as global.navigator

[deregtd]

Any chance you can open a PR to send the changes back?

[manishoo]

@deregtd sure! 👍

[dagatsoin]

I jump onto this old thread to continue the discussion. In my experience, RXP has two kinds of issue with SSR :
1- it uses some front end API (for measurement)
2- text does not appears with javascript disabled

For the first point, I use the domino package as a workaround when I bootstrap the app.

global["window"] = domino.createWindow() as typeof global["window"];
global["document"] = domino.createDocument() as typeof global["document"];
global["navigator"] = window.navigator;

But the second is more complicated because it needs to change the Text implementation. As JS is disabled, the text stays in the data-text-as-pseudo-element attributes.

[fbartho]

@dagatsoin -- as mentioned in #1105 -- this is pretty far from the current reactxp designed use-cases. If you do figure out what changes are needed to better support this, I definitely would support documentation on how to enable it.

If it requires minor changes, we could consider a PR that makes those changes, but maintaining reactxp is a already a big job so we don't want to cause additional maintenance burden, so we'll have to weigh the PR carefully to see if it makes this that much harder to maintain.

[dagatsoin]

I just begin my journey to SSR with ReactXP. I have just spotted this two points.
I think the first point can be put in documentation as it. It will work perfectly without a warning.

The second point can be solve in a client component by switching from to

depending on the environnement.

My use case is building an UI Library for cross plateform purpose. So in my case I can hoist the code needed to make SSR work in my package.

If I found any blocking points I will put them in this thread.