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