Поднимите серверный рендеринг с Vue.js и laravel

Автор оригинала: Anthony Gore.

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

Если вы не используете сервер Node.js для вашего приложения, вам удачи; Только сервер JavaScript может сделать приложение JavaScript.

Тем не менее, есть альтернатива SSR, которая может быть достаточно хорошей, или даже лучше, для некоторых случаев использования. В этой статье я собираюсь объяснить метод, который я использую для «поддельного» сервера рендеринга с использованием Vue.js и laravel.

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js 2017/04/10.

Предварительный рендеринг

Предварительный рендеринг (PR) пытается достичь того же результата, что и SSR, используя браузер без головы, чтобы сделать приложение и захватить вывод в файл HTML, который затем обслуживается в браузере. Различный между этим и SSR состоит в том, что это делается заранее, а не на лету.

Ограничение: пользовательский контент

Некоторые страницы, такие как передняя страница вашего сайта, вероятно, будут содержать общий контент I.E. Контент, который все пользователи будут просматривать одинаковую. Но другие страницы, такие как страницы администратора, будут содержать пользовательский контент, например, имя пользователя и дату рождения.

Ограничение PR – это то, что он не может быть использован для страниц, содержащих такое содержание. Как я только что сказал, предварительно оказанные шаблоны сделаны только один раз и не могут быть настроены. SSR не имеет этого ограничения.

Поднимите серверный рендеринг

Мой поддельный метод SSR для Vue и Laravel предназначен для предварительной рендеринга страницы, но замените любой конкретный пользовательский контент с помощью токенов лезвия Laravel. Когда страница подается, Larave’s Вид Помощник заменит токены с конкретным пользователем содержанием.

Поэтому до предварительной рендеринга вашей страницы будет иметь это:

После предварительной рендеринга вы будете иметь это:


    
        Hello {{ $name }}, your birthday is {{ $birthday }}

И когда страница обслуживается Laravel, ваш браузер получает следующее, что именно то, что он получит от SSR:


    
        Hello Anthony, your birthday is 25th October.

С помощью этого метода мы получаем все преимущества SSR, но это можно сделать с несущевым бэкэндом, как Laravel.

Как это сделано

Я настроил Это репо С демонстрацией, но внизу ссылаться, но ниже я буду охватывать основные шаги в получении этого на работу.

1. Приложение Vue.js.

Любой пользовательский контент должен быть в свойстве данных. Мы будем использовать магазин Vuex, чтобы сделать это проще:

const store = new Vuex.Store({
  state: {
    // These are the user-specific content properties
    name: null,
    birthday: null
  }
});

new Vue({
  el: '#app',
  store
});

Когда приложение предварительно отображено, мы хотим установить пользовательские данные в виде строк, содержащих токены лезвия Laravel. Для этого мы будем использовать Vuex Заменяют Метод после создания магазина, но до установки приложения (мы установим значение глобального окно .__ Server__ в ближайшее время).

if (window.__SERVER__) {
  store.replaceState({
    name: '{{ $name }}',
    birthday: '{{ $birthday }}'
  });
}

Клиентская гидратация

Когда приложение Vue Mounts Mouse мы хотим, чтобы это забрало на страницу. Это будет понадобиться фактическое начальное состояние магазина, чтобы сделать это, поэтому давайте предоставляем его сейчас, а не использовать Ajax. Для этого мы поместим начальное состояние в строке json-encoded, которую мы создадим на следующем шаге. На данный момент давайте просто создадим логику, изменяя вышеупомянуту к:

if (window.__SERVER__) {
  store.replaceState({
    name: '{{ $name }}',
    birthday: '{{ $birthday }}'
  });
} else {
  store.replaceState(JSON.parse(window.__INITIAL_STATE__));
}

2. Шаблон лезвия

Давайте настроим шаблон лезвия, включая:

Элемент монтирования для нашего приложения Vue
Встроенные скрипты для установки глобальных переменных, обсуждаемых на предыдущем шаге
Наш сценарий сборки WebPack

Значение $ INALITY_STATE будет установлен Laravel, когда страница подана.

3. Конфигурация WebPack

