progcode/editorial/reviews/2022-01-draft.md

П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;
• ReactDOMServer.renderToString — immutable documentation snapshot от 23 декабря 2021;
• React 17.0.2 release record от 22 марта 2021.

Все три 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. Шаблонные обороты из редакционного аудита отсутствуют.

Команда:

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.

Выполнено:

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 b41b1dc35679c01c3252e7d512ce28c5e100d0a4 от 23 декабря 2021. В нём hydrate() присоединяет listeners к существующей server-rendered разметке, ожидает идентичный server/client content и называет mismatch ошибкой; renderToString() возвращает initial HTML. Release API React подтверждает v17.0.2 от 22 марта 2021. Статьи не переносят эти факты на произвольную схему version/snapshot.
• После независимого import-проверки fixture дал 12 из 12 истинных assertions. Matching path использует serialized-snapshot как учебного владельца и не запускает second fetch; mismatch записывается до mutation, остаётся видимым и не скрывается fetch. Это contract учебного object, а не React/Next.js API и не утверждение о поведении DOM.
• node --check и 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 единственные, а date/author в 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: нет script, foreignObject, внешних URL или raster data. Рендеры Sharp в ширину 375 px просмотрены вручную: lifecycle, hand-off ownership и четыре ветки diagnosis читаемы; стрелки и подписи не обрезаны.
• npm run build завершилась с code 0 и сгенерировала 374 статические страницы; git diff --check прошёл. Неприменимые npm warnings о пользовательских store-dir, cache-dir и public-hoist-pattern не изменялись.

Итог: январские статьи заменяют архивные записи через overlay. После этой интеграции строгий аудит проходит 145 из 358, остаётся 213.