Most basic way to execute ReactJs server side rendering

I want to make a very basic reactjs based application with server-side rendering to make sure the first load is quick and also to make sure all crawlers can access my content.

For this, I first followed the official reactjs docs and then looked for a basic routing option for my need. I ended up using React Router. Now, I want to enable server-side rendering for it without having to completely change this to use Redux or something. What would be the most basic/simplest way to do this.

The code in its present condition is as below:

import React from 'react'
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './index.css';


//Product Image Component
class ProductImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'https://rukminim1.flixcart.com/image/832/832/j8bxvgw0-1/mobile/g/j/z/mi-mi-mix-2-na-original-imaeydgnjzmvxwfz.jpeg?q=70',
      alt: 'the product image'

    };


  }

  render() {
    return (
      <div className="ProductImageContainer">        
          <img className="ProductImage"
      src={this.state.value}
      alt={this.state.alt}
      />

      </div>
    );
  }
}


//Single Product Component
class ProductSingle extends React.Component {

  render() {
    return (
      <div className="single">
      <ProductImage />

      </div>
    );
  }
}


//Homepage
class Home extends React.Component {
  render() {
    return (
      <div>
         <h2>Home</h2>
         <p>The content is here.</p>
       </div>
    );
  }
}


//About Page
class About extends React.Component {
  render() {
    return (
      <div>
         <h2>About</h2>
         <p>The content is here.</p>
       </div>
    );
  }
}

//Topic component
class Topic extends React.Component {
  render() {
    const {match} = this.props;

    return (
      <div>
        <h3>{match.params.topicId}</h3>
      </div>
    );
  }
}

//Topics component
class Topics extends React.Component {
  render() {
    const {match} = this.props;

    return (

      <div>
       <h2>Topics</h2>
       <ul>
         <li>
           <Link to={`${match.url}/rendering`}>
             Rendering with React
           </Link>
         </li>
         <li>
           <Link to={`${match.url}/components`}>
             Components
           </Link>
         </li>
         <li>
           <Link to={`${match.url}/props-v-state`}>
             Props v. State
           </Link>
         </li>
       </ul>

       <Route path={`${match.url}/:topicId`} component={Topic}/>
       <Route exact path={match.url} render={() => (
        <h3>Please select a topic.</h3>
      )}/>
     </div>

    );
  }
}


//Main App component
class App extends React.Component {
  render() {
    return (
      <Router>
          <div>
            <ul className="menu">
              <li><Link to="/">Home</Link></li>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/topics">Topics</Link></li>        
            </ul>



            <Route exact path="/" component={Home}/>
            <Route path="/about" component={ProductSingle}/>
            <Route path="/topics" component={Topics}/>
          </div>
        </Router>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);