Рендеринг на стороне сервера(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

vox-populissrreactexpressnpm
25%
781
164
44.347 GOLOS
0
В избранное
Web Development
Тех, кто презирает программистов, программисты презирают сильнее, чем те, кто презирает тех программистов, которые презирают тех, кто их презирает.
164
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (2)
Сортировать по:
Сначала старые