Серверный рендеринг (SSR). NextJs

Термины:

• CSR(Client Side Rendering) - это рендеринг приложения в браузере с помощью DOM;
• SSR(Server Side Rendering) - это технология, которая позволяет, с помощью Node.js, запускать JavaScript на сервере во время запроса. Готовый HTML со всеми нужными текстами и метаданными отправляется пользователю или поисковым роботам;
• SSG(Static Site Generator) - это cтатическая генерация всех HTML страниц приложения в момент сборки. Когда браузер делает запрос, то сервер не генерирует разметку, как в случае SSR, а отдает уже готовую;
• SEO(Search Engine Optimization) — это оптимизация для поисковых систем.

Зачем нужен SSR и SSG

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

Скорость

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

SEO

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

Увеличение трафика

Если пользователи соцсетей репостят ссылку на Ваш сайт с серверным рендерингом, автоматически генерируется фрагмент страницы с заголовком и изображением. Это не только красиво, такие фрагменты помогут привлечь внимание и увеличить трафик на сайт.

NextJs

Использование фреймворка, такого как Next.js, позволяет мне использовать различные методы предварительного рендеринга в разработке. Я могу использовать генерацию статического сайта(SSG) для чего-то более простого и не динамического или применять рендеринг на стороне сервера(SSR) для динамического контента и более сложных страниц.

С помощью этих инструментов создание многофункциональных веб-приложений стало проще и быстрее!