Задать вопрос
@jspie
javascript

Как можно сделать SSR React приложение используя express?

Добрый день, решил узнать как можно делать SSR приложение, но зашел в тупик. Обычно обращаюсь к index.html. 
<!DOCTYPE html>
<html>
<head>
	<title>Todo</title>
	<meta name="viewport" content="width=device-width initial-scale=1">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="app.bundle.js"></script>
</body>
</html>

На вебпаке настроил входную точку main.js
import React from 'react';
import {
  AppContainer
} from 'react-hot-loader';
import ReactDOM from 'react-dom';
import Component from './components/App';

ReactDOM.render(
	<AppContainer>
	<Component />
	</AppContainer>,
	document.getElementById('root')
)

if(module.hot){
  module.hot.accept(()=>{
   	ReactDOM.render(
		<AppContainer>
			<Component />
		</AppContainer>,
		document.getElementById('root')
	)
  })
}


Подскажите как можно сделать это через express? Есть примеры, но они все разные и я не могу понять как с этим работать. Может через hbs это как то сделать можно?
  • Вопрос задан
  • 1052 просмотра
Комментировать
Подписаться 2 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
Omashu
@Omashu
#TODO
Примерно так:
import React from 'react';
import { StaticRouter } from 'react-router'
import { Provider } from 'react-redux'
import ReactDOMServer from 'react-dom/server';

import Store from './store';

export default (Url, Component, Props = {}, Context = {}) => {
	return ReactDOMServer.renderToString(
		<Provider store={Store}>
			<StaticRouter
				location={Url}
				context={Context}>
				<Component {...Props}/>
			</StaticRouter>
		</Provider>
	);
}


import reactRenderToString from './reactRenderToString'
import Component from '../client/routes/Home.jsx';

console.log(reactRenderToString('/', Component))


На выходе Html строка размеченная реактом, вставляем её в #app средствами шаблонизатора или что у вас, загружается страничка, скрипты, реакт подхватывает размеченный html и навешивает обработчики. P.S стоит быть внимательным с различными библиотеками на клиенте, т.к многий говно код (в том числе и наш) не дает сборщику собрать мусор и каждый наш рендер может валяться в памяти пока не вывалится...
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать индикатор для торговой платформы Metatreder5
22 нояб. 2024, в 15:00
2500 руб./в час
Разработка базы данных на SQL
22 нояб. 2024, в 14:51
10000 руб./за проект
Разработка API на Go+ClickHouse
22 нояб. 2024, в 14:51
2000 руб./в час
Ещё заказы