How to do server side rendering with Reacjs.Net with Redux together?

Question

I'm trying to do server side rendering with an application made in ASP.NET MVC, using ReactJS and Redux. I'm using ReacJS.Net.

My components are fine with client rendering.

My application could be the one of the example from here : http://redux.js.org/docs/basics/UsageWithReact.html. Here the main code (for client rendering) .

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

render(
  <Provider store={store}>
     <App />
  </Provider>,
 document.getElementById('root')
)

How to do this with ReacJS.NET with server-side rendering ?

Allsun

did you find out how to do it ? – Violist

@Violist Nope, I didn't find any solution – Allsun

First I would recommend you to check the documentation from ReactJS.NET regarding SSR. Second, for SSR, the solution on Redux is to inject an initial state in a global variable in the server side when you render the application HTML. Ex: <script>window.__MY_STATE__ = {...}</script>. In the client you can retrieve the state from that variable. It's not beautiful, but it works and it's a common technique. – Touchstone

I did check this documentation long ago. But it does not talk about Redux, and it is not just about just passing a variable as you say (or am I am missing something). My problem is to initialize the store and build a component with the Provider. I do not know how to do that with ReactJS.NET. – Allsun

Answer 1

I think you should start here. I'm not sure about Redux but this explains a lot:

https://reactjs.net/guides/server-side-rendering.html

And there's also a really good example of Server side react rendering:

https://github.com/systempioneer/React-Umbraco-Example

it's build with Umbraco, but Umbraco is an MVC based CMS so you can pretty much figure out the basics.

Egis

Redux really is the important thing here. Without it it's no use. It looks like the documentation for ReactJS.NET only mentions passing passing props but not initialising a redux store. – Rodrigorodrigue

@Rodrigorodrigue - Did you sort this in any way =D – Locate

Sadly not. I ended up putting the state as deserialised string that I then picked up in redux. No server side rendering as I didn't need the server side rendering in my case. – Rodrigorodrigue