Новости и обновления в Telegram
rutube
Полезные видео о фронтенде. Подпишись на Rutube

CSI, SSI, ESI в композиции микрофронтендов

год назад·1 мин. на чтение

Что такое Client Side Include, Server Side Include и Edge Side Include?

Client Side Include - CSI (Включение на стороне клиента)

Client Side Include (CSI) является довольно знакомой для фронтенд-разработчиков возможностью, в основном это вызов Ajax. Что выделяет его, так это контент, который возвращает запрос. Тип контента - html/text, похожий на обычный HTML, который мы используем. В этом контексте мы не запрашиваем фрагмент данных, вместо этого мы ожидаем фрагмент HTML. 
<body>
  Hello World
  <footer>
    <h-include src="a server address"></h-include>
  </footer>
</body>
Реализация CSI не нова, CSI используется еще с 2000 года. Проблема CSI заключается в том, что если вы используете этот подход слишком интенсивно, пользователь сайта может ждать контента во время загрузки сайта. Это означает, что поисковая система может быть не в состоянии проиндексировать нужный контент при первой загрузке. По этой причине рекомендуется использовать этот подход только для определенных элементов, таких как счетчик, футер или что-либо, что не привлекает основное внимание пользователя и не находится в верхней части экрана.

Server Side Include - SSI (Включение на стороне сервера)

Как видно из названия, включение на стороне сервера (SSI) не происходит на компьютере клиента. 
<body>
  Hello World
  <!--#include virtual="/..." -->
</body>
Вместо этого, когда сервер анализирует HTML-файл, он проверяет определенные строки, помеченные #include. Для любых найденных включений он извлечет содержимое и вставит его в это место, прежде чем вернуть окончательный документ. Преимущество SSI заключается в том, что, как правило, серверы работают быстрее по сравнению с клиентским компьютером. Не говоря уже о том, что количество запросов между клиентами и серверами сокращается до 1. Таким образом, обычно мы можем получить время отклика около 1 мс по сравнению с временем отклика 50 мс при вызове API. При этом не стоит злоупотреблять использованием большого количества включений на одной страницу. Для каждого включения серверу необходимо выполнить несколько вызовов и дождаться завершения всех вызовов, прежде чем он сможет агрегировать файл. Это может занять больше времени, чем вы ожидаете, не говоря уже о том, что один из вызовов может завершиться сбоем. Таким образом время отклика может вырасти до 500 мс и больше. Любое время, выходящее за рамки 1 сек, может стать критичным для продакшен сервера. Поэтому разумно использовать SSI только для основного содержимого страницы, а не для каждого декоративного элемента (например счетчик или футер и т.д.). Также можно попробовать комбинировать CSI и SSI. SSI также не новая технология. Во времена, когда существовали только бэкенд-разработчики, каждый фрагмент HTML-шаблона, собранный на сервере, можно было назвать SSI.

Edge Side Include - ESI

Идея включения на Edge Side (на стороне CDN), была предложена еще в 2001 году, но с тех пор она так и не стала общепринятой. Тем не менее, она может решить проблемы SSI. Имейте в виду, что ESI происходит и на сервере. 
<body>
  Hello World
  <esi:include src="a server address" />
</body>
С точки зрения использования, это не слишком отличается от включения SSI. Считается, что в некоторых реализациях ESI это улучшает время до первого байта (TTFB). Потому что он может сначала вернуть доступный документ, прежде чем все включения будут скачаны и возвращены. Это похоже на комбинацию CSI и SSI, за исключением того, что все обрабатывается на сервере.

Итоги

Существует множество подходов для реализации микрофронтендов, в том числе CSI, SSI и ESI. Эти подходы могут казаться запутанными, отчасти потому, что разработчики использовали их, не зная терминологии.
FrontendМикрофронтенд

Состояние как снимок в React

год назад·5 мин. на чтение

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

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

Установка состояния запускает рендеринг

Вы можете думать о своем пользовательском интерфейсе как об изменении непосредственно в ответ на пользовательское событие, такое как клик. В React это работает немного иначе, чем эта ментальная модель. На предыдущей странице вы видели, что изменение состояния запрашивает повторный рендеринг. Это означает, что для того, чтобы интерфейс отреагировал на событие, вам необходимо обновить состояние. В этом примере, когда вы нажимаете "send", setIsSent(true) сообщает React повторно отобразить пользовательский интерфейс: 
import { useState } from 'react';

