读书不是为了雄辩和驳斥，
也不是为了轻信和盲从，
而是为了思考和权衡。

        —— 培根

Два метода рендеринга

  Почему существует внутренний рендеринг (серверный рендеринг SSR) и внешний рендеринг (клиентский рендеринг CSR)

Сначала поймите, что передается между сервером и клиентом браузера: Файлы HTML, CSS, JavaScript и файлы JSON (xml) носителя данных.

В начале веб-приложение состояло непосредственно из нескольких HTML, CSS и JS, и каждая страница требовала особой логики, поэтому по мере увеличения масштаба приложения в каталоге внутреннего веб-сайта становилось все больше и больше файлов кода. не синхронизируется. Например, если вы меняете стиль оформления сайта, то вам может понадобиться изменить сотни или тысячи HTML-файлов, что слишком трудозатратно. Поскольку так много HTML имеет определенные логические связи, почему бы не использовать код для генерации кода? Так родился внутренний язык шаблонов, и люди начали широко использовать язык шаблонов вместо рукописного HTML.

   Языки шаблонов, с которыми я столкнулся до сих пор, включают pug (jade) и шаблон go   

• Пример шаблона мопса выглядит следующим образом:

  

• Пример шаблона go template выглядит следующим образом:

  

   HTML рендерится через back-end, а front-end не нужно настраивать шаги маршрутизации, а нужно только занимать место, где нужно заполнить контент. Вам нужно быть знакомым с полями, и вам нужно вместе отлаживать переднюю и заднюю части.   

бэкэнд-рендеринг

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

Так называемый рендеринг, вы можете понять модификацию, слово рендеринг произошло из области игр, а область игр возникла из реалистичной живописи, рендеринга, просто держите краску на бумаге. Большинство серверов раньше были в этом режиме

внешний рендеринг

По мере увеличения сложности интерфейсных страниц внешний интерфейс представляет собой не просто обычное отображение страницы, но могут быть добавлены дополнительные функциональные компоненты, и сложность возрастает.Кроме того, рост ajax в то время заставил отрасль начать соблюдать переднюю и заднюю части. Режим разработки с разделением концов, то есть задняя часть не предоставляет полную HTML-страницу, но предоставляет некоторые API, чтобы передняя часть могла получать данные JSON, а затем передняя часть получала данные JSON. , а затем объединяет HTML-страницу на внешнем интерфейсе, а затем отображает ее в браузере. Это называется внешним рендерингом.

   Таким образом, интерфейс может сосредоточиться на разработке пользовательского интерфейса, а сервер — на разработке логики. Представитель представляет собой популярное одностраничное приложение SPA, такое как Vue и React framework, только серверная часть должна предоставить нам API интерфейса, интерфейсный интерфейс, взаимодействие и т. д. выполняются во внешнем интерфейсе, а интерфейсу и серверу нужно только согласовать интерфейс.

Самая важная разница между бэкенд-рендерингом и фронтенд-рендерингом заключается в разнице в заполнении данных, то есть в том, кто будет выполнять полную склейку файлов HTML. больше работы для завершения сплайсинга HTML, берет данные из фона через ajax или выборку, а затем заполняет или выполняет другие операции с данными, это внешний рендеринг

   Ниже приведены метафоры, которые пользователи сети нашли в Интернете для сравнения рендеринга передней и задней частей:

Проще говоря:
Внутренний рендеринг html называется spit or spray, и робот может видеть полный исходный код рендеринга.
Отрисовка HTML-кода внешнего интерфейса называется заполнением, и робот не может видеть полный исходный код рендеринга.

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

Маршруты внешнего рендеринга и внутреннего рендеринга

Маршрут рендеринга переднего плана

    1. 请求一个HTML
    2. 服务端返回一个HTML
    3. 浏览器下载html里面的JS/CSS文件 
    4. 等待JS文件下载完成 
    5. 等待JS加载并初始化完成 
    6. JS代码终于可以运行，由JS代码向后端请求数据(ajax/fetch) 
    7. 等待后端数据返回 
    8. 客户端从无到完整地，把数据渲染为响应页面

