Добавить рендеринг на стороне сервера в приложение create-реагировать

Я учусь создавать-реагировать-приложение и SSR.

В этом репозитории я добавил добавочный и реверс-роутер => https://github.com/sarovin/StarteKit.

Теперь я хочу добавить SSR (рендеринг на стороне сервера) без каких-либо изменений в create-реагировать на приложение.

У меня есть PR, где я пытаюсь его реализовать => https://github.com/sarovin/StarteKit/pull/1

Но у меня есть ошибка, потому что функция onClick() не работает в моем примере:

// App.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { switcher } from './actions/switcher';
import logo from './logo.svg';
import './App.css';

const propTypes = {
  switch: PropTypes.bool,
  dispatch: PropTypes.func,
};

class App extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    console.log('onClick');
    this.props.dispatch(switcher());
  }

  render() {
    console.log('Switch', this.props.switch);
    return (
      <div className="App">
        <div className="App-header">
          {this.props.switch ? <img src={logo} className="App-logo" alt="logo" /> : null }
          <h2>Welcome to React</h2>
        </div>
        <label className="switch" >
          <input checked={this.props.switch} type="checkbox" onChange={this.onClick} />
          <div className="slider round"></div>
        </label>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    switch: state.switcher.get('switch'),
  };
}

App.propTypes = propTypes;

export default connect(mapStateToProps)(App);

//server.js

import express from 'express';
import path from 'path';
import bodyParser from 'body-parser';
import hbs from 'express-hbs';
import cors from 'cors';
import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { renderToStaticMarkup } from 'react-dom/server';
import { RouterContext, match } from 'react-router';
import routes from './routes';
import * as reducers from './reducers';

console.log('info', 'Init App');

const app = express();
app.set("port", process.env.PORT || 8080);
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
// Make index false, so that it is not resolved by default.
app.use(express.static(path.resolve('build'), {index: false}));

app.set("views", path.resolve('build'));
app.set("view engine", "html");
app.engine("html", hbs.express4());

app.use((req, res, next) => {
  match({routes: routes, location: req.url}, (err, redirectLocation, renderProps) => {
    if (err) {
      return res.status(500).send(err.message);
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
    } else if(renderProps){
      res.status(200);

      console.log(renderProps);

      const reducer = combineReducers(reducers);
      const initialState = {};
      let store = createStore(reducer, initialState);

      let html = renderToStaticMarkup(
        <Provider store={store}>
          <RouterContext {...renderProps}/>
        </Provider>
      );

      console.log('store', store.getState());
      res.render('index.html', { content: html });
    }
    else res.status(404).send('Page not found');
  });
});

app.listen(app.get("port"), () => {
  console.log("Express server starting on port: " + app.get("port"));
});

Есть предложения?

Источник

4 ответа

Решение

Если вам нужен рендеринг на стороне сервера, я бы предложил Next.js вместо create-Reaction-app: https://github.com/zeit/next.js/

Источник

Я думал о том же. Я закончил с проектом https://github.com/haukurk/cra-ssr-ts-recipe. Это изоморфное веб-приложение, которое позволяет вам выполнять рендеринг сервера для React (с поддержкой React Router и Redux). Вы просто добавляете функцию fetchData в свой компонент маршрута, если хотите выполнить предварительную выборку данных.

SSR не является чем-то тривиальным или встроенным в React/CRA и всегда будет включать дополнительную работу для вашего веб-приложения.

Я также заглядывал в NextJS, так как люди, кажется, очень его хвалят. Я призываю вас взглянуть на это.

Источник

Я настоятельно рекомендую razzle для вашего проекта. он абстрагирует все необходимые инструменты для вашего универсального JavaScript-приложения в единую зависимость, что является большим преимуществом для SSR.

Источник

Пожалуйста, попробуй

https://github.com/antonybudianto/cra-universal

Не нужно извлекать, и по умолчанию это нулевой конфиг (v3.0.x)

Источник
Другие вопросы по тегам