Как сделать серверный рендеринг на React?

Question

[Максим Антонихин]

Задался вопросом сделать серверный рендеринг для приложения на реакте. Нашел примеры, все получилось. Но как быть с собранным приложением в один файл? У меня, получается, сервер отдает статичные 3 файла: bundle.js, bundle.js.map и index.html.
Буду благодарен за советы.

Answer 1

[Леша Федосеев]

index.html — его быть не должно.

Должен быть шаблон (jade, handlebars, whatever), в который:

• через переменную вставляется DOM от реакта (результат React.renderToString);
  
• после него через тег script подключается файл приложения (bundle.js)
  

Сервер рендерит этот шаблон и отдает html с клиентским приложением на клиента.

bundle.js.map — это SourceMaps, их в production быть не должно, оно убирается через настройку Webpack.

Роутинг

Если это SPA:

import express    from 'express';
import React      from 'react';
import Router     from 'react-router';
import Location   from 'react-router/lib/Location';

import App        from '/path/to/App';
import routes     from '/path/to/routes';


const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', middleware);

function middleware(req, res, next) {
  
  const location = new Location(req.path, req.query);
  
  Router.run(routes, location, (error, initialState, transition) => {
    
    const body   = React.renderToString(<App {...initialState} />);
    const layout = `${process.cwd()}/path/to/layout.jade`;
    const html   = Jade.compileFile(layout, { pretty: false })({ body });
    
    res.send(html);
    
  });
  
}

Если это статика:

import express  from 'express';
import React    from 'react';

import Main     from 'components/Main';
import About    from 'components/About';


const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => middleware(req, res, Main));
app.get('/about', (req, res) => middleware(req, res, About));

function middleware(req, res, Component) {
  
  const body   = React.renderToString(<Component />);
  const layout = `${process.cwd()}/path/to/layout.jade`;
  const html   = Jade.compileFile(layout, { pretty: false })({ body });
  
  res.send(html);

}

/* Jade Layout */

doctype html
html
  
  head
    // head stuff...

  body
    #app!= body
    script(src="/bundle.js")

Comments

[Максим Антонихин]

А как быть в такой случае с роутингом?

[Леша Федосеев]

Максим Антонихин Обновил ответ ↑

[Максим Антонихин]

Леша Федосеев: а в случае со статикой каждый переход по ссылке будет сопровождаться перезагрузкой страницы?

[Леша Федосеев]

Да, поэтому лучше смотреть на SPA-вариант.

[Леша Федосеев]

Только в примере я использовал react-router@1.0.0-beta3, если забирать из npm, то нужно обязательно указать версию (stable там сейчас 0.13.3).

[Максим Антонихин]

Леша Федосеев: ниразу не запускал jsx на ноде. не подскажите как сие чудо запустить?

[Леша Федосеев]

Например вот так: https://github.com/alexfedoseev/universal-basics

[Максим Антонихин]

Леша Федосеев: не пример, а отрыв башки. Спасибо. Форкнуть можно?)

[Леша Федосеев]

Для этого и пушил)

[Максим Антонихин]

Леша Федосеев: шикарно, спасибо. Можно еще пару вопросов задать по этому примеру на мыло?

[Леша Федосеев]

[e-mail]

[Влад Шариков]

Почему нужно убирать source maps?
bundle.js.map — это SourceMaps, их в production быть не должно, оно убирается через настройку Webpack.

Если не открыть консоль, то ничего такого и не случится. Разве нет? На объем того что загружают пользователи наличие или отсутствие сорс мапа никак не влияет.