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. Эти подходы могут казаться запутанными, отчасти потому, что разработчики использовали их, не зная терминологии.

Пишем первый React компонент

9 месяцев назад·4 мин. на чтение

Компоненты — одна из основных концепций React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути к React.

Содержание туториала по React Компоненты — одна из основных концепций React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути к React.

Компоненты: строительные блоки пользовательского интерфейса

В Интернете HTML позволяет нам создавать богато структурированные документы с помощью встроенного набора тегов, таких как <h1> и <li>:
<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>
Эта разметка представляет эту статью <article>, ее заголовок <h1> и (сокращенное) оглавление в виде упорядоченного списка <ol>. Подобная разметка в сочетании с CSS для стилизации и JavaScript для интерактивности лежит в основе каждой боковой панели, аватара, модального окна, раскрывающегося списка — каждой части пользовательского интерфейса, которую вы видите в Интернете. React позволяет комбинировать разметку, CSS и JavaScript в кастомные «компоненты», повторно используемые элементы пользовательского интерфейса для вашего приложения. Код оглавления, который вы видели выше, можно превратить в компонент <TableOfContents />, который можно отображать на каждой странице. Внутри он по-прежнему использует те же HTML-теги, такие как <article>, <h1> и т. д. Как и в случае с HTML-тегами, вы можете составлять, упорядочивать и размещать компоненты для оформления целых страниц. Например, страница документации, которая состоит из компонентов React, может выглядеть следующим образом:
<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>
По мере роста вашего проекта вы заметите, что многие из ваших проектов могут быть составлены путем повторного использования уже написанных вами компонентов, что ускоряет разработку. Оглавление выше можно добавить на любой экран с помощью <TableOfContents />. Вы даже можете запустить свой проект, состоящий из компонентов, которыми поделились участники сообщества React с открытым исходным кодом, такими как Chakra UI и Material UI.

Определение компонента

Традиционно при создании веб-страниц веб-разработчики размечали свой контент, а затем добавляли интерактивность, добавляя немного JavaScript. React ставит интерактивность на первое место, но при этом использует ту же технологию: компонент React — это функция JavaScript, в которую вы можете добавить разметку. Вот как это выглядит:
export default function Profile() {
  return <img src="https://example.com/userpic.jpg" alt="User Name" />;
}
Вот как написать компонент:

Шаг 1: Экспортируйте компонент

Префикс export default — это стандартный синтаксис JavaScript (не относящийся к React). Он позволяет пометить основную функцию в файле, чтобы впоследствии можно было импортировать ее из других файлов. Подробнее об импорте смотрите в разделе Импорт и экспорт компонентов.

Шаг 2: Определите функцию

С помощью функции function Profile() { } вы определяете функцию JavaScript с именем Profile. Компоненты React — это обычные функции JavaScript, но их имена должны начинаться с заглавной буквы, иначе они не будут работать.

Шаг 3: Добавьте разметку

Компонент возвращает тег <img /> с атрибутами src и alt. <img /> написан как HTML, но на самом деле это JavaScript. Этот синтаксис называется JSX, и он позволяет встраивать разметку в JavaScript. Но если ваша разметка не находится на той же строке, что и ключевое слово return, вы должны заключить ее в пару круглых скобок, например:
export default function Profile() {
  return (
    <div>
      <img src="https://example.com/userpic.jpg" alt="User Name" />
    </div>
  );
}

Использование компонента

Теперь, когда вы определили свой компонент Profile, вы можете вложить его в другие компоненты. Например, вы можете экспортировать компонент Gallery, который использует несколько компонентов Profile:
export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Что видит браузер

Обратите внимание на разницу в регистрах:
  • <section> пишется строчными буквами, поэтому React знает, что мы ссылаемся на HTML-тег.
  • <Profile/> начинается с заглавной P, поэтому React знает, что мы хотим использовать наш компонент с именем Profile.
А Profile содержит еще больше HTML: <img />. В итоге вот что видит браузер:
<section>
  <h1>Amazing scientists</h1>
  <img src="https://example.com/userpic.jpg" alt="User Name" />
  <img src="https://example.com/userpic.jpg" alt="User Name" />
  <img src="https://example.com/userpic.jpg" alt="User Name" />
</section>

Вложение и организация компонентов

Компоненты — это обычные функции JavaScript, поэтому вы можете хранить несколько компонентов в одном файле. Это удобно, когда компоненты относительно малы или тесно связаны друг с другом. Если этот файл переполнен, вы всегда можете переместить Profile в отдельный файл. Как это сделать, вы узнаете вскоре на странице об импорте. Поскольку компоненты Profile визуализируются внутри Gallery — даже несколько раз — мы можем сказать, что Gallery является родительским компонентом, отображающим каждый Profile как «дочерний». Это часть магии React: вы можете определить компонент один раз, а затем использовать его в любом месте и столько раз, сколько захотите. Компоненты могут отображать другие компоненты, но вы никогда не должны вкладывать их определения:
export default function Gallery() {
  // Никогда не определяйте компонент внутри другого
  function Profile() {
    // ...
  }
  // ...
}
Фрагмент выше очень медленный и вызывает ошибки. Вместо этого определите каждый компонент на верхнем уровне:
export default function Gallery() {
  // ...
}

// ✅ Определите компонент на корневом уровне
function Profile() {
  // ...
}
Когда дочернему компоненту нужны данные от родителя, передайте их пропсами, а не определениями вложенности.

Резюме

Вы только что впервые попробовали React! Напомним некоторые ключевые моменты.
  • React позволяет создавать компоненты - многократно используемые элементы пользовательского интерфейса для вашего приложения.
  • В приложении React каждая часть пользовательского интерфейса является компонентом.
  • Компоненты React являются обычными функциями JavaScript, за исключением:
    • Их имена всегда начинаются с заглавной буквы.
    • Они возвращают разметку JSX.