ReactJs 서버 측 렌더링을 수행하는 가장 기본적인 방법

Question

서버 측 렌더링과 함께 매우 기초적인 반응 애플리케이션을 만들어 첫 번째로드가 빠르며 모든 크롤러가 내 컨텐츠에 액세스 할 수 있는지 확인하려고합니다.

이 경우 처음에는 공식 reactjs 문서를 따른 다음 내 필요에 맞는 기본 라우팅 옵션을 찾았습니다. 나는 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 내 REPO을 확인하십시오. 나는 redux와 redux-saga를 사용했으나 필요로하는 다른 플럭스로 교체 할 수 있다고 생각합니다.