Server Side Rendering в Vue.js используя Express

0

Intro

Рендеринг на стороне сервера (SSR) — одна из тех вещей, которые давно позиционируются как одна из самых сильных сторон React, Angular 2+ и Vue 2. Она позволяет рендерить ваши приложения на сервере, а затем дополнять их реактивной реакцией на стороне клиента после загрузки страницы, значительно увеличивая скорость реагирования и улучшая время загрузки ваших страниц.

К сожалению, это не самая очевидная вещь для настройки, и документация по рендерингу приложений Vue.js на сервере раскидана по нескольким местам. Надеюсь, что это руководство поможет вам разобраться в этом. 🙂

1

Установка

Мы начнем с простого шаблона vue-cli webpack, чтобы дать нам общую базу для работы.

# Create the project
$ vue init webpack-simple vue-ssr-example
$ cd vue-ssr-example
# Install dependencies
$ yarn # (or npm install)

2

Подготовка приложения

Шаблон webpack-simple не поставляется с возможностями SSR прямо из коробки. Вначале нужно настроить несколько параметров.

Первое, что нужно сделать, это создать отдельный файл входа для сервера. Сейчас клиентская запись находится в main.js. Скопируем это и создадим main.server.js из него. Изменения довольно просты. Нам просто нужно удалить ссылку el и вернуть приложение в экспорт по умолчанию.

Нам также нужно немного изменить index.html, чтобы подготовить его к SSR.

Замените <div id = "app"> </div> на <!--vue-ssr-outlet-->, так как здесь:

3

Webpack Configuration

Теперь нам нужен отдельный файл конфигурации webpack, чтобы отобразить серверный пакет. Скопируйте файл webpack.config.js в новый файл,
webpack.server.config.js.

Есть несколько изменений, которые нам нужно сделать:

4

Build Config

Чтобы упростить разработку, давайте обновим скрипты сборки в package.json для создания пакетов клиентских и серверных веб-пакетов.

Замените сценарий одиночной сборки этими тремя. Использование остается прежним, но теперь вы можете создавать пакеты клиента или сервера отдельно с build:client или build: server, соответственно.

5

Серверный скрипт

Теперь нам нужен сценарий сервера для рендеринга приложения.

6

Запуск приложения

Если все пойдет хорошо, вы сможете собрать сборку и запустить сервер с помощью:

# Build client and server bundles.
$ npm run build
# Run the HTTP server.
$ node ./server.js

Если вы откроете http://localhost:8080, все должно выглядеть… как раньше. Однако, если вы отключите JavaScript, ничего не изменится, потому что приложение сначала рендерится на сервере.

Вы только что реализовали свой первый серверный рендеринг на Vue JS 🙂

Похожие публикации

Комментарии