Что такое SSR и зачем это необходимо JavaScript сайтам

Что такое SSR

SSR – (анг. аббревиатура от Server Side Rendering) это технология, которая позволяет, с помощью Node.js, запускать JavaScript код на сервере (а не в браузере как обычно) и готовый результат отправлять пользователю, избегая лишней нагрузки на его браузер и компьютер.

Зачем нужен SSR

В первую очередь, для оптимизации скорости работы сайта и SEO продвижения.

Оптимизация

Когда пользователь заходит на сайт, сделанный с помощью JavaScript, то все расчеты и отрисовка графических элементов возлагается на его браузер. С одной стороны, это помогает снижать нагрузку на сервер, тем самым позволяя владельцу сайта немного сэкономить. С другой стороны, если элементов, создаваемых с помощью JavaScript, много, то компьютер пользователя будет сильно нагружен.

И это логично, ведь браузер кушает и так очень много оперативной памяти. А если мы перекладываем все серверные вычисления на браузер пользователя, то нагрузка на его систему возрастает.

SSR помогает снизить нагрузку на браузер пользователя, это особенно важно, если пользователь использует телефон или слабый компьютер. Крупные проекты, например как OZON, используют такие технологии, дабы упростить жизнь пользователю и повысить прибыльность проекта. Ведь медленный сайт – это убыточный и бесполезный сайт.

SEO

Когда поисковая система заходит на сайт, сделанный с помощью Ajax-технологий или какого-нибудь современного фреймворка, похожего на React или Vue.js, то видит пустой HTML документ без какого-либо контента. Если Вы попытаетесь посмотреть исходный код сайта через браузер или с помощью сервиса Яндекса, то увидите что-то подобное:

Именно так выглядит сайт на JavaScript без серверного рендеринга. Какую страницу не откройте, везде будет одинаковое содержимое. А дело в том, что весь JavaScript запускается в наших браузерах, и, только после его инициализации, мы видим какой-то контент.

Поисковый робот хоть и умеет запускать JavaScript, но делает это с большой неохотой. Дело в том, что на это требуются очень большие мощности, и поэтому поисковая система запускает JavaScript крайне редко.

Если на сайте есть SSR, то страница будет выглядеть как обычный веб-документ со всеми нужными текстами и метаданными, вот пример:

Кстати, это точно та же страница, как на предыдущем скриншоте. Просто здесь SSR уже включен. Поисковая система все корректно индексирует.

Сложно ли интегрировать SSR в существующий проект

Да, это чревато разработкой нового сайта, а конкретно “движка”. Дизайн проекта не будет затронут, но внутри все “механизмы” обретут новую логику.

Есть готовые решения, которые помогают разработчику быстро внедрить SSR в проект, например: Nuxt.js, Quasar – для Vue.js; Next.js и Gatsby – для React. Но, без знаний JavaScript и без понимания принципов работы Node.js, самому интегрировать данное решение невозможно. Можно обойтись и без готовых SSR фреймворков, но… это уже совсем сумасшествие. Если не верите, то почитайте статью нашего технического директора, он добавил SSR в Laravel 9 и Vue 3 без использования фреймворков. С его слов, это было сложнее чем использовать готовый SSR фреймворк.

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