Question

我想在服务器端渲染中创建一个非常基本的基于reactjs的应用程序，以确保第一次加载很快，并确保所有抓取工具都可以访问我的内容。

为此，我首先关注官方的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请检查我的回购。我使用了redux和redux-saga，但我猜你可以用你需要的另一种助焊剂代替它们

执行ReactJs服务器端渲染的最基本方法

1 个答案: