ДокументацияРежимы
Острова и увлажнение
Определение
Остров — это клиентский компонент — React, Vue, Svelte, Solid или Preact — импортированный на страницу .nexy. Сервер отображает свой HTML; браузер делает этот компонент интерактивным. Остальная часть страницы остается HTML.
Острова существуют в режиме сервера. В клиентском режиме компоненты являются страницами: см. CSR.
Как это работает
from "@/components/Counter.tsx" import Counter<h1>Static heading</h1><Counter directive="client:visible" />from "@/components/Counter.tsx" import Counter<h1>Static heading</h1><Counter directive="client:visible" />Nexy визуализирует компонент во время сборки, сохраняет его HTML и помещает его на страницу. Ответ страницы содержит этот HTML плюс реквизиты в качестве атрибута JSON. В браузере островная среда выполнения загружает компонент и берет на себя управление контейнером.
directive решает, когда это произойдет. Без него остров будет гидратироваться, как только будет готова среда его выполнения.
Жизненный цикл рендеринга
- При сборке каждый клиентский компонент отображается в HTML и записывается в
__nexy__/client/static/. - Запрос отображает страницу
.nexy; Вместо тега вставляется HTML-код острова. - Ответ содержит HTML, реквизиты и директиву в качестве атрибутов.
- В браузере среда выполнения планирует гидратацию в соответствии с директивой.
- Hydration заменяет статический HTML-код живым компонентом; остальная часть страницы нетронута.
В разработке нет моментального снимка сборки: контейнер пуст, а компонент отображается в браузере. Страница выглядит одинаково, но первая краска отличается от производства.
Когда использовать
- Страница, состоящая в основном из контента и имеющая одно или два интерактивных места.
- Виджет, который должен существовать в HTML для сканеров и при этом работать.
- Компонент, которому нужен браузер, но который не должен перетаскивать всю страницу в клиентский рендеринг.
Конфигурация
| Директива | Гидраты |
|---|---|
нет, или client:load |
немедленно |
client:idle |
когда браузер бездействует (requestIdleCallback, тайм-аут 2 с) |
client:visible |
когда остров попадает в область просмотра, на 200 пикселей раньше |
client:media |
когда медиа-запрос соответствует; установите его с помощью реквизита media |
<Chart directive="client:media" media="(min-width: 768px)" />client:media по умолчанию имеет значение (min-width: 768px), когда media отсутствует, и гидратируется один раз. В браузере без IntersectionObserver client:visible возвращается в режим ожидания.
directive и media используются Nexy: они не передаются вашему компоненту.
Пример
import { useState } from "react" export default function Counter({ start = 0 }: { start?: number }) { const [count, setCount] = useState(start) return <button onClick={() => setCount(count + 1)}>{count}</button>}from "@/components/Counter.tsx" import Counter<h1>Count</h1><Counter start=3 directive="client:idle" />from "@/components/Counter.tsx" import Counter<h1>Count</h1><Counter start=3 directive="client:idle" />Ограничения
client:onlyникогда не увлажняется. Это принимается, но среда выполнения пропускает это, поэтому HTML-код сервера остается инертным. Используйте клиентский маршрут (CSR), если компонент не может отображаться на сервере.client:manualне имеет общедоступного триггера. Он также пропускается автоматически, а дескриптор, который его возобновляет, является внутренним.- Реквизиты должны быть в формате JSON. Они сериализуются с помощью
json.dumps; значение, которое не может быть сериализовано, отбрасывается, и остров получает{}— молча. - Остров не является клиентским компонентом с общим состоянием. Два острова не имеют общего состояния без механизма, который вы добавляете самостоятельно.
- Остров не перерисовывается сервером. Его HTML — это снимок сборки плюс все, что делает компонент после гидратации.
- Страница островов — это замаскированная страница CSR. Если каждый блок должен взаимодействовать друг с другом, вместо этого выберите режим клиента.