– Зачем нужен серверный рендеринг фронтэнд приложению или сайту? – Какие инструменты стоит применять под задачи проекта? – Интересные задачи по серверному рендерингу: загрузка данных, разделение сред выполнения кода, и другие. – На что обращаем внимание при деплое, что замеряем, как анализируем метрики?

1. Специфика рендеринга
VUE.JS-приложений
на сервере
1
Алексей Клюев,
тимлид фронтэнда в Delivery Club, Mail.ru Group

2. Что у нас есть?
● Vue.js-приложение с vue-роутером и vuex-стором
● Взаимодействие с api и пользователем
● Много логики на клиенте
● Долгий жизненный цикл
2

3. Чего мы хотим?
● Оставить все как есть
● Добавить наполненный данными документ
● Выполнять приложение
в среде nodejs
● Добавить новый слой
не меняя архитектуры
с минимальными изменениями в коде
3

4. СПА и минималистичный документ
4

5. СПА и минималистичный документ
5

6. Поисковая оптимизация
Задачи:
+ Привлечение посетителей
- Лояльность посетителей
- Возвращение посетителей
6

7. Что выбрать?
● Свое решение для серверного рендеринга
● Фреймворк для серверного рендеринга поверх vue.js
7

8. О чем будем говорить
● Свое решение для серверного рендеринга
● Фреймворк для серверного рендеринга поверх vue.js
8

9. Инструменты для своего решения
9
vue-server-renderer

10. vue-server-renderer
10
vue-server-renderer
● ssr.vuejs.org
● github.com/vuejs/vue-hackernews-2.0

11. Какие задачи мы будем решать
● Усложнение структуры приложения
● Необходимость добавить nodejs-сервер
● Необходимость убедиться в том что код нашего
приложения универсален
● Увеличение размера первоначального документа
11

12. Новая структура приложения
12

13. Две входные точки vue
13

14. Клиентская входная точка
14

15. Серверная входная точка
15

16. Две конфигурации webpack
16

17. Серверная конфигурация
17

18. Клиентская конфигурация
18

19. Nodejs-сервер
19

20. Nodejs-сервер
20

21. Nodejs-сервер и контекст
21

22. Шаблон
22

23. Рендер
23

24. Восстановление стейта
24

25. Момент отдачи
25

26. Момент отдачи
26

27. Универсальный код
● Код основных пакетов
(vue, vue-router, vuex)
● Код дополнительных пакетов
(axios и т.п.)
● Пользовательский код
(наши компоненты и сервисы)
27

28. Не универсальный код
● Скроллинг, позиционирование (браузер)
● Ref-ы на HTMLElement-ы (браузер)
● Заголовки, cookie (nodejs)
28

29. Не универсальный код
● Входные точки инициализации vue
● Конфигурации webpack
29

30. Не универсальный код
30

31. Процесс разработки
31

32. Процесс разработки
32

33. Изменения в процессе работы приложения
33

34. Метрики
34

35. ● DomContentLoaded
● load
● First contentful paint
● First meaningful paint
● Largest contentful paint
● Time to interactive
35
Метрики

36. Результаты измерений
36

37. Метрики пользовательского уровня
● Происходит ли загрузка, работает ли сайт?
● Вижу ли я то, что хочу?
● Могу ли я совершить действия, которые хочу?
● Доволен ли я тем что происходит?
37

38. Два вида лоадеров
38

39. Визуальный шум
39

40. Оптимизация загрузки
40

41. Выводы
● Seo
● Пользовательский опыт
● Контроль
● Реалистичные метрики
● Удобство разработчика
41

42. 42
Спасибо за внимание!