Мы будем использовать WebPack Prerender-Spa-Plugin сделать предварительный рендеринг. Я сделал более подробную запись здесь О том, как это работает, но вот концепция вкратце:

Положите копию шаблона в вывод сборки WebPack, используя html-webpack-plugin Отказ
Prerender-Spa-Plugin Будет загрузовать Phantomjs, запустите наше приложение и перезаписывайте шаблон копии с предварительно отображенной разметкой.
Larave будет использовать этот предварительно отображенный шаблон в виде представления.

if (isProduction) {
  var HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports.plugins.push(
    new HtmlWebpackPlugin({
      template: Mix.Paths.root('resources/views/index.blade.php'),
      inject: false
    })
  );

  var PrerenderSpaPlugin = require('prerender-spa-plugin');

  module.exports.plugins.push(
    new PrerenderSpaPlugin(
      Mix.output().path,
      [ '/' ]
    )
  ); 
}

4. После сборки сценария

Если бы вы провели WebPack теперь, у вас будет index.blade.php В вашем WebPack Build папка, и она будет содержать:


    
        Hello {{ $name }}, your birthday is {{ $birthday }}

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

Добавьте атрибут Server-Rense = «True» к элементу горы. Это позволяет Vue знаю, что мы уже сделали страницу, и она попытается бесшовного поглощения. заменить NPM модуль может сделать эту работу.
Изменить окно .__ сервер __ = правда к окно .__ сервер __ = false Так что, когда приложение работает в браузере, он загружает магазин с исходным состоянием.
Переместите этот файл куда-нибудь, что ваш маршрут может использовать его. Давайте создадим каталог Ресурсы/Просмотры/визуализация за это. (Также может быть хорошая идея, чтобы добавить это на .Gitignore Так же, как вы бы построить на ваш веб-пакет.)

Мы создадим сценарий Bash Render.sh сделать все это:

#!/usr/bin/env bash
npm run production &&
mkdir -p resources/views/rendered
./node_modules/.bin/replace "" "" public/index.html
./node_modules/.bin/replace "" "" public/index.html &&
mv public/index.html resources/views/rendered/index.blade.php

Теперь мы можем рендерировать или повторно сделать наш шаблон в любое время, как это:

$ source ./render.sh

5. маршрут

Последний шаг – получить наш маршрут в web.php Для обслуживания предварительно отображаемого шаблона и используйте Вид Хельпер, чтобы заменить токены с помощью пользовательских данных:

Route::get('/', function () {
    $initial_state = [
        'name' => 'Anthony',
        'birthday' => '25th October'
    ];
    $initial_state['initial_state'] = $initial_state;
    return view('rendered.index', $initial_state);
});

Массив $ INALITY_STATE Содержит пользовательские данные, хотя и в реальном приложении, вы, вероятно, сначала проверяют, что пользователь авторизован и захватит данные из базы данных.

Производительность преимущества поддельного подхода SSR

Нормальный подход к отображению страницы с пользовательским контентом в приложении Frontend, например, один объяснил в Создайте приложение с Vue.js: от аутентификации, чтобы позвонить API , требует некоторого обратно между браузером и сервером, прежде чем он действительно сможет показать что-либо:

Страница запросов браузера
Пустая страница подается, и ничего еще не отображается
Браузер запросы скрипта
Сценарий теперь работает, делает запрос AJAX на сервер, чтобы получить пользовательский контент
Содержание возвращается, поэтому теперь страница, наконец, имеет то, что ему нужно что-то отображать

С таким подходом мы можем не только отображать что-то гораздо раньше, мы также можем устранить ненужный HTTP-запрос:

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

Это, конечно, является тем преимуществом, что настоящий SSR также имеет разницу в том, что этот подход делает его достижимым с сервером NODE.js, как Laravel!

Ограничения

Это довольно хрупкая и сложная установка. Быть справедливым, настройка SSR не прогуляется в парке.
Ваш сборник WebPack займет больше времени.
Если ваши данные подвергаются манипулированию JavaScript, прежде чем он будет отображаться, вы должны воссоздать эту манипулирующий серверную сторону, на другом языке. Это отстой.

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше