Die einfachste Art, ReactJs serverseitiges Rendering auszuführen

Question

Ich möchte eine sehr einfache reactjs-basierte Anwendung mit serverseitigem Rendering erstellen, um sicherzustellen, dass der erste Ladevorgang schnell ist und außerdem, dass alle Crawler auf meinen Inhalt zugreifen können.

Dazu folgte ich zunächst den offiziellen reactjs docs und suchte dann nach einer grundlegenden Routing-Option für meine Bedürfnisse. Ich endete mit React Router. Jetzt möchte ich das serverseitige Rendering für dieses Feature aktivieren, ohne dieses vollständig auf Redux oder etwas anderes umstellen zu müssen. Was wäre der grundlegendste/einfachste Weg, dies zu tun.

Der Code in seinem jetzigen Zustand ist wie folgt:

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') 
); 

Answer 1

https://github.com/gzoreslav/react-redux-saga-universal-application/blob/master/README.md bitte meine Repo überprüfen. Ich habe Redox und Redux-Saga verwendet, aber ich denke, Sie können sie durch ein anderes Flussmittel ersetzen, das Sie benötigen