Подделка рендеринга на стороне сервера с помощью Vue.js и Laravel

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

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

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

Pre-Rendering

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

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

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

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

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

Мой фальшивый метод SSR для Vue и Laravel — предварительно отрендерить страницу, но заменить любой пользовательский контент токенами Laravel Blade. Когда страница обслуживается, viewпомощник Laravel заменит токены пользовательским контентом.

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

<div id="app"></div>

После предварительного рендеринга вы получите следующее:

<div id="app">
    <div>
        Hello {{ $name }}, your birthday is {{ $birthday }}
    </div>
</div>

<div id="app" server-rendered="true">
    <div>
        Hello Anthony, your birthday is 25th October.
    </div>
</div>

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

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

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

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

<div id="app"></div>
<script>window.__SERVER__=true</script>
<script>window.__INITIAL_STATE__='{!! json_encode($initial_state) !!}'</script>
<script src="/js/app.js"></script>

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,
      [ '/' ]
    )
  ); 
}

<div id="app">
    <div>
        Hello {{ $name }}, your birthday is {{ $birthday }}
    </div>
</div>
<script>window.__SERVER__=true</script>
<script>window.__INITIAL_STATE__='{!! json_encode($initial_state) !!}'</script>
<script src="/js/app.js"></script>

#!/usr/bin/env bash
npm run production &&
mkdir -p resources/views/rendered
./node_modules/.bin/replace "<div id=\"app\">" "<div id=\"app\" server-rendered=\"true\">" public/index.html
./node_modules/.bin/replace "<script>window.__SERVER__=true</script>" "<script>window.__SERVER__=false</script>" public/index.html &&
mv public/index.html resources/views/rendered/index.blade.php

$ source ./render.sh

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