Рендеринг на стороне сервера против рендеринга на стороне клиента

внешний интерфейс JavaScript Vue.js

концепция

  • Рендеринг на стороне сервера (плевать)

    Прежде чем вернуть html, сервер заполняет определенную область и символ данными, а затем отправляет их клиенту, который отвечает только за разбор HTML.

    рендеринг на стороне сервера

    Также известен как толстый сервер, режим тонкого клиента.

    рендеринг на стороне сервера

  • Рендеринг клиента (заполнить)

    HTML используется только как статический файл, когда клиент запрашивает, сервер не выполняет никакой обработки, а возвращает его непосредственно клиенту в виде исходного файла, а затем генерирует DOM и вставляет HTML в соответствии с JavaScript на HTML.

    рендеринг на стороне клиента

    Также известен как режим толстого клиента, тонкого сервера.

    рендеринг на стороне клиента

Сходства и различия

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

  • Объединение строк неизбежно приведет к потреблению производительности.

    Производительность рендеринга на стороне сервера при потреблении услуг, количество пользователей, когда относительно долгое время, часть кэша данных, чтобы избежать чрезмерного повторения данных рендеринга. Рендеринг клиента, как текущий горячий спа-центр, Angular, React, Vue, при первом рендеринге, в основном в замене исходных данных тега html (например, {{text}}). Точка данных клиента становится более сложной после обновления, отклик страницы при обновлении, как экономить ресурсы, прямое чтение и запись DOM, это производительность потребления. Vue 2.0 + имеет Vnode после diff для отображения страницы.

плюсы и минусы

изоморфизм

Для решения проблемы медленной отрисовки первого экрана на стороне клиента и проблем с SEO стал появляться изоморфизм.

Изоморфность: внешний и внутренний интерфейсы совместно используют JS, а Node.js используется для прямого вывода HTML при первом рендеринге. Вообще говоря, изоморфный рендеринг — это общая часть между передней и задней частью.

изоморфизм

Есть много преимуществ изоморфизма, балабалабала...

Коротко о некоторых подводных камнях использования Vue SSR (nuxt):

  • Сервер должен быть node.js или запускать node.js специально для его поддержки;

  • Не удается найти объект документа, так как окно, используемое внешним интерфейсом, не существует в среде узла;

  • При предварительной выборке данных компонент не был инстанцирован (это нельзя использовать), поэтому вызов метода в созданном лайфхуке не сработает, а операции запроса и форматирования данных следует размещать в специальном контейнере хранения предвыборки данных ( хранилище данных) или «контейнер состояния (контейнер состояния)»;

  • Шаблоны на основе строк определенно работают лучше, чем шаблоны на основе виртуального дома. Шаблон на основе строки должен только заполнить данные, а шаблон на основе виртуального дома должен пройти через процесс синтаксиса шаблона Vue ---> Vnode ---> объединение строки html. Для сравнения потребления производительности вы можете обратиться к этой статьеmp.weixin.qq...;

  • С точки зрения кэширования возможно только кэширование на уровне страницы. Если для разных пользователей необходимо отобразить разный контент, кеширование недоступно.

Существуют ли другие способы устранения недостатков рендеринга на стороне клиента?

Ответ определенно да:

  • При решении вопросов SEO используйтеprerender..., обновить поисковую систему и многое другое.

  • Белый экран может добавить загрузку, эффект Skeleton Screen и другие.

Суммировать

Пользовательский опыт — это главное.

Категории