Поиск

ПоискПоиск

Поддержка рендеринга тегов метаданных, стилей и async scripts в React19

Feb 06, 2025, 4 min read

Поддержка рендеринга метаданных

В HTML, теги метаданных документа, такие как <title>, <link> и <meta>, зарезервированы для размещения в разделе <head> документа. В React компонент, который решает, какие метаданные подходят для приложения, может быть очень далеко от места, где вы рендерите <head>, или React вообще не рендерит <head>. Раньше эти элементы нужно было вставлять вручную в эффект или с помощью библиотек, таких как react-helmet, и требовалось тщательное обращение при серверном рендеринге React-приложения.

В React 19 мы добавляем поддержку для нативной отрисовки тегов метаданных документа в компонентах:

function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

Когда React рендерит этот компонент, он увидит теги <title>, <link> и <meta> и автоматически поднимет их в раздел <head> документа. Поддерживая эти теги метаданных нативно, мы можем гарантировать, что они будут работать с приложениями, доступными только на клиенте, потоковым SSR и Server Components.

Примечание:

Вы все еще можете захотеть использовать библиотеку метаданных
Для простых случаев использования отрисовка метаданных документа в виде тегов может быть подходящей, но библиотеки могут предложить более мощные функции, такие как переопределение общих метаданных конкретными метаданными на основе текущего маршрута. Эти функции облегчают поддержку тегов метаданных для фреймворков и библиотек, таких как react-helmet, вместо их замены.

Поддержка стилей

Таблицы стилей, как внешние (<link rel="stylesheet" href="...">), так и встроенные (<style>...</style>), требуют тщательного позиционирования в DOM из-за правил приоритета стилей. Создание возможности таблиц стилей, которая позволяет композицию внутри компонентов, сложно, поэтому пользователи часто либо загружают все свои стили далеко от компонентов, которые могут зависеть от них, либо используют библиотеку стилей, которая инкапсулирует эту сложность.

В React 19 мы решаем эту сложность и предоставляем еще более глубокую интеграцию в Concurrent Rendering на клиенте и Streaming Rendering на сервере с встроенной поддержкой таблиц стилей. Если вы сообщите React приоритет вашей таблицы стилей, он будет управлять порядком вставки таблицы стилей в DOM и гарантировать, что таблица стилей (если внешняя) будет загружена до того, как будет показан контент, зависящий от этих правил стилей.

function ComponentOne() {
  return (
    <Suspense fallback="loading...">
      <link rel="stylesheet" href="foo" precedence="default" />
      <link rel="stylesheet" href="bar" precedence="high" />
      <article class="foo-class bar-class">
        {...}
      </article>
    </Suspense>
  )
}
 
function ComponentTwo() {
  return (
    <div>
      <p>{...}</p>
      <link rel="stylesheet" href="baz" precedence="default" />  <-- будет вставлен между foo & bar
    </div>
  )
}

Во время серверного рендеринга React включит таблицу стилей в <head>, что гарантирует, что браузер не начнет отрисовку, пока таблица стилей не будет загружена. Если таблица стилей обнаружена поздно после того, как мы уже начали потоковую передачу, React гарантирует, что таблица стилей будет вставлена в <head> на клиенте перед показом контента Suspense boundary, который зависит от этой таблицы стилей.

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

function App() {
  return <>
    <ComponentOne />
    ...
    <ComponentOne /> // не приведет к дублированию ссылки на таблицу стилей в DOM
  </>
}

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

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

Поддержка async scripts

В HTML обычные скрипты (<script src="...">) и отложенные скрипты (<script defer="" src="...">) загружаются в порядке документа, что делает рендеринг таких скриптов глубоко в дереве компонентов сложным. Асинхронные скрипты (<script async="" src="...">), однако, загружаются в произвольном порядке.

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

function MyComponent() {
  return (
    <div>
      <script async={true} src="..." />
      Hello World
    </div>
  )
}
 
function App() {
  <html>
    <body>
      <MyComponent>
      ...
      <MyComponent> // не приведет к дублированию скрипта в DOM
    </body>
  </html>
}

Во всех средах рендеринга асинхронные скрипты будут дедуплицированы, так что React загрузит и выполнит скрипт только один раз, даже если он рендерится несколькими разными компонентами.

При серверном рендеринге асинхронные скрипты будут включены в <head> и будут иметь приоритет за более критическими ресурсами, которые блокируют отрисовку, такими как таблицы стилей, шрифты и предзагрузка изображений.

Назад

Упоминания со ссылкой