Маршрут рендеринга серверной части

    1. 请求一个HTML
    2. 服务端请求数据(内网请求快)
    3. 服务器初始渲染(服务端性能，较快）
    4. 服务端返回已经有正确内容的HTML
    5. 客户端请求JS/CSS文件
    6. 等待JS文件下载完成
    7. 等待JS加载并初始化完成
    8. 客户端把剩下一部分渲染完成(内容小，渲染快)

Изменения от внутреннего рендеринга к внешнему рендерингу

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

• Отказаться от разрешений переднего плана
     После того, как вся логика пользовательского интерфейса будет передана клиенту, некоторые опытные и способные пользователи могут захватить пользовательский интерфейс, чтобы они могли видеть некоторые интерфейсы, которые они не должны видеть. Кажется, это нарушает принцип безопасности. Но «всё, что касается безопасности на фронтенде — хулиганство», бэкенд не может доверять всем данным с фронтенда, и не забывайте хорошо фильтровать и проверять. Пока используется SSL, XSS заблокирован, а в серверной части нет лазеек, по-прежнему сложно подделать личность для захвата приложения.

Сравнение преимуществ и недостатков внутреннего рендеринга и внешнего рендеринга

Плюсы и минусы бэкенд-рендеринга

• преимущество:

  • Фронтенд занимает меньше времени, потому что бэкэнд сшивает HTML, вам не нужно загружать кучу JS и CSS, прежде чем вы сможете увидеть страницу, браузеру нужно только отобразить ее напрямую.
  • Поисковая оптимизация, поскольку в бэкенде есть полная HTML-страница, поисковым роботам легче сканировать для получения информации, что более благоприятно для SEO.
  • Никаких ресурсов на стороне клиента не требуется. То есть работа по парсингу шаблона полностью выполняется бэкендом, а клиенту нужно только парсить стандартную HTML-страницу, что занимает меньше ресурсов у клиента, особенно мобильного терминала, и экономит больше энергии.
  • Бэкэнд генерирует статические файлы. То есть создается фрагмент кеша, который может сократить время, затрачиваемое на запрос к базе данных, и очень эффективен для страниц с небольшим изменением данных.

• недостаток:

  • Это не способствует разделению передней и задней частей, а эффективность разработки низкая. При использовании рендеринга на стороне сервера невозможно разделить работу и сотрудничать, а для проектов с высокой сложностью интерфейса это не способствует эффективной разработке проекта.
  • Рендеринг на стороне сервера, внешний интерфейс обычно записывает статический HTML-файл, а затем внутренний модифицируется в шаблон, что очень неэффективно и часто требует, чтобы внешний и внутренний интерфейс выполняли действие модификации вместе.
  • Если бэкенд меняет шаблон, то фронтенду также необходимо подгонять CSS под измененный шаблон, что увеличивает время совместной отладки фронтенда и бэкенда.
  • Занимает ресурсы на стороне сервера, то есть на стороне сервера завершается парсинг HTML-шаблонов, если запросов много, это вызовет определенное давление доступа к серверу. И если вы используете фронтальный рендеринг, нагрузка от этого парсинга разделяется с фронтендом, и здесь он действительно полностью передается серверу.

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

• преимущество:

  • Фронтенд и бэкенд разделены, фронтенд фокусируется на пользовательском интерфейсе фронтенда, бэкэнд фокусируется на разработке API, а фронтенд имеет больше возможностей без следования шаблонам, специфичным для бэкенда.
  • Опыт лучше, например, мы превращаем веб-сайт в одностраничное веб-приложение (одностраничное веб-приложение, SPA — это веб-приложение, которое загружает одну HTML-страницу и динамически обновляет страницу, когда пользователь взаимодействует с приложением) или часть контента сделана SPA, таким образом, особенно на мобильных устройствах, можно приблизить опыт к нативному приложению.
  • Частичное обновление, нет необходимости каждый раз запрашивать полную страницу
  • Ленивая загрузка, например загрузка только данных в видимой области в начале страницы и загрузка других данных после прокрутки, может быть достигнута с помощью react-lazyload.
  • Богатое взаимодействие с использованием JS для достижения различных крутых эффектов
  • Экономьте затраты на сервер, экономьте энергию и деньги, JS поддерживает развертывание CDN, а развертывание чрезвычайно просто, только сервер должен поддерживать статические файлы.

• недостаток:

  • Отклик внешнего интерфейса медленный. Если это рендеринг на стороне клиента, интерфейсному интерфейсу также необходимо выполнить процесс объединения строк, что занимает дополнительное время. Это не так быстро, как рендеринг на стороне сервера.
  • Это не способствует SEO.В настоящее время поисковые роботы, такие как Baidu и Google, не распознают SPA, а только записывают страницу, поэтому SEO очень плохое.

сцены, которые будут использоваться

Деловая сцена говорить о слепо выберите, какой режим рендеринга использовать издевательства. Такие, как веб-сайт на уровне предприятия, основная функция - продемонстрировать без сложных взаимодействий и необходимость в хорошем SEO, то нам нужно использовать задневскую рендуринг; и подобную страницу администратора, интерактивные сильные, не нужно учитывать SEO Затем вы можете использовать передний рендеринг.

Кроме того, конкретный используемый метод рендеринга не является абсолютным.Например, некоторые веб-сайты теперь используют внутреннюю визуализацию первого экрана, то есть внутреннюю визуализацию используется для страницы, которую пользователь открывает в первую очередь, что обеспечивает скорость рендеринга, в то время как другой рендеринг интерфейса используется для завершения разделения интерфейса и сервера.  

• Внутренний рендеринг: относительно модульный, очень подходит для страниц, ориентированных на отображение, что способствует SEO. И поскольку он уже отображается в бэкэнде, процесс загрузки относительно хороший, и это очевидно, когда скорость сети низкая.
• Внешний рендеринг: более гибкий, подходит для бизнес-сценариев с частыми операциями dom или сложными взаимодействиями. Модель может поддерживаться в хорошем состоянии без повторных запросов. Теоретически это больше соответствует разделению передней и задней частей.

Почему внешний рендеринг вреден для SEO

   Если front-end и back-end разделены, то front-end — модифицировать DOM через JS, чтобы сделать сплайсинг HTML полным, а затем отобразить его, или использовать SPA, так что почти никакого SEO. Так как же сделать SEO-оптимизацию в этом случае?

SEO (Search Engine Optimization), китайский общий перевод: поисковая оптимизация. SEO — это метод настройки веб-сайта путем понимания правил работы поисковых систем (как сканировать страницы веб-сайта, как индексировать и сортировать результаты поиска по определенным ключевым словам и т. д.), ранжирование результатов поиска.

  前面我们谈到的SPA不利于SEO，因为就目前而言，部分搜索引擎如Google、bing等，它们的爬虫虽然已经支持执行JS甚至是通过AJAX获取数据了，但是对于异步数据的支持也还不足。   
  
Поскольку в случае с одной страницей большая часть содержимого страницы генерируется динамически и отображается в соответствии с соответствующим маршрутом, а содержимое многих страниц получается асинхронно через ajax, веб-сканер не будет ждать завершения асинхронного запроса, прежде чем Парсерам очень сложно точно имитировать соответствующее поведение для получения составных данных, и они лучше сканируют и анализируют статические ресурсы.

Маршрутизация, реализованная vue и react, не является новой страницей, но содержимое страницы динамически переключается, страница не перезагружается, и поисковый робот не выполняет процесс извлечения данных.

• Страница, видимая сканером бэкэнд-рендеринга, выглядит следующим образом:

Вы можете видеть, что это полный файл HTML

• Страница, видимая сканером внешнего интерфейса, выглядит следующим образом:

Вы можете видеть, что других ключевых данных, кроме заголовка, нет.

Использованная литература:

1. Углубленный анализ front-end и post-separation — разница между рендерингом в браузере и рендерингом на сервере
2. Реализовать приложение SSR на основе Nuxt.js
3. Рендеринг на стороне сервера против рендеринга на стороне клиента