server side rendering react Issue rendering a subroute - reactjs

Question

I have a route: /events with a subroute /events/:id
I created a reducer and an action for fetching all the events and display them in the eventsPage.
This part works fine.
Now from the events page, when I click on an event I'm trying to navigate to /events/:id
In the events/:id page I created an action which is called in the componendDidMount callback then display the event from there.
It works fine when I click on a link to an event's details page from the list. Now I'm looking for the way to perform the request on the server side so when I do a full reload of the page, the selected event is still displayed.
Here is my events/:id page component
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {fetchEvent} from '../actions/eventsActions'
class EventDetail extends Component {
constructor(props){
super(props);
this.state = {
event: null
}
}
componentDidMount(){
this.props.fetchEvent(this.props.match.params.slug).then(response => {
this.setState({
event: response.event
})
}).catch(error => {
console.log('error', error);
});
}
render() {
return (
<div>
{JSON.stringify(this.state)}
</div>
);
}
}
function loadData(store){
}
export default {
component: connect(null, {fetchEvent})(EventDetail),
loadData
};
my fetch_event action
import {FETCH_EVENT} from './types';
export const fetchEvent = (event_slug) => async(dispatch, getState, api) => {
const res = await api.get(`/api/events/${event_slug}`);
dispatch({
type: FETCH_EVENT,
payload: res.data
})
return res.data;
}
How can I fix this?