Красивая девушка с лысым мышлением: рендеринг сервера реакции

JavaScript React.js

Богатая женщина пришла доложить.Я не могла сегодня придумать проблему,поэтому я почесала волосы.Я не ожидала этого,я не ожидала,что мой толстый(мэй)густой(шэн)пышный(дзи)шэн (ген)волосы потеряли несколько прядей.Обязательно избавьтесь от этой вредной привычки дергать себя за волосы из ниоткуда. Есть ли у вас какие-то необычные привычки, о которых вы не можете вспомнить, когда сталкиваетесь с проблемами?

Представьте себе образ красивой молодой девушки с длинными волосами и тремя волосами (Популярная наука: Вероятность женского облысения крайне мала, и оно не будет передаваться из поколения в поколение, как принц Уильям из британской королевской семьи. Бедный сын только что родившегося принца гарри, в этом мире есть еще один лысый человек), что мне делать, если я лысый, я могу только усердно учиться, чтобы зарабатывать деньги, а затем использовать деньги, заработанные от выпадения волос, на пересадку волос. . . цикл. . .

Сегодня я поделюсь статьей о боссе компании, очень могущественном боге (лицо поклонения) и расскажу о рендеринге на стороне сервера. Вы также можете практиковать это самостоятельно.

Реагировать на рендеринг на стороне сервера

Студенты, которые писали компоненты React, знают, что компоненты React обычно отображаются на стороне браузера с использованием js. Структура Dom, которую он генерирует, генерируется позже с помощью вычислений js. Как показано на рисунке ниже, мы видим, что структура dom в исходном файле страницы с идентификатором root фактически пуста. Но на самом деле в элементе element уже можно увидеть генерацию дерева Дом.

Отображение структуры DOM на стороне клиента

Отображение схемы структуры DOM на стороне сервера

Рендеринг сервера React (называемый SSR), то есть прямой рендеринг компонента React напрямую, с помощью которого пользователь может почувствовать существование дерева DOM, в то время как файл HTML создается, структура DOM существует. Исходный файл, который видит пользователь, показан на рисунке 2. Итак, почему вы хотите использовать серверный рендеринг? Разве рендеринг клиента не снижает нагрузку на сервер? Давайте посмотрим

Зачем использовать серверный рендеринг

После краткого понимания React-SSR целью использования рендеринга на стороне сервера является решение следующих основных проблем:

1. Поисковая оптимизация (seo)

Поскольку компоненты React используют js для рендеринга в браузере, фактические данные, просканированные поисковым роботом, — это данные без структуры DOM на рис. 1. , и это недружественно, как показано на рисунке 1.

2. Это может решить проблему белого экрана на первом экране.

Компоненты, визуализируемые Js, потребляют производительность, поэтому в терминале с низкой производительностью время, необходимое для рендеринга компонентов на стороне браузера, будет больше. Когда браузер выполняет компонент рендеринга js, для пользователя это так называемый белый экран.

Перед включением рендеринга на стороне сервера

После включения рендеринга на стороне сервера

Сравнение времени расчета скрипта до и после открытия

Если у вас есть вышеперечисленные проблемы в вашем проекте и вы не хотите отказываться от компонентов React, вы можете попробовать использовать рендеринг на стороне сервера React. Рендеринг на стороне сервера, по какому принципу он работает?

Принцип рендеринга на стороне сервера

Существует много способов рендеринга на стороне сервера. На следующем рисунке представлена ​​простая схематическая диаграмма:

Простая блок-схема серверного рендеринга

Вкратце, эти три шага таковы:

1. Клиент инициирует запрос

2. Сервер Nodejs анализирует структуру данных страницы и отображает компоненты React.

3. Клиент отображает html

Пример объяснения

Давайте взглянем на конкретный пример ниже, который является примером экспресс-рендеринга компонентов React на стороне сервера. Express предоставляет службы API страниц и промежуточного уровня (интерфейсы, вызываемые нажатием переключателя вкладок), а Webpack реализует упаковку компонентов React на сервере и клиенте.

предварительный просмотр интерфейса

В общей сложности одна страница и два компонента включены. Среди них первый и второй компоненты могут возвращать данные первого экрана и в то же время повторно выполнять рендеринг реагирующего компонента на стороне клиента.

Над складной структурой DOM

адрес экземпляра: (это скаффолд express_react_ssr)GitHub.com/WebFrontendtalk/О…

Рабочая среда

Nodejs:6.9.0 不限于此版本
Webpack：3.5.2 不限于此版本
Package.json及相关说明

