Ръководство за рендиране на сървър, Ръководство за Vue SSR

Този урок изисква следните версии на Vue и библиотеки:

vue & vue-server-renderer 2.3.0+
vue рутер 2.5.0+
vue-loader 12.0.0+ & vue-style-loader 3.0.0+

# Какво е сървърно изобразяване (SSR)?

Vue.js е рамка за изграждане на приложения, които се изпълняват на клиента (от страна на клиента). По подразбиране компонентите на Vue създават и манипулират DOM в браузъра. Въпреки това е възможно също така да изобразите същите компоненти в HTML низове на сървъра, да ги изпратите до браузъра и накрая да хидратирате статичното маркиране в напълно интерактивно приложение на клиента.

Рендирано от сървър Vue.js приложение може също да се счита за „изоморфно“ или „универсално“, в смисъл, че по-голямата част от кода на приложениетосе споделя между сървъра и клиента.

# Имате ли нужда от SSR?

В сравнение с традиционното SPA (Single-Page Application), предимствата на сървърното изобразяване ще бъдат:

По-добро SEO, тъй като ботовете за търсене ще видят напълно изобразената страница.

Има някои компромиси, които трябва да имате предвид, когато използвате изобразяване от страна на сървъра:

Ограничения за развитие. Кодът само за браузър може да се използва само в определени кукички на жизнения цикъл; някои външни библиотеки може да се нуждаят от специална обработка, за да могат да се изпълняват в изобразено от сървър приложение.

По-сложни изисквания за настройка и внедряване. За разлика от напълно статичен SPA, който може да бъде разгърнат на всеки статичен файлов сървър, изобразеното на сървър приложение изисква среда, в която е възможно да се изпълнява Node.js сървър.

Повишено натоварване от страната на сървъра. изобразяванеПълното приложение в Node.js очевидно е по-интензивно за процесора, отколкото простото обслужване на статични файлове, така че ако очаквате много трафик, бъдете готови да натоварите сървъра съответно и да използвате стратегии за кеширане.

Преди да използвате сървърно изобразяване за вашето приложение, запитайте се дали наистина имате нужда от него. Отговорът зависи от това колко важно е времето за съдържание за вашето приложение. Например, ако разработвате табло за управление за вътрешна употреба, където допълнителните няколкостотин милисекунди зареждане не са толкова важни, тогава изобразяването на сървъра би било излишно. Въпреки това, в случаите, когато времето за съдържание е критично, изобразяването от страна на сървъра може да постигне най-добрата производителност при стартиране.

# SSR срещу предварително изобразяване

Ако се интересувате само от изобразяване от страна на сървъра, за да подобрите SEO на няколко маркетингови страници (като / , /about , /contact и т.н.),предварителното изобразяване вероятно е достатъчно за вас. Вместо да принуждава уеб сървъра да компилира HTML в движение, предварителното изобразяване просто ще генерира статични HTML файлове за посочените маршрути по време на изграждане. Предварителното изобразяване има предимството, че е лесно за внедряване и също така ви позволява да поддържате интерфейса напълно статичен.

Ако използвате Webpack, за да добавите предварително изобразяване, просто инсталирайте приставката prerender-spa-plugin

. Той е широко тестван с приложения Vue и неговия създател

Член на основния екип за разработка на Vue.

# За това ръководство

Този урок се фокусира върху рендирани от сървър SPA приложения, използващи Node.js като сървър. Използване на Vue Server Rendering сдруги технологии и бекенд настройки са отделна тема и са разгледани накратко в отделен раздел.

Това ръководство ще бъде много подробно и предполага, че вече сте запознати със самия Vue.js и имате познания и опит с Node.js и Webpack. Ако предпочитате готови решения от по-високо ниво, трябва да опитате Nuxt.js

. Той е изграден върху същия стек Vue, но облекчава писането на шаблонен код и също така предоставя някои допълнителни функции, като генериране на статичен сайт. Въпреки това, може да не е подходящо, ако имате нужда от пълен контрол върху структурата на приложението. Във всеки случай ще ви бъде полезно да прочетете това ръководство, за да разберете по-добре как всички компоненти работят заедно.

Докато четете ръководството, ще бъде полезно да се обърнете към официалната демонстрация на HackerNews.

, който използва повечето от техниките в това ръководство.

И накрая, имайте предвид, че решенията в това ръководство не са окончателни - ние решихме, че работят добре за нас, но това не означава, че не могат да бъдат подобрени. Те може да бъдат преработени в бъдеще - така че не се колебайте да допринесете, като изпратите заявки за изтегляне!