export default function Form() {
  const [isSent, setIsSent] = useState(false);
  const [message, setMessage] = useState('Hi!');
  if (isSent) {
    return <h1>Your message is on its way!</h1>;
  }
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setIsSent(true);
        sendMessage(message);
      }}
    >
      <textarea
        placeholder="Message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="submit">Send</button>
    </form>
  );
}

function sendMessage(message) {
  // ...
}
Вот что происходит, когда вы нажимаете кнопку:
  1. Выполняется обработчик события onSubmit.
  2. setIsSent(true) устанавливает isSent в true и кладет в очередь новый рендеринг.
  3. React повторно отображает компонент в соответствии с новым значением isSent.
Давайте подробнее рассмотрим взаимосвязь между состоянием и рендерингом.

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

"Рендеринг" означает, что React вызывает ваш компонент, который является функцией. JSX, который вы возвращаете из этой функции, подобен снимку пользовательского интерфейса в момент времени. Его пропсы, обработчики событий и локальные переменные были рассчитаны с использованием его состояния во время рендеринга. В отличие от фотографии или кадра фильма, "снимок" пользовательского интерфейса, который вы возвращаете, является интерактивным. Он включает в себя логику, такую ​​как обработчики событий, которые определяют, что происходит в ответ на входные данные. Затем React обновляет экран в соответствии с этим снимком и подключает обработчики событий. В результате нажатие кнопки вызовет обработчик кликов из вашего JSX. Когда React перерисовывает компонент:
  1. React снова вызывает вашу функцию.
  2. Ваша функция возвращает новый снимок JSX.
  3. Затем React обновляет экран в соответствии со снимком, который вы вернули.
Состояние, как память компонента, не похоже на обычную переменную, которая исчезает после возврата из вашей функции. Состояние на самом деле «живет» в самом React — как будто на полке! — вне вашей функции. Когда React вызывает ваш компонент, он дает вам снимок состояния для этого конкретного рендеринга. Ваш компонент возвращает снимок пользовательского интерфейса со свежим набором пропсов и обработчиков событий в своем JSX, и все они рассчитаны с использованием значений состояния из этого рендеринга.
Вот небольшой эксперимент, чтобы показать вам, как это работает. В этом примере вы можете ожидать, что нажатие кнопки «+3» увеличит счетчик на три, потому что он вызывается setNumber(number + 1) три раза. Посмотрите, что происходит, когда вы нажимаете кнопку «+3»: 
import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button
        onClick={() => {
          setNumber(number + 1);
          setNumber(number + 1);
          setNumber(number + 1);
        }}
      >
        +3
      </button>
    </>
  );
}
Обратите внимание, что number увеличивается только один раз за клик! Установка состояния изменяет его только для следующего рендера. Во время первого рендера number было 0. Вот почему в обработчике этого рендеринга onClick значение number по-прежнему остается 0 даже после вызова setNumber(number + 1): 
<button
  onClick={() => {
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
  }}
>
  +3
</button>
 Вот что обработчик нажатия этой кнопки сообщает React:
  1. setNumber(number + 1): number равно 0 таким образом setNumber(0 + 1).
    • React готовится изменить number на 1 в следующем рендеринге.
  2. setNumber(number + 1): number равно 0 таким образом setNumber(0 + 1).
    • React готовится изменить number на 1 в следующем рендеринге.
  3. setNumber(number + 1): number равно 0 таким образом setNumber(0 + 1).
    • React готовится изменить number на 1 в следующем рендеринге.
Несмотря на то, что вы вызвали setNumber(number + 1) три раза, в этом рендере обработчик событий number всегда равен 0, поэтому вы устанавливаете состояние 1 три раза. Вот почему после завершения обработчика событий React повторно отображает компонент с number равным 1, а не 3. Вы также можете визуализировать это, мысленно заменяя переменные состояния их значениями в своем коде. Поскольку number переменная состояния равна 0 для этого рендера, его обработчик событий выглядит так: 
<button
  onClick={() => {
    setNumber(0 + 1);
    setNumber(0 + 1);
    setNumber(0 + 1);
  }}
