ReactJsサーバーのサイドレンダリングを実行するための最も基本的な方法

Question

非常に基本的なreactjsベースのアプリケーションをサーバー側のレンダリングで作成して、最初の読み込みが迅速であることを確認し、すべてのクローラーが自分のコンテンツにアクセスできるようにしたい。

このため、私は公式のreactjs docsに従ってから、私の必要性のために基本的なルーティングオプションを探しました。私はReact Routerを使用して終了しました。今、Reduxなどを使用するためにこれを完全に変更することなく、サーバー側のレンダリングを有効にしたいと考えています。これを行うための最も基本的な/簡単な方法は何でしょうか。

その現状のコードは以下の通りです：

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私のレポをチェックしてください。私はreduxとredux-sagaを使用しましたが、あなたが必要とする別のフラックスでそれらを置き換えることができると思います。