Вот пакет.json:

{
  "name": "react-express-ssr",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "webpack --progress && node ./bin/www"
  },
  "dependencies": {
    "axios": "^0.18.0",  //实现组件中ajax请求
    "babel-core": "^6.24.0", //打包react组件
    "babel-loader": "^6.4.1", //打包react组件
    "babel-preset-es2015": "^6.24.0",//打包react组件
    "babel-preset-react": "^6.23.0",//打包react组件
    "cookie-parser": "~1.4.3", //express依赖
    "css-loader": "^0.23.1",  //express依赖
    "debug": "~2.6.9", //express依赖
    "ejs": "~2.5.7", //express依赖
    "express": "~4.16.0", //express依赖
    "extract-text-webpack-plugin": "^2.1.0",//打包scss文件依赖
    "http-errors": "~1.6.2",//express依赖
    "morgan": "~1.9.0",//express依赖
    "node-sass": "^4.5.1", //打包scss文件依赖
    "react": "^16.8.6",//打包react组件
    "react-dom": "^16.8.6",//打包react组件,
    "sass-loader": "^6.0.3",//打包scss文件依赖
    "style-loader": "^0.13.0",//打包scss文件依赖
    "webpack": "^3.5.2" //打包react组件
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0"
  }
}

После проекта Clone выполните npm i прямо в корневом каталоге.

После завершения установки запустите npm start и откройте браузер для доступа к localhost:3000.

Важное описание модуля Конфигурация файла входа страницы После запуска npm start и доступа к localhost:3000 server/index.js вводится в файл экспресс-записи app.js.

App.js

Как реализована маршрутизация на стороне сервера

Express предоставляет методы маршрутизатора

router.get('/urlpath', function(req, res, next) {
    const html=ReactDOMServer.renderToStaticMarkup(<App />);
    res.render(‘pageejs’, { title:"服务端渲染",content: html });
});

Как реализовать рендеринг на стороне сервера

Файл входа Webpack: server/index.js вводит компоненты в компоненты и выполняетReactDOMServer.renderToStaticMarkupметод, который визуализирует компонент в виде строки структуры DOM страницы на стороне сервера, а затем предоставляет сервис страницы экспресс-выводом в шаблоне ejs.

Два API-интерфейса на рис. 4 используются для запроса данных при нажатии на вкладку. На рис. 5 показан файл шаблона ejs.

Server/index.js

Views/index.ejs

Как компоненты сервера и клиента упаковываются? Webpack настроен следующим образом:

Webpack.config.js

Входной файл для рендеринга на стороне клиента — /components/app.js, который также включает входной файл для серверной стороны, что гарантирует, что серверная и клиентская стороны используют один и тот же набор компонентов для вывода, а также гарантирует, что компонент на стороне клиента может продолжить работу после завершения рендеринга на стороне сервера.

Components/app.js

Входной файл для рендеринга на стороне сервера — component/index.js.

Как вы можете видеть на рисунке ниже, в этом файле записи есть ссылки на два дополнительных компонента: swichtab и ssrplugin, которые в основном такие же, как и компоненты реакции, визуализированные в чистом интерфейсе!

Components/index.js

После того, как клиент упаковывает компоненты, они выводятся в файлах public/main.css и public/index.js, и на них ссылаются в файле представлений views/index.ejs для обеспечения рендеринга на стороне клиента.

На что обратить внимание на практике

1. Express не может выполнить импорт, что приводит к ошибке.

решение: npm i babel-register --save Также настройте babel-register в bin/www

require('babel-register')({
  presets: ['env']
});

2. Сообщается об ошибке, когда сервер отображает файл css или scss.

решение: Поскольку сервер напрямую запускает css или scss и другие файлы, это вызовет синтаксическую ошибку, поэтому в самом компоненте необходимо выполнить отказоустойчивую или динамическую по требованию загрузку требуемого файла scss.

try{
    require('./index.scss')  //因服务端渲染不需要scss文件，但webpack仍会处理scss文件，打包scss会出错，此处需要作为容错处理或按需加载
}catch(e){
    console.log(e.message);
}

Хотя рендеринг на стороне сервера хорош, влияние на трансформацию проекта по-прежнему относительно велико, и трансформацию необходимо тщательно оценивать~

Тебе известно! ! !

Если статья неверна, добро пожаловать на исправление! !

Добро пожаловать, чтобы обратить внимание на мой публичный номер, вместе лысеть и вместе отращивать волосы

Обсуждение веб-интерфейса

Категории