Рендеринг на стороне сервера(ssr) на React с бекендом на Express
Здравствуйте. Сегодня начнём цикл статей про ssr на react с бекендом на express.
Установка
Для начала нам необходимо устанвить нужные пакеты.
Создадим новую папку и в ней выполним следующие команды:
npm init
Ответьте на все вопросы.
npm install
npm install --save-dev babel-cli babel-preset-react webpack css-loader file-loader style-loader babel-loader babel-cli babel-preset-env webpack-node-externals
Установили babel и webpack, а также другие вспомогательные пакеты.
Далее установим express и react:
npm i express -s
Настройка express
После установки в корне проекта создадим файл server.js.
Пропишем следующее:
import express from "express";
import React from "react";
import { renderToString } from 'react-dom/server';
import template from './client/template';
import App from './components/App';
var app = express();
app.use((req, res) => {
return res.end(
template({
body: renderToString(<App />)
})
)
});
var port = 3001;
app.listen(port, ()=>{console.log(`Ok. Server listen post ${port}`)})
Это заготовка для нашего сервера.
Мы подключаем кроме react,react-dom и express, наш шаблон страницы template и точку входа App
Работа с react
Создадим простую точку входа. Я создал её в папке components файл App.js
import React, { Component } from "react";
import { render} from "react-dom";
export default class App extends Component {
render(){
return(
<div>
<h1>Hello</h1>
</div>
);
}
}
Тут всё просто. Выведем тег H1.
Далее в папке client создадим наш шаблон с название template.js
export default ({body}) => {
return `
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">${body}</div>
</body>
</html>
`;
};
Это простая функция, выводящая наш html, и которая вставляет аргумент функции body
. Это сгенерированный на сервере код renderToSting(<App />)
.
Настройка webpack
И в итоге, настройка webpack.
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: ['babel-polyfill','./server.js'],
output: {
filename: './start.js'
},
target: 'node',
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(woff2?|ttf|otf|eot|svg|png|jpg)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
name: './external/[name].[ext]'
}
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['env', 'react'],
compact: false
}
},
],
}
};
webpack-node-externals - Эта библиотека создает внешнюю функцию, которая игнорирует node_modules при связывании
И укажем для файлов '.js', в какой формат переводить наш код.
Материал подготовлен автором @zheev