Автор оригинала: Anthony Gore.
Рендеринг на стороне сервера – это ярость прямо сейчас. Но это не без его нисходящих. Предварительный рендеринг является альтернативным подходом, который может даже быть лучше в некоторых обстоятельствах.
В этой статье мы рассмотрим, как предварительно рендеринг работает с Vue.js и посмотрите на два примера; Один с проектом Node.js, один с проектом Laravel.
Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/04/03.
Серверный рендеринг
Один из приложений на основе DownSides к JavaScript заключается в том, что браузер получает по существу пустую страницу с сервера. Дом не может быть построен, пока JavaScript не будет загружен и запущен.
Это означает, что пользователь должен подождать немного дольше, чтобы увидеть что-нибудь. Это также может оказать влияние на SEO, если шантки не могут быстро увидеть страницу.
Серверный рендеринг (SSR) преодолевает эту проблему, сделав приложение на сервере, чтобы клиент получил полный контент DOM, когда страница загружена, прежде чем JavaScript даже запущен.
Поэтому вместо браузера получают это с сервера:
...
С SSR он получает страницу с полным содержанием:
...Your Server-Side Rendered App
Hello World
Серверный рендеринг BUG
- Ваше приложение нужно будет исполнять на сервере, поэтому вам нужно будет разработать ваш код, чтобы быть «Универсальным» i.e. Он работает как в браузере, так и в сервере узла.
- Ваше приложение будет работать по каждому запросу на сервер, добавляя дополнительную нагрузку и замедление ответов. Кэширование может частично облегчить это.
- Вы можете сделать только SSR с Node.js. Если ваша основная бэкэнда является Laravel, Django и т. Д. Вам придется запустить сервер узла наряду с основной бэкэндом, чтобы позаботиться о SSR.
Предварительный рендеринг
Есть еще один способ решить проблему пустой страницы: предварительно рендеринг. При таком подходе вы запустите свое приложение перед его развертыванием, захватите вывод страницы и замените файлы HTML с помощью этого захваченного выхода.
Это почти такая же концепция, как SSR, за исключением того, что это сделано Предварительное развертывание В вашей среде разработки не живой сервер Отказ
Предварительная рендеринга обычно выполняется с помощью безголового браузера, такими как Phantomjs и может быть включено в поток сборки с помощью WebPack, Pulp и т. Д.
Предварительные предложения
- Никакой дополнительной нагрузки на сервер, поэтому быстрее и дешевле, чем SSR
- Более простая настройка производства и более простой код приложения, поэтому менее подвержена ошибке
- Не требует производственного сервера Node.js
Предварительный рендеринг минус
- Не работает хорошо для страниц, которые отображают изменение данных E.g. столы.
- Не работает для страниц, которые имеют пользовательский контент E.g. Страница счета с личными деталями пользователя. Однако эти виды страниц менее критичны для предварительной рендеринга в любом случае; Это наши основные, часто используемые страницы, которые мы хотим построить быстро.
- Вам нужно будет представлять каждый маршрут в приложении индивидуально.
Сравнительная таблица
| Производственный сервер | Любой / нет | Любой / нет | Node.js только |
| Дополнительный сервер нагрузки? | Нет | Нет | да |
| Персонализированные пользовательские данные? | Нет | N / A. | да |
Пример предварительного рендеринга Vue.js
Давайте сделаем простой пример предварительной рендеринга приложения Vue.js, один раз в среде Node.js и один раз в среде Laravel.
В этих примерах мы будем использовать WebPack с Prerender-Spa-Plugin выполнить предварительно рендеринг.
Vue и узел
Шаг 1: Установка проекта
Мы будем использовать Vue-Cli с WebPack-Simple шаблон.
$ vue init webpack-simple vue-node-pr-test $ cd vue-node-pr-test $ npm install
Есть три дополнительных модуля, которые нам понадобятся, объяснения для последующих.
$ npm install --save-dev http-server html-webpack-plugin prerender-spa-plugin
Шаг 2: включить index.html в сборке WebPack
WebPack-Simple Шаблон не включает в себя index.html Файл в выходе сборки WebPack. Однако, когда мы предсимливаем приложение, нам нужно перезаписать наши index.html Так что давайте добавим его на вывод, чтобы не уничтожить оригинал.
Используйте html-webpack-plugin в нашем webpack.config.js Файл Чтобы включить файл в сборке WebPack:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports.plugins.push(
new HtmlWebpackPlugin({
template: './index.html',
inject: false
}),
);
Теперь мы изменим наш WebPack PercingPath Так как index.html Теперь будет в одной папке, что и другие статические активы:
output: {
path: path.resolve(__dirname, './dist'),
filename: 'build.js',
publicPath: '/', // was originally 'dist'
},
И нам также нужно будет изменить в нашем index.html к Из-за измененного пути.
Шаг 3: Проверьте сборку WebPack производства
Теперь, когда мы строим:
$ npm run build
Наше Dist Папка должна выглядеть так:
- dist -- build.js -- index.html -- logo.png
И если мы осмотрим dist/index.html Это будет выглядеть так:
vue-node-pr-test
Теперь мы можем использовать http-сервер и подавать приложение из Dist папка. По умолчанию он будет работать в localhost: 8080 :
$ ./node_modules/.bin/http-server ./dist
Шаг 4: Приложение предварительного рендеринга
Теперь, когда наше index.html Файл в WebPack Build мы можем обновить его с предварительно отображенным HTML.
Во-первых, нам нужно добавить Prerender-Spa-Plugin на наш конфигурацию WebPack. Убедитесь, что это приходит после html-webpack-plugin Отказ
var PrerenderSpaPlugin = require('prerender-spa-plugin');
module.exports.plugins.push(
new PrerenderSpaPlugin(
path.join(__dirname, './dist'),
[ '/' ]
)
);
Первый аргумент для ПРИРЕНЕНТЕРСПАПЛУГИН это место нашего index.html Файл, второй – список маршрутов в приложении. Для каждого вы добавляете, вы получите другой выходной файл! В этом примере у нас просто один маршрут, хотя.
Теперь мы строим снова:
$ npm run build
Наша сборка займет больше времени, чем раньше, потому что плагин предварительного представки делает это:
- Это создает экземпляр фантомных js и запускает приложение
- Берет моментальный снимок дома
- Выводит снимок в файл HTML в нашей папке сборки
Он повторяет этот процесс для каждого маршрута, поэтому он может занять некоторое время, чтобы построить приложение, если у вас есть много страниц.
После сборки нашего dist/index.html Теперь включите все предварительно отображаемые HTML:
prerender-test 
Essential Links
Ecosystem
Vue и Laravel
Если вы пропустили пример Vue и Node, я рекомендую вам вернуться назад и прочитать его первым, так как он включает более тщательное объяснение любых общих шагов.
Шаг 1: Установка проекта
Во-первых, мы настроим новый проект Laravel.
$ laravel new vue-laravel-pr-test $ cd vue-laravel-pr-test $ npm install
Мы также добавим еще два модуля NPM, нам понадобится:
$ npm install --save-dev html-webpack-plugin prerender-spa-plugin
Шаг 2: Служить простой HTML-файл
По умолчанию Laravel обслуживает файл шаблона Blade в корневом URL. Чтобы пример проще, мы заменим его в следующий простой HTML-файл, который мы создадим на Ресурсы/Просмотры/index.html
Laravel
Теперь нам нужно служить этот файл вместо шаблона лезвия в корневом маршруте. Изменить маршруты/web.php к этому:
Route::get('/', function () {
return File::get(public_path() . '/index.html');
});
Это фактически указывает на нашу папку сборки, которую мы будем генерировать в ближайшее время.
Шаг 3: Добавьте файл HTML в сборку
Как и в примере узла, мы хотим включить наши index.html В сборке WebPack, чтобы мы могли перезаписать его позже с предварительно отображенным HTML.
Нам нужно будет сделать конфигурацию WebPack. Я использую Laravel 5.4 в этом примере, который использует Maravel Mix. Mix не дает вам локального файла конфигурации WebPack, потому что он использует свой собственный файл по умолчанию, поэтому давайте сделаем один, справившись из laravel-mix модуль:
$ cp ./node_modules/laravel-mix/setup/webpack.config.js .
Нам также нужно будет сделать наш сценарий производства NPM в этом файле конфигурации, поэтому отредактируйте Package.json И изменить производственный скрипт к этому:
cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js
Теперь мы добавляем html-webpack-plugin нашему webpack.config.js файл. Добавьте это в нижнюю часть файла выше Микс завершается раздел:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports.plugins.push(
new HtmlWebpackPlugin({
template: Mix.Paths.root('resources/views/index.html'),
inject: false
});
);
Шаг 4: Испытайте сборку WebPack производства
Давайте теперь построим для производства и служению:
$ npm run production $ php artisan serve
Вы, вероятно, получите ошибку в браузере при запуске приложения, потому что мы никогда не устанавливаем значение для window.laravel.csrftoken Отказ Для этого простого примера это быстрее просто прокомментировать его, поэтому изменить Ресурсы/Активы/JS/Bootstap.js как это:
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
// 'X-CSRF-TOKEN': window.Laravel.csrfToken;
};
Шаг 5: приложение предварительного рендеринга
Теперь нам нужно использовать Prerender-Spa-Plugin На нашем веб-пакете Config для выполнения предварительной рендеринга. Убедитесь, что это приходит после html-webpack-plugin Отказ
var PrerenderSpaPlugin = require('prerender-spa-plugin');
module.exports.plugins.push(
new PrerenderSpaPlugin(
Mix.output().path,
[ '/' ]
)
);
Теперь мы можем сделать производственную сборку:
$ npm run production
Если вы проверяете папку сборки, dist/index.html Теперь должен выглядеть следующее, в комплекте с предварительным рендером HTML:
Laravel
Example Component
I'm an example component!
Стать старшим Vue Developer в 2020 году.
Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.
Учить больше