Большая часть ажиотажа была создана вокруг рендеринга на стороне сервера в веб-разработке, но какого черта такое SSR? и есть ли что-нибудь еще относительно SSR, на все вопросы будет дан ответ, так что оставайтесь на связи! 😃

Вы увидите два типа веб-сайтов

  • Отрисовка на стороне сервера
  • Визуализация на стороне клиента

CSR

Прежде всего, мы поговорим о рендеринге на стороне клиента, то есть CSR, как предлагается в названии. Рендеринг HTML, Javascript, CSS будет выполняться только от клиента, и вы также слышали о термине одностраничное приложение, которое относится к той же категории!

Но тогда то, как одностраничное приложение работает внутри, означает, как поток

  • Браузер в первую очередь будет обслуживать файл HTML, то есть файл .html.
  • Затем браузер проанализирует html-файл и загрузит css, шрифты, изображения.
  • затем загружается JS, затем он вызывает все API и создает модель DOM

Да, теперь мы понимаем поток CSR, но как веб-приложение меняет маршрут, поскольку это одностраничное приложение, оно меняет маршрут через API истории, а страница не перезагружается (Ну, вы уже поняли, как работает знаменитое приложение create-response-app), поскольку есть несколько способов повысить эффективность CSR, вы можете выполнить разделение кода или передать его через CDN 😜

ССР

SSR a.k.a. (рендеринг на стороне сервера). Приложения, отображаемые на сервере, а не на клиенте.

Теперь давайте посмотрим, как обрабатывается SSR.

  • Для каждого запроса, который клиент бросает на сервер, приложения SSR каждый раз обслуживают HTML
  • Затем браузер загружает css-анализатор.
  • После этого он загружает отложенный JS из документа, если он есть, и анализирует его.
    но то, что является отложенным js
    в html, мы загружаем js через тег ‹script› да, я знать, что в нем нового, использование тега ‹script› блокирует рендеринг страницы (поскольку мы обычно помещаем css в заголовок, а скрипт в конец html), но этот процесс можно обновить, как когда html анализирует одновременно с загрузкой js параллельно (это так круто, что я могу оптимизировать свой сайт), но подождите, как я смогу этого добиться.
    используя ‹script defer› в теге script, поскольку он загружает js при разборе html и не блокирует рендеринг 😉 (Обратите внимание, что тег отложенного обновления доступен только в современном браузере)

Вот как работают приложения SSR каждый раз, когда он отображает новый html, все элементы кеширования будут кешироваться браузером (чтобы быстрее загружаться после повторного посещения веб-сайта)

В заключение, если ваши веб-приложения обслуживаются с сервера или у вас есть лучший SEO, быстрый рендеринг, разделение кода, тогда вы должны предпочесть SSR, иначе используйте CSR.

А пока вы можете посмотреть эту статью

Если вам нравится учебник 👏 и подпишитесь на меня, так как скоро появится больше практического опыта 😮 😉