🖥Отличия рендеринга: CSR, SSR и SSG🖼 В веб-разработке существуют различные подходы к рендерингу страниц, каждый из которых имеет свои особенности и случаи применения. Рассмотрим  три основных подхода - CSR (Client-Side Rendering), SSR (Server-Side Rendering) и SSG (Static Site Generation).

👉CSR — Client-Side Rendering (Клиентский рендеринг) Описание: В CSR рендеринг страницы происходит на стороне клиента (в браузере пользователя) с использованием JavaScript. При загрузке страницы браузер получает минимальный HTML и JS-файл, который затем динамически загружает данные и отрисовывает контент. Как это работает: Сервер отправляет пустую HTML-оболочку и JavaScript-файлы. JavaScript выполняется в браузере, запрашивает данные с сервера (например, через API) и отрисовывает страницу. Преимущества: 👍Быстрая начальная загрузка небольших HTML-файлов. 👍Хорошо подходит для одностраничных приложений (SPA) с динамическим контентом. 👍Легкость в реализации обновления контента без перезагрузки страницы. 👍Не сильно требователен к мощностям сервера. Недостатки: 👎Медленная первая отрисовка (FCP — First Contentful Paint) из-за необходимости загрузки и выполнения JS. Пока код выполнится в браузере, пока построит полностью всё DOM и CSSOM дерево, соединит их и наполнит данными со сторонних ресурсов - пройдет намного больше времени, чем мы получим готовые html/css/js файлы и браузер просто их отобразит. 👎Плохая индексация контента поисковыми системами (SEO) для динамически загружаемых страниц. Роботы поисковых систем не видят на вашем сайте вёрстку и очень плохо ранжируют их. 👎 Зависимость от производительности устройства пользователя и непрогнозируемое (непредсказуемое) поведение при рендеринге на различных устройствах и браузерах. 👎 Худший показатель Time to interactive - время до первой интерактивности, до того, как у вас заработают как надо все кнопки, ссылки, анимации и многое другое. Примеры: React, Vue.js и Angular-приложения с чистым клиентским рендерингом. Применение: Данный подход лучше всего применять для внутренних сайтов, небольших лендингов, где есть сложные анимации, связанные с динамической работой с данными, внутренних crm систем. Грубо говоря там, где нужна максимальная кастомизация, но при этом абсолютно не нужно ранжирование в поисковых системах. Данный подход очень прост в разработке, не требует больших ресурсов и сверхопытных разработчиков. Данный подход идеален для создания браузерных игр. Про остальные подходы вы сможете прочитать в моем телеграм канале:https://t.me/proitdigital

#csr #войтивайти #it #новостиit #новыйпост #новыйконтент #рендеринг #выбортехнологий #работавit #работавайти #вакансиивайти #стартвit #стартвайти #развитие #обучение
repost

27

input message

напишите коммент

еще контент в этом сообществе

еще контент в этом соообществе

войдите, чтобы увидеть

и подписаться на интересных профи

в приложении больше возможностей

пока в веб-версии есть не всё — мы вовсю работаем над ней

сетка — cоциальная сеть для нетворкинга от hh.ru

пересекайтесь с теми, кто повлияет на ваш профессиональный путь