Посібник з серверного рендерингу, Керівництво Vue SSR

Для цього посібника потрібні такі версії Vue та бібліотек:

vue & vue-server-renderer 2.3.0+
vue-router 2.5.0+
vue-loader 12.0.0+ & vue-style-loader 3.0.0+

Що таке серверний рендеринг (SSR)?

Vue.js - це фреймворк для створення програм, що виконуються на клієнті (client-side). За замовчуванням компоненти Vue створюють та маніпулюють DOM у браузері. Однак, також можливо рендерувати ті ж компоненти в HTML-рядки на сервері, відправляти їх у браузер, і нарешті «гідрувати» статичну розмітку повністю інтерактивний додаток на клієнті.

Додаток Vue.js відрендерований на сервері також можна вважати «ізоморфним» або «універсальним», у тому сенсі, що більшість коду програмиє спільною для сервера та клієнта.

Чи потрібний вам SSR?

У порівнянні з традиційним SPA (Single-Page Application) перевагами серверного рендерингу будуть:

Найкраще SEO, оскільки пошукові роботи бачитимуть повністю відрендеровану сторінку.

Слід враховувати деякі компроміси при використанні серверного рендерингу:

Обмеження під час розробки. Код лише для браузера може бути використаний лише у певних хуках життєвого циклу; деякі зовнішні бібліотеки можуть потребувати особливої обробки, щоб мати можливість запускатися у додатку із серверним рендерингом.

Більш складні вимоги щодо налаштування та розгортання складання. На відміну від повністю статичного SPA, який може бути розгорнутий на будь-якому статичному файловому сервері, додаток із серверним рендерингом вимагає оточення, де є можливість запустити сервер Node.js.

Підвищена навантаження за сервера. Рендерингповноцінного додатка в Node.js очевидно більш вимогливий до ресурсів процесора, ніж проста роздача статичних файлів, тому якщо ви очікуєте на великий трафік, будьте готові до відповідного навантаження на сервер і використовуйте стратегії кешування.

Перш ніж використовувати серверний рендеринг для вашої програми, поставте собі питання, чи дійсно він вам потрібний. Відповідь залежить від того, наскільки важливим є час до контенту для вашої програми. Наприклад, якщо ви розробляєте панель моніторингу для внутрішніх потреб, де додаткові кілька сотень мілісекунд початкового завантаження не такі важливі, серверний рендеринг буде надмірністю. Однак, у випадках, коли час до контенту критичний, серверний рендеринг може дозволити досягти найкращої продуктивності початкового завантаження.

# SSR vs Пререндеринг

Якщо ви цікавитеся серверним рендерингом тільки для того, щоб покращити SEO на декількох маркетингових сторінках (наприклад, / , /about , /contact , і т.д.), вам швидше за все буде достатньопререндерінгу. Замість того, щоб змушувати веб-сервер компілювати HTML на льоту, пререндеринг просто згенерує статичні HTML-файли для зазначених маршрутів на етапі збирання. Перевагою пререндерингу буде простота реалізації, крім того, цей підхід дозволить вам залишити фронтенд повністю статичним.

Якщо ви використовуєте Webpack, то для додавання пререндерингу достатньо встановити плагін prerender-spa-plugin

. Він був ретельно протестований з програмами Vue, а його творець

- Член основної команди розробки Vue.

# Про це керівництво

Цей посібник орієнтований на SPA програми з рендерингом на сервері, використовуючи Node.js як сервер. Використання серверного рендерингу Vue спільно зіншими технологіями та налаштуваннями бекенда є окремою темою та коротко обговорюється в окремому розділі.

Цей посібник буде дуже детальним і припускає, що ви вже знайомі з самим Vue.js, маєте знання та досвід роботи з Node.js та Webpack. Якщо ви віддаєте перевагу більш високорівневим рішенням, що забезпечують роботу з коробки — вам слід спробувати Nuxt.js

. Він побудований на тому ж стеку Vue, але дозволяє абстрагуватися від написання шаблонного коду, а також надає деякі додаткові можливості, такі як створення статичного сайту. Однак він може не підійти, якщо вам необхідний повний контроль за структурою програми. У будь-якому випадку, вам буде корисно прочитати цей посібник, щоб краще розуміти, як усі складові працюють разом.

У міру прочитання керівництва буде корисним звертатися до офіційного демо HackerNews

, в якому використовується більшість технік, викладених у цьому посібнику.

Зрештою, зверніть увагу, що рішення в цьому посібнику не є остаточними — ми вирішили, що вони добре працюють для нас, але це не означає, що вони не можуть бути покращені. Вони можуть бути переглянуті в майбутньому - тому не соромтеся робити свій внесок, відправляючи пулл-реквести!