Как вы реализуете рендеринг на стороне сервера или SSR? в REACT кратко

Привет, Вы узнаете о том , что такое серверный рендеринг, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое серверный рендеринг, ssr , server-side rendering, csr, client-side rendering, рендеринг на клиенте, регидратация, пререндеринг , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).

React уже оборудован для обработки рендеринга на серверах Node. Доступна специальная версия рендерера DOM, которая следует той же схеме, что и на стороне клиента.

import ReactDOMServer from 'react-dom/server'
import App from './App'

ReactDOMServer.renderToString()

Этот метод выводит обычный HTML в виде строки, которая затем может быть помещена в тело страницы как часть ответа сервера. На стороне клиента React обнаруживает предварительно отрендеренный контент и легко выбирает, где он остановился.

• SSR ( server-side rendering , серверный рендеринг ) — рендеринг на сервере клиентской части или универсального приложения в HTML;
• CSR ( client-side rendering , рендеринг на клиенте ) — рендеринг приложения на стороне клиента (в браузере), обычно с помощью DOM;
• регидратация — «загрузка» JavaScript компонентов на клиенте таким образом, чтобы они повторно использовали DOM-дерево и данные HTML, сформированные на стороне сервера;
• пререндеринг — запуск клиентского приложения во время сборки для сохранения его начального состояния в виде статического HTML.

Преимущества рендеринга на стороне сервера

1. Ускоренная загрузка
   Приложения с рендерингом на стороне сервера, загружаются быстрее, чем похожие приложения, которые рендерятся на клиенте. Об этом говорит сайт https://intellect.icu . А поскольку сервер выполняет наиболее затратную часть работы, они также быстро загружаются на менее производительных устройствах.
2. Намного лучшее SEO.
   Преимущества рендеринга на стороне сервера для SEO . Google награждает сайты, которые загружаются быстрее, более высоким рейтингом страниц. У Google и других поисковых роботов не возникнет проблем с индексированием ваших веб-сайтов, отображаемых на стороне сервера.

Недостатки рендеринга на стороне сервера

1. Дорого хостить
   По сравнению с приложениями, которые рендерятся на стороне клиента, хостинг приложений с серверным рендерингом стоит дороже. В результате каждого запроса к вашему серверу он должен будет выполнять вызовы API, а затем рендерить HTML перед его передачей на сторону клиента.
2. Более сложная разработка
   Самостоятельная настройка рендеринга на стороне сервера с использованием React может оказаться непростой задачей. Однако это становится намного проще, если использовать один из предназначенных для этого фреймворков, например NextJS.

Исследование, описанное в статье про серверный рендеринг, подчеркивает ее значимость в современном мире. Надеюсь, что теперь ты понял что такое серверный рендеринг, ssr , server-side rendering, csr, client-side rendering, рендеринг на клиенте, регидратация, пререндеринг и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)