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 Микрофронтенд

Как переключать css класс в React

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

В этой статье рассмотрим, как динамически переключать css классы в приложении React.

Переключение ccs классов

Чтобы переключить css класс, нам нужно использовать логическое значение, например, в тернарном выражении.

Если логическое значение true, имя класса добавляется к элементу react.
Если логическое значение false имя класса удаляется из элемента react.

Ниже приведен пример, в котором используются React хуки, которые добавляют css класс app в элемент div, когда мы нажимаем кнопку Toggle class. Если мы нажмем эту кнопку еще раз, имя класса будет удалено из элемента div.

// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "app" : null}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

В компонентах, основанных на классах, вы можете сделать это следующим образом.

// App.js

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  state = { isActive: false };

  handleToggle = () => {
    this.setState({ isActive: !this.state.isActive });
  };

  render() {
    const isActive = this.state.isActive;
    return (
      <div className={isActive ? "app" : null}>
        <h1>Hello react</h1>
        <button onClick={this.handleToggle}>Toggle class</button>
      </div>
    );
  }
}

export default App;

Переключение между двумя именами классов

Вместо того, чтобы добавлять или удалять имя класса, мы также можем переключаться между двумя именами классов в приложении React. В приведенном ниже примере по умолчанию класс container добавляется в элемент div, когда мы нажимаем кнопку Toggle class класс container удаляется, а класс app добавляется к элементу.

// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "app" : "container"}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

Добавление имени класса к существующему имени класса

Вы также можете добавить новое имя класса к существующему имени класса следующим образом.

// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={`app ${isActive ? "danger" : ""}`}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

Первоначальный вид html разметки:

<div class="app">
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>

После нажатия кнопки Toggle class html выглядит следующим образом.

<div class="app danger">
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>

Frontend React

на русском языке
бесплатно
без VPN

ChatGPT