>
  +3
</button>
Для следующего рендера number равен 1, так что обработчик клика этого рендера выглядит так: 
<button
  onClick={() => {
    setNumber(1 + 1);
    setNumber(1 + 1);
    setNumber(1 + 1);
  }}
>
  +3
</button>
Вот почему повторное нажатие на кнопку установит счетчик на 2, затем 3 на следующий клик и т.д.

Состояние с течением времени

Попробуйте угадать, какое сообщение будет выведено в alert при нажатии этой кнопки: 
import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button
        onClick={() => {
          setNumber(number + 5);
          alert(number);
        }}
      >
        +5
      </button>
    </>
  );
}
Если вы используете метод замены из предыдущего, вы можете догадаться, что предупреждение покажет 0: 
setNumber(0 + 5);
alert(0);
Но что, если положите alert в таймер, чтобы оно срабатывало только после повторного рендеринга компонента? Будет ли он показывать 0 или 5? 
import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button
        onClick={() => {
          setNumber(number + 5);
          setTimeout(() => {
            alert(number);
          }, 3000);
        }}
      >
        +5
      </button>
    </>
  );
}
Если вы используете метод подстановки, вы можете увидеть «снимок» состояния, переданного в alert. 
setNumber(0 + 5);
setTimeout(() => {
  alert(0);
}, 3000);
Состояние, хранящееся в React, могло измениться к моменту запуска оповещения, но оно было запланировано с использованием снимка состояния на момент взаимодействия с ним пользователя. Значение переменной состояния никогда не изменяется в процессе рендеринга, даже если код обработчика событий является асинхронным. Внутри onClick этого рендера значение number продолжает оставаться 0 даже после вызова setNumber(number + 5). Его значение было «фиксировано», когда React «сделал снимок» пользовательского интерфейса, вызвав ваш компонент.
Вот пример того, как это делает ваши обработчики событий менее подверженными ошибкам синхронизации. Ниже представлена ​​форма, которая отправляет сообщение с пятисекундной задержкой. Представьте себе этот сценарий:
  1. Вы нажимаете кнопку «Отправить», отправляя «Привет» Алисе.
  2. Прежде чем закончится пятисекундная задержка, вы измените значение поля «Кому» на «Боб».
Что будет выведено в alert? Будет ли он отображать «Вы поздоровались с Алисой»? Или он будет отображать «Вы поздоровались с Бобом»? Сделайте предположение, основанное на том, что вы знаете: 
import { useState } from 'react';

export default function Form() {
  const [to, setTo] = useState('Alice');
  const [message, setMessage] = useState('Hello');

  function handleSubmit(e) {
    e.preventDefault();
    setTimeout(() => {
      alert(`You said ${message} to ${to}`);
    }, 5000);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        To:{' '}
        <select value={to} onChange={(e) => setTo(e.target.value)}>
          <option value="Alice">Alice</option>
          <option value="Bob">Bob</option>
        </select>
      </label>
      <textarea
        placeholder="Message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="submit">Send</button>
    </form>
  );
}
React сохраняет значения состояния «фиксированными» в обработчиках событий одного рендеринга. Вам не нужно беспокоиться о том, изменилось ли состояние во время выполнения кода. Но что, если вы хотите прочитать последнее состояние перед повторным рендерингом? Вы захотите использовать функцию обновления состояния, описанную на следующей странице.

Резюме

  • Состояние установки запрашивает новый рендеринг.
  • React хранит состояние вне вашего компонента, как на полке.
  • Когда вы вызываете useState, React дает вам снимок состояния для этого рендеринга .
  • Переменные и обработчики событий не «выживают» при повторном рендеринге. Каждый рендер имеет свои обработчики событий.
  • Каждый рендер (и функции внутри него) всегда будет «видеть» снимок состояния, которое React дал этому рендеру.
  • Вы можете мысленно заменить состояние в обработчиках событий, подобно тому, как вы думаете об отрендеренном JSX.
  • Обработчики событий, созданные в прошлом, имеют значения состояния из рендеринга, в котором они были созданы.
FrontendReactТуториал по React
logo

itdevjournal