В CSR сервер отображает пустую страницу вместе со ссылкой на пакет javascript, который передается клиенту, а клиент отображает пустую страницу. Клиент начинает интерпретировать этот пакет javascript, который, вероятно, является реагирующим приложением. Затем react создает элемент DOM, который рисует пользовательский интерфейс в браузере.

  • Быстрая визуализация — страница отображается быстро после первоначальной загрузки страницы.
  • Предлагает более быструю навигацию по веб-сайту – это возможно, поскольку заполнители загружаются первыми.
  • Снижает нагрузку на сервер — Javascript выполняется в браузере клиента, что снижает нагрузку на сервер.
  • Отлично работает с PWA (Progressive Web Apps). Опять же, это связано с тем, что код может полностью отображаться в браузере.
  • Интерактивна — отображаемая страница является интерактивной.

Используя диаграмму последовательности, давайте разберемся в КСО с помощью упомянутого выше информационного приложения для студентов.

Рендеринг на стороне сервера:

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

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

  • Более быстрое время загрузки. Приложение, отображаемое на стороне сервера, ускоряет загрузку страниц, когда пользователь страдает от медленного интернет-соединения. …
  • Легкая индексация поисковыми системами. …
  • Меньше проблем с индексацией в социальных сетях. …
  • Лучше с точки зрения доступности.

Используя диаграмму последовательности, давайте разберемся с SSR с помощью информационного приложения для студентов, упомянутого выше информационного приложения.

Генерация статического сайта:

SSG выполняет предварительный рендеринг вашего приложения React в HTML во время сборки.

Плюсы SSG:

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

Используя диаграмму последовательности, давайте разберемся в SSG с помощью упомянутого выше информационного приложения для студентов.

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