Сегодня поговорим про SSR — что это, зачем использовать, как с этим работать, чтобы все получалось.
Что такое SSR?
SSR — это Server Side Rendering, то есть, генерация страницы на стороне сервере, а не в браузере, когда сервер отдает уже сгенерированный HTML.
Любая страница сайта или простейшая веб-версия приложения — это HTML-код, который отображается в браузере в виде набора визуальных элементов — текстовых блоков, изображений, ссылок и кнопок. Рендеринг — сборка html кода для браузера пользователя, из блоков кода исходного vue-файла. Это происходит тогда, когда мы заходим на сайт — то есть, отправляем запрос на сервер, а с него получаем js-код vue приложения, html c пустыми местами, в которые будет рендериться контент уже на стороне пользователя. И, конечно, мы хотели бы, чтобы это происходило моментально.
Отобразить сайт в браузере с уже сгенерированным HTML занимает меньше времени, чем когда код генерируется в браузере, затрачивая при этом дополнительные ресурсы пользователя. Особенно это заметно на медленном интернете или на устройствах, в которых забита память.
Для этого и существует SSR. При этом методе весь HTML-код страницы генерируется на сервере и передается пользователю в браузер.
Какие боли решает метод SSR?
Во-первых, производительность этого метода сильно выше — мощности сервера сильно превосходят мощности принимающей стороны, а, значит не нужно будет рендерить страницу на стороне клиента перед отображением.
Во-вторых, у такого контента более качественная SEO-оптимизация. Страница, сгенерированная на сервере, уже содержит весь текст, и поисковые машины сразу могут корректно индексировать его и поднять в топ релевантной выдачи. Если сайт генерируется на стороне пользователя, то поисковый робот не увидит этот контент.