143 lines
12 KiB
Markdown
143 lines
12 KiB
Markdown
# П47 — SSR/CSR, январь 2022: self-review sidecar-пакета
|
||
|
||
## Граница пакета
|
||
|
||
Подготовлены только пять файлов, без изменения registry, README, `articles.json`, Git и чужих черновиков:
|
||
|
||
1. `web/scripts/upgrade-2022-01.mjs`;
|
||
2. `web/public/assets/editorial/2022/ssr-csr-lifecycle-2022.svg`;
|
||
3. `web/public/assets/editorial/2022/ssr-csr-state-ownership-2022.svg`;
|
||
4. `web/public/assets/editorial/2022/ssr-csr-diagnosis-2022.svg`;
|
||
5. этот review.
|
||
|
||
Скрипт экспортирует только overlay-поля: `slug`, `title`, `categories`, `cover`, `excerpt`, `readingMinutes`, `contentHtml`. В нём нет `date` и `author`. `--print-revisions` выводит тот же массив, что import-safe export `revisions`; это проверяет `audit:draft`.
|
||
|
||
## Историческая рамка
|
||
|
||
Материал ограничен январём 2022 года. Проверены три первичных официальных источника:
|
||
|
||
- [ReactDOM.hydrate — immutable documentation snapshot от 23 декабря 2021](https://github.com/reactjs/react.dev/blob/b41b1dc35679c01c3252e7d512ce28c5e100d0a4/content/docs/reference-react-dom.md#hydrate);
|
||
- [ReactDOMServer.renderToString — immutable documentation snapshot от 23 декабря 2021](https://github.com/reactjs/react.dev/blob/b41b1dc35679c01c3252e7d512ce28c5e100d0a4/content/docs/reference-react-dom-server.md#rendertostring);
|
||
- [React 17.0.2 release record от 22 марта 2021](https://github.com/react/react/releases/tag/v17.0.2).
|
||
|
||
Все три URL прошли HTTP preflight с итоговым `200`. Из документации взят только факт: `hydrate` работает с существующей server-rendered разметкой, ожидает согласованное server/client content, а mismatch следует исправлять. Схема `version + serialized snapshot`, labels fixture и recovery policy — учебные и проектные решения, а не API React. В статьях нет React 18, `hydrateRoot`, Next.js App Router, server components или документов позже января 2022 года.
|
||
|
||
## Проход 1 — голос, объём и структура
|
||
|
||
Проверял: М5 начала 2022 года — frontend-системщик начинает с пользовательского сценария, называет границу данных, отделяет наблюдаемое от решения и оставляет путь проверки без выдуманных production-метрик.
|
||
|
||
| Slug | Body, знаки | Роль | Структура | Итог |
|
||
| --- | ---: | --- | --- | --- |
|
||
| `editorial-2022-01-practice-ssr-csr` | 6 964 | Воспроизводимый путь | 6 `h2`, таблица, SVG, fixture-код, маршрут | Принято |
|
||
| `editorial-2022-01-mechanism-ssr-csr` | 7 791 | Причинная модель | 6 `h2`, таблица, SVG, fixture-код, маршрут | Принято |
|
||
| `editorial-2022-01-field-ssr-csr` | 8 250 | Диагностика случая | 6 `h2`, таблица, SVG, fixture-код, маршрут | Принято |
|
||
|
||
Во всех трёх первых двух абзацах есть конкретная проблема и её цена. В каждом тексте отделены: факт исторической документации, локальная fixture и решение проекта. Проверен язык: вместо общего «SSR быстрее» оставлены наблюдаемые формулировки о source, version, snapshot, hydrate и условии client fetch. Шаблонные обороты из редакционного аудита отсутствуют.
|
||
|
||
Команда:
|
||
|
||
```text
|
||
npm run audit:draft -- scripts/upgrade-2022-01.mjs
|
||
```
|
||
|
||
Результат: все три статьи прошли диапазон 5 000–15 000, доступную таблицу, рисунок с alt/подписью, пример кода, ordered route, два и более внешних источника и import-safe overlay.
|
||
|
||
## Проход 2 — техническая fixture и assertions
|
||
|
||
Проверял: согласованность примеров со скриптом и запрет подменять учебный объект реализацией React/Next.js.
|
||
|
||
`runSsrCsrFixture()` работает только с local object, array, `JSON.stringify` и `JSON.parse`. В ней нет DOM, HTTP, `fetch`, browser API, таймера, файла, сети, базы или framework runtime. `markupVersion` назван учебным marker, а не внутренней проверкой React.
|
||
|
||
Выполнено:
|
||
|
||
```text
|
||
node --check web/scripts/upgrade-2022-01.mjs
|
||
node web/scripts/upgrade-2022-01.mjs --verify-fixture
|
||
```
|
||
|
||
Результат fixture: **12/12 assertions**.
|
||
|
||
Покрыты свойства:
|
||
|
||
1. same version пропускает второй client fetch;
|
||
2. mismatch фиксируется до markup/client-state mutation;
|
||
3. mismatch остаётся видимым и содержит expected/serialized version;
|
||
4. mismatch не запускает автоматический client fetch;
|
||
5. serialized version равна версии server source;
|
||
6. matching path называет `serialized-snapshot` владельцем initial state;
|
||
7. фазы `ssr/source`, `serialized-snapshot`, `hydrate`, `client-fetch` не сливаются;
|
||
8. у этих фаз разные action labels;
|
||
9. owners server, snapshot и browser transition названы отдельно;
|
||
10. внешняя работа не выполняется;
|
||
11. схема не заявлена как реализация React или Next.js;
|
||
12. повторный matching plan детерминирован.
|
||
|
||
Все snippets в статьях импортируют `runSsrCsrFixture` и читают реальные поля `serverEnvelope`, `matchingHydration`, `mismatchHydration`, `stateOwner`, `mutation`, `clientFetch`, `steps` и `assertions`.
|
||
|
||
## Проход 3 — источники, историческая точность и visual
|
||
|
||
Проверял: фиксированную дату источников, доступность ссылок, XML/SVG safety и визуальное объяснение на узком экране.
|
||
|
||
- Исторические ссылки зафиксированы immutable commit от 2021-12-23 и release 2021-03-22; источник не опирается на mutable current API wording.
|
||
- `xmllint --noout` прошёл для всех трёх SVG.
|
||
- Safety scan не нашёл `<script>`, `<foreignObject>`, external `href`/`src` и raster `data:`.
|
||
- Каждый SVG содержит `title`, `desc`, `role="img"`, содержательный article-level `alt` и `figcaption`.
|
||
- Sharp-рендеры шириной 375 px просмотрены вручную: lifecycle различает ветки match/mismatch, ownership показывает hand-off вместо общего cache, diagnosis разделяет четыре причины повторного fetch. Контраст, направления стрелок и границы блоков не обрезаны.
|
||
|
||
Не заявлялись и не выполнялись production build, интеграция overlay в registry, изменение базы статей, публикация или push. В материале нет реальных browser trace, LCP, инцидентов, метрик или результатов проекта.
|
||
|
||
## Вердикт
|
||
|
||
Sidecar-пакет готов для независимого редакторского приёма и последующей интеграции. До интеграции нужен отдельный проход, который добавит импорт/спред в registry и обновит счётчик архива; в этом пакете эти файлы намеренно не затронуты.
|
||
|
||
## Независимое редакторское ревью и интеграция
|
||
|
||
Статус: **принято и подключено в editorial overlay 31 июля 2026 года**.
|
||
|
||
### 1. Факты и техника
|
||
|
||
- Исторический source-check подтверждает commit React docs
|
||
<code>b41b1dc35679c01c3252e7d512ce28c5e100d0a4</code> от 23 декабря 2021.
|
||
В нём <code>hydrate()</code> присоединяет listeners к существующей
|
||
server-rendered разметке, ожидает идентичный server/client content и
|
||
называет mismatch ошибкой; <code>renderToString()</code> возвращает initial
|
||
HTML. Release API React подтверждает <code>v17.0.2</code> от 22 марта 2021.
|
||
Статьи не переносят эти факты на произвольную схему version/snapshot.
|
||
- После независимого import-проверки fixture дал 12 из 12 истинных assertions.
|
||
Matching path использует <code>serialized-snapshot</code> как учебного
|
||
владельца и не запускает second fetch; mismatch записывается до mutation,
|
||
остаётся видимым и не скрывается fetch. Это contract учебного object, а не
|
||
React/Next.js API и не утверждение о поведении DOM.
|
||
- <code>node --check</code> и draft audit прошли: body — 6 964, 7 791 и
|
||
8 250 знаков. У CLI fixture формат вывода — строка PASS, поэтому result
|
||
дополнительно подтверждён прямым import/export check, без подмены JSON
|
||
parsing. После интеграции strict audit прошёл для всех трёх slug: 1 figure,
|
||
1 table и 1 code example в каждой статье. В registry 136 revisions; три
|
||
январские slug единственные, а <code>date</code>/<code>author</code> в
|
||
overlay отсутствуют.
|
||
|
||
### 2. Редактура и голос
|
||
|
||
- Тексты перечитаны как начало 2022 года: автор объясняет ownership initial
|
||
state, версию snapshot и error boundary, но не заявляет опыт React
|
||
framework migration или production performance study. Условия проекта
|
||
отделены от документации React, а следующий шаг требует зафиксировать один
|
||
собственный source/version/recovery contract.
|
||
- Схема не обещает «SSR быстрее» и не называет автоматический client fetch
|
||
исправлением mismatch. Это сохраняет короткий технический язык и цену
|
||
ошибки: скрыть неравенство server/client state вместо выбора recovery path.
|
||
|
||
### 3. Визуал и выпуск
|
||
|
||
- Три SVG повторно прошли XML и safety scan: нет <code>script</code>,
|
||
<code>foreignObject</code>, внешних URL или raster data. Рендеры Sharp в
|
||
ширину 375 px просмотрены вручную: lifecycle, hand-off ownership и четыре
|
||
ветки diagnosis читаемы; стрелки и подписи не обрезаны.
|
||
- <code>npm run build</code> завершилась с code 0 и сгенерировала 374
|
||
статические страницы; <code>git diff --check</code> прошёл. Неприменимые
|
||
npm warnings о пользовательских <code>store-dir</code>,
|
||
<code>cache-dir</code> и <code>public-hoist-pattern</code> не изменялись.
|
||
|
||
Итог: январские статьи заменяют архивные записи через overlay. После этой
|
||
интеграции строгий аудит проходит **145 из 358**, остаётся **213**.
|