В этой статье я попытаюсь более подробно рассмотреть вопрос социальной ответственности (SSR) и социальной ответственности (CSR) КСО , который я уже обсуждал ранее . Я объясню методы рендеринга в статье.

В этой статье я рассмотрю статью Джейсона Миллера и Эдди Османи «Рендеринг в Интернете» и попытаюсь объяснить эту тему.

Статья основана на моей статье «Где следует выполнять рендеринг HTML?» которую я написал некоторое время назад. Все начинается с вопроса в сообщении в блоге.

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

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

A.Рендеринг

Если вам интересно, что такое тема рендеринга. Подробности вы можете прочитать в сообщении в блоге , где я объяснил эту тему
.

B. Статический и динамический веб

Еще одна вещь, которую следует понять, — это разница между статическим и динамическим вебом . Статические веб-страницы — это страницы , которые не обращаются к серверу и выполняют запросы с помощью AJAX после получения страницы с сервера (HTML, CSS, JS), их содержимое не меняется в зависимости от пользователя или не содержит динамических данных (курс валют, погода и т. д.) из-за изменения данных на нем. Например, блоги, новости и т. д. Напротив, динамические страницы — это веб-страницы, требующие AJAX, API, базы данных и т. д., где содержимое страницы изменяется в соответствии с заданным временным интервалом и параметрами.

C. Условия исполнения

• TTFB (время до первого байта) Время между нажатием на ссылку и получением первого бита контента.
• FP (первая отрисовка) Время, необходимое для показа первого пикселя пользователю.
• FCP (первая отрисовка содержимого) Время отображения первого логического содержимого в запросе.
• TTI Time To Interactive Время, когда страница готова к взаимодействию с пользователем (связь всех событий)

• SSR (серверный рендеринг): это метод, при котором процесс рендеринга выполняется на стороне сервера, а динамические страницы создаются путем их извлечения из базы данных с использованием таких методов, как ASP.Net, JSP, PHP. Здесь, поскольку JS будет играть гораздо меньшую роль в создании экрана, FP и FCP будут очень быстрыми, в то время как время, необходимое для получения данных с сервера, будет больше в TTFB .
• CSR (визуализация на стороне клиента): это метод, при котором визуализация выполняется на стороне браузера с использованием таких методов, как Angular, React, Vue, Svelte, динамические страницы извлекаются с помощью AJAX, а экраны создаются на экране путем объединения шаблона и данных с помощью метода визуализации шаблона. В этом методе, даже если мы выполним TTFB и FP быстрее, мы не сможем ускорить TTI, то есть время, необходимое пользователю для взаимодействия с соответствующей веб-страницей.
• Статический рендеринг: При использовании этого метода для статических страниц, поскольку страницы изменяются очень мало и нет необходимости в базе данных, страницы приводятся в конечное состояние с помощью метода предварительного рендеринга перед отправкой на сервер и отправляются в CDN или среды пограничного кэширования, откуда они очень быстро обслуживаются. В последнее время создавать такие страницы стало намного проще с помощью инструментов Gatsby и Jekyll. На этих страницах значения TTFB и TTI довольно короткие. Потребности в выполнении JS или взаимодействии с такими страницами очень низки и ограничены.
• Гибридный рендеринг: Хотя для некоторых страниц имеет смысл создавать SSR в соответствии с их контентной нагрузкой, некоторые страницы с высокой нагрузкой имеет смысл создавать с ленивым CSR. Появились такие фреймворки, как Next, Nuxt, Nest, Sapper, которые поддерживают такие ситуации. Этот фреймворк обладает схожими возможностями, при этом применяя метод разработки компонентов Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte при разработке кода.

Ссылки

• Рендеринг в Интернете
• Разница между статическими и динамическими веб-страницами
• Где следует выполнять HTML-рендеринг?

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