[{"data":1,"prerenderedAt":1073},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-reshenie-na-osnove-metriki":13},{"i18nKey":4,"paths":5},"tech-002-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metrics-driven-decision","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriques-de-decision","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriche-decisionali","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-reshenie-na-osnove-metriki","\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik",{"_path":11,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":20,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":1067,"_id":1068,"_source":1069,"_file":1070,"_stem":1071,"_extension":1072},"tech",false,"","Shopify Hydrogen vs Liquid: На основе каких метрик мы принимали решение","TTFB, время сборки, dev velocity, стоимость миграции — как мы выбирали между Hydrogen и Liquid на основе реальных чисел. Анализ компромиссов и результаты бенчмарков.","2026-06-18","headless",[22,23,24,25,26],"shopify-hydrogen","liquid","headless-commerce","web-performance","ttfb",9,"Roibase",{"type":30,"children":31,"toc":1054},"root",[32,40,47,52,61,81,89,196,201,208,213,218,224,229,237,250,258,271,293,298,304,317,325,405,410,423,429,434,442,460,468,486,494,512,524,529,535,540,545,551,556,564,577,585,598,603,616,621,908,913,919,924,968,973,1016,1021,1027,1043,1048],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","После 2024 года архитектурные решения в проектах Shopify больше не упираются в вопрос «современно или нет». Вопрос конкретнее: какие цифры обосновывают выбор. React Server Components архитектуры Hydrogen против монолитного подхода Liquid — правильное решение основано на данных, а не на трендах. Мы делимся результатами, собранными на 6 проектах: TTFB, время сборки, developer velocity и стоимость миграции. Здесь нет теоретических сравнений фреймворков — только метрики, цифры и анализ компромиссов на основе реальных проектов.",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"ttfb-edge-ssr-против-server-side-render",[45],{"type":38,"value":46},"TTFB: Edge SSR против Server-Side Render",{"type":33,"tag":34,"props":48,"children":49},{},[50],{"type":38,"value":51},"Первая метрика — Time to First Byte. На проектах Hydrogen мы тестировали Oxygen (edge runtime Shopify) и Cloudflare Workers. Темы на Liquid используют стандартный pipeline рендеринга Shopify.",{"type":33,"tag":34,"props":53,"children":54},{},[55],{"type":33,"tag":56,"props":57,"children":58},"strong",{},[59],{"type":38,"value":60},"Условия тестирования:",{"type":33,"tag":62,"props":63,"children":64},"ul",{},[65,71,76],{"type":33,"tag":66,"props":67,"children":68},"li",{},[69],{"type":38,"value":70},"Hydrogen: Remix 2.x + Oxygen, 8 маршрутов, средний bundle 120 КБ",{"type":33,"tag":66,"props":72,"children":73},{},[74],{"type":38,"value":75},"Liquid: Dawn 15.0, стандартные настройки кеша",{"type":33,"tag":66,"props":77,"children":78},{},[79],{"type":38,"value":80},"Инструмент: WebPageTest, локация Virginia, соединение 3G Fast, 9 прогонов в среднем",{"type":33,"tag":34,"props":82,"children":83},{},[84],{"type":33,"tag":56,"props":85,"children":86},{},[87],{"type":38,"value":88},"Результаты:",{"type":33,"tag":90,"props":91,"children":92},"table",{},[93,122],{"type":33,"tag":94,"props":95,"children":96},"thead",{},[97],{"type":33,"tag":98,"props":99,"children":100},"tr",{},[101,107,112,117],{"type":33,"tag":102,"props":103,"children":104},"th",{},[105],{"type":38,"value":106},"Архитектура",{"type":33,"tag":102,"props":108,"children":109},{},[110],{"type":38,"value":111},"TTFB (p50)",{"type":33,"tag":102,"props":113,"children":114},{},[115],{"type":38,"value":116},"TTFB (p95)",{"type":33,"tag":102,"props":118,"children":119},{},[120],{"type":38,"value":121},"LCP",{"type":33,"tag":123,"props":124,"children":125},"tbody",{},[126,150,173],{"type":33,"tag":98,"props":127,"children":128},{},[129,135,140,145],{"type":33,"tag":130,"props":131,"children":132},"td",{},[133],{"type":38,"value":134},"Liquid (Dawn)",{"type":33,"tag":130,"props":136,"children":137},{},[138],{"type":38,"value":139},"420 мс",{"type":33,"tag":130,"props":141,"children":142},{},[143],{"type":38,"value":144},"680 мс",{"type":33,"tag":130,"props":146,"children":147},{},[148],{"type":38,"value":149},"2,1 с",{"type":33,"tag":98,"props":151,"children":152},{},[153,158,163,168],{"type":33,"tag":130,"props":154,"children":155},{},[156],{"type":38,"value":157},"Hydrogen (Oxygen)",{"type":33,"tag":130,"props":159,"children":160},{},[161],{"type":38,"value":162},"180 мс",{"type":33,"tag":130,"props":164,"children":165},{},[166],{"type":38,"value":167},"310 мс",{"type":33,"tag":130,"props":169,"children":170},{},[171],{"type":38,"value":172},"1,4 с",{"type":33,"tag":98,"props":174,"children":175},{},[176,181,186,191],{"type":33,"tag":130,"props":177,"children":178},{},[179],{"type":38,"value":180},"Hydrogen (CF Workers)",{"type":33,"tag":130,"props":182,"children":183},{},[184],{"type":38,"value":185},"140 мс",{"type":33,"tag":130,"props":187,"children":188},{},[189],{"type":38,"value":190},"240 мс",{"type":33,"tag":130,"props":192,"children":193},{},[194],{"type":38,"value":195},"1,2 с",{"type":33,"tag":34,"props":197,"children":198},{},[199],{"type":38,"value":200},"При правильно настроенной стратегии кеша SSR на edge TTFB падает на 58 %. Но это работает только для статических маршрутов — на персонализированных страницах (корзина, чекаут) разница сокращается до 30 %, так как кеш обходится.",{"type":33,"tag":202,"props":203,"children":205},"h3",{"id":204},"компромисс-персонализации",[206],{"type":38,"value":207},"Компромисс персонализации",{"type":33,"tag":34,"props":209,"children":210},{},[211],{"type":38,"value":212},"На Hydrogen персонализированные маршруты работают так: для каждого пользователя запрос корзины идёт в Storefront API, этот roundtrip добавляет 80–120 мс даже на edge. На Liquid такой запрос разрешается серверной шаблонизацией без дополнительного roundtrip. Если у вас много персонализированных страниц (например, PDP'и с множеством вариантов), выигрыш TTFB сокращается.",{"type":33,"tag":34,"props":214,"children":215},{},[216],{"type":38,"value":217},"На проекте косметики — 240 SKU на одной странице товара — TTFB Hydrogen 290 мс, Liquid 380 мс. Разница только 23 %, а не обещанные 58 %.",{"type":33,"tag":41,"props":219,"children":221},{"id":220},"время-сборки-скорость-dev-iteration",[222],{"type":38,"value":223},"Время сборки: Скорость dev iteration",{"type":33,"tag":34,"props":225,"children":226},{},[227],{"type":38,"value":228},"Вторая метрика — время локальной разработки и production сборки. На Hydrogen используем Vite, на Liquid — Theme Kit или Shopify CLI.",{"type":33,"tag":34,"props":230,"children":231},{},[232],{"type":33,"tag":56,"props":233,"children":234},{},[235],{"type":38,"value":236},"Запуск dev сервера:",{"type":33,"tag":62,"props":238,"children":239},{},[240,245],{"type":33,"tag":66,"props":241,"children":242},{},[243],{"type":38,"value":244},"Liquid (Theme Kit): ~4 с",{"type":33,"tag":66,"props":246,"children":247},{},[248],{"type":38,"value":249},"Hydrogen (Vite dev): ~1,8 с",{"type":33,"tag":34,"props":251,"children":252},{},[253],{"type":33,"tag":56,"props":254,"children":255},{},[256],{"type":38,"value":257},"Production сборка:",{"type":33,"tag":62,"props":259,"children":260},{},[261,266],{"type":33,"tag":66,"props":262,"children":263},{},[264],{"type":38,"value":265},"Liquid: 0 с (нет сборки, Shopify рендерит напрямую)",{"type":33,"tag":66,"props":267,"children":268},{},[269],{"type":38,"value":270},"Hydrogen: 12–18 с (бандлинг + генерация SSR output)",{"type":33,"tag":34,"props":272,"children":273},{},[274,276,283,285,291],{"type":38,"value":275},"На Liquid нет этапа сборки — это упрощает CI\u002FCD. На Hydrogen ",{"type":33,"tag":277,"props":278,"children":280},"code",{"className":279},[],[281],{"type":38,"value":282},"npm run build",{"type":38,"value":284}," добавляет 12 секунд даже для маленьких изменений. Зато hot module replacement в Hydrogen намного быстрее — изменение ",{"type":33,"tag":277,"props":286,"children":288},{"className":287},[],[289],{"type":38,"value":290},".liquid",{"type":38,"value":292}," файла на Theme Kit синхронизируется 2–3 секунды, на Hydrogen HMR работает мгновенно (\u003C200 мс).",{"type":33,"tag":34,"props":294,"children":295},{},[296],{"type":38,"value":297},"Для команд с 50+ изменениями в день это напрямую влияет на velocity. На проекте модного бренда sprint velocity вырос на 18 % после миграции на Hydrogen — разработчики остаются в потоке, не дергаясь на ожидание сборки.",{"type":33,"tag":41,"props":299,"children":301},{"id":300},"developer-velocity-typescript-инструменты",[302],{"type":38,"value":303},"Developer velocity: TypeScript + инструменты",{"type":33,"tag":34,"props":305,"children":306},{},[307,309,315],{"type":38,"value":308},"Третья метрика — coverage TypeScript, linting, тестирование. Liquid управляется JavaScript (теги ",{"type":33,"tag":277,"props":310,"children":312},{"className":311},[],[313],{"type":38,"value":314},"\u003Cscript>",{"type":38,"value":316}," в шаблонах), Hydrogen — это полностью типизированный TypeScript.",{"type":33,"tag":34,"props":318,"children":319},{},[320],{"type":33,"tag":56,"props":321,"children":322},{},[323],{"type":38,"value":324},"Процент перехвата ошибок:",{"type":33,"tag":90,"props":326,"children":327},{},[328,349],{"type":33,"tag":94,"props":329,"children":330},{},[331],{"type":33,"tag":98,"props":332,"children":333},{},[334,339,344],{"type":33,"tag":102,"props":335,"children":336},{},[337],{"type":38,"value":338},"Инструмент",{"type":33,"tag":102,"props":340,"children":341},{},[342],{"type":38,"value":343},"Liquid",{"type":33,"tag":102,"props":345,"children":346},{},[347],{"type":38,"value":348},"Hydrogen",{"type":33,"tag":123,"props":350,"children":351},{},[352,370,387],{"type":33,"tag":98,"props":353,"children":354},{},[355,360,365],{"type":33,"tag":130,"props":356,"children":357},{},[358],{"type":38,"value":359},"Ошибка TypeScript compile-time",{"type":33,"tag":130,"props":361,"children":362},{},[363],{"type":38,"value":364},"0",{"type":33,"tag":130,"props":366,"children":367},{},[368],{"type":38,"value":369},"124\u002Fsprint",{"type":33,"tag":98,"props":371,"children":372},{},[373,378,383],{"type":33,"tag":130,"props":374,"children":375},{},[376],{"type":38,"value":377},"ESLint runtime warning",{"type":33,"tag":130,"props":379,"children":380},{},[381],{"type":38,"value":382},"8\u002Fsprint",{"type":33,"tag":130,"props":384,"children":385},{},[386],{"type":38,"value":364},{"type":33,"tag":98,"props":388,"children":389},{},[390,395,400],{"type":33,"tag":130,"props":391,"children":392},{},[393],{"type":38,"value":394},"Unit test coverage",{"type":33,"tag":130,"props":396,"children":397},{},[398],{"type":38,"value":399},"12 %",{"type":33,"tag":130,"props":401,"children":402},{},[403],{"type":38,"value":404},"68 %",{"type":33,"tag":34,"props":406,"children":407},{},[408],{"type":38,"value":409},"На Hydrogen Storefront API возвращает ответы с TypeScript типами. Если контракт API изменится, build упадёт с ошибкой — не runtime, а compile-time. На Liquid такие изменения видны только в production.",{"type":33,"tag":34,"props":411,"children":412},{},[413,415,421],{"type":38,"value":414},"Конкретный пример: Storefront API изменил структуру ответа ",{"type":33,"tag":277,"props":416,"children":418},{"className":417},[],[419],{"type":38,"value":420},"product.metafields",{"type":38,"value":422}," (2025 Q2). На Hydrogen проектах TypeScript выдал ошибку, deployment заблокировался, ошибка исправлена ещё до боя. На Liquid проектах это проявилось как console error в production, обнаружено через 3 дня. На крупных e-commerce это критичный риск.",{"type":33,"tag":41,"props":424,"children":426},{"id":425},"стоимость-миграции-effort-переноса",[427],{"type":38,"value":428},"Стоимость миграции: Effort переноса",{"type":33,"tag":34,"props":430,"children":431},{},[432],{"type":38,"value":433},"Четвёртая метрика — затраты на перенос существующей Liquid темы в Hydrogen. Данные effort'а с трёх проектов:",{"type":33,"tag":34,"props":435,"children":436},{},[437],{"type":33,"tag":56,"props":438,"children":439},{},[440],{"type":38,"value":441},"Проект A (мода, 80 SKU):",{"type":33,"tag":62,"props":443,"children":444},{},[445,450,455],{"type":33,"tag":66,"props":446,"children":447},{},[448],{"type":38,"value":449},"Liquid LOC: ~4200",{"type":33,"tag":66,"props":451,"children":452},{},[453],{"type":38,"value":454},"Миграция Hydrogen: 18 дней разработки",{"type":33,"tag":66,"props":456,"children":457},{},[458],{"type":38,"value":459},"React компонентов: 32",{"type":33,"tag":34,"props":461,"children":462},{},[463],{"type":33,"tag":56,"props":464,"children":465},{},[466],{"type":38,"value":467},"Проект B (электроника, 1200 SKU):",{"type":33,"tag":62,"props":469,"children":470},{},[471,476,481],{"type":33,"tag":66,"props":472,"children":473},{},[474],{"type":38,"value":475},"Liquid LOC: ~9800",{"type":33,"tag":66,"props":477,"children":478},{},[479],{"type":38,"value":480},"Миграция Hydrogen: 42 дня разработки",{"type":33,"tag":66,"props":482,"children":483},{},[484],{"type":38,"value":485},"React компонентов: 78",{"type":33,"tag":34,"props":487,"children":488},{},[489],{"type":33,"tag":56,"props":490,"children":491},{},[492],{"type":38,"value":493},"Проект C (косметика, 240 SKU):",{"type":33,"tag":62,"props":495,"children":496},{},[497,502,507],{"type":33,"tag":66,"props":498,"children":499},{},[500],{"type":38,"value":501},"Liquid LOC: ~6100",{"type":33,"tag":66,"props":503,"children":504},{},[505],{"type":38,"value":506},"Миграция Hydrogen: 28 дней разработки",{"type":33,"tag":66,"props":508,"children":509},{},[510],{"type":38,"value":511},"React компонентов: 51",{"type":33,"tag":34,"props":513,"children":514},{},[515,517,522],{"type":38,"value":516},"Среднее соотношение: ",{"type":33,"tag":56,"props":518,"children":519},{},[520],{"type":38,"value":521},"1 строка Liquid = 0,004 дня разработки",{"type":38,"value":523},". То есть 5000 строк Liquid темы = ~20 дней разработки на Hydrogen. Без учёта тестирования и QA.",{"type":33,"tag":34,"props":525,"children":526},{},[527],{"type":38,"value":528},"Самая затратная часть миграции — flow корзины и чекаута (на Liquid встроенные Shopify компоненты, на Hydrogen нужна кастомная реализация). На проекте B на checkout пришло потратить дополнительно 12 дней, потому что динамическая логика скидок переносилась с Liquid в React и требовала полного переалибра тестов.",{"type":33,"tag":202,"props":530,"children":532},{"id":531},"анализ-компромисса",[533],{"type":38,"value":534},"Анализ компромисса",{"type":33,"tag":34,"props":536,"children":537},{},[538],{"type":38,"value":539},"Миграция окупается в сценарии: высокий трафик + требования персонализации. На проекте travel e-commerce (120k session\u002Fдень) переход на Hydrogen привёл к росту conversion rate %2,1 → %2,6. Причина: LCP упал с 2,8 с до 1,4 с, bounce rate снизился. 20 дней миграции окупились за 4 месяца.",{"type":33,"tag":34,"props":541,"children":542},{},[543],{"type":38,"value":544},"Миграция не окупается: низкий трафик + редкие обновления каталога. B2B сайт промышленных деталей (800 session\u002Fдень) не смог амортизировать затраты на миграцию за 14 месяцев — трафик не рос, изменился только dev stack.",{"type":33,"tag":41,"props":546,"children":548},{"id":547},"runtime-cost-хостинг-api-квота",[549],{"type":38,"value":550},"Runtime cost: Хостинг + API квота",{"type":33,"tag":34,"props":552,"children":553},{},[554],{"type":38,"value":555},"Пятая метрика — инфраструктура и расход API. Hydrogen работает на Oxygen или self-hosted edge runtime, Liquid работает на серверах Shopify.",{"type":33,"tag":34,"props":557,"children":558},{},[559],{"type":33,"tag":56,"props":560,"children":561},{},[562],{"type":38,"value":563},"Pricing Oxygen (Shopify Plus):",{"type":33,"tag":62,"props":565,"children":566},{},[567,572],{"type":33,"tag":66,"props":568,"children":569},{},[570],{"type":38,"value":571},"Включено: 1M запросов\u002Fмесяц",{"type":33,"tag":66,"props":573,"children":574},{},[575],{"type":38,"value":576},"Сверх: $0,50 \u002F 10k запросов",{"type":33,"tag":34,"props":578,"children":579},{},[580],{"type":33,"tag":56,"props":581,"children":582},{},[583],{"type":38,"value":584},"Квота Storefront API:",{"type":33,"tag":62,"props":586,"children":587},{},[588,593],{"type":33,"tag":66,"props":589,"children":590},{},[591],{"type":38,"value":592},"Hydrogen: всё через Storefront API (cost запросов растёт)",{"type":33,"tag":66,"props":594,"children":595},{},[596],{"type":38,"value":597},"Liquid: серверная шаблонизация, меньше API запросов",{"type":33,"tag":34,"props":599,"children":600},{},[601],{"type":38,"value":602},"На сайте моды (200k session\u002Fмесяц):",{"type":33,"tag":62,"props":604,"children":605},{},[606,611],{"type":33,"tag":66,"props":607,"children":608},{},[609],{"type":38,"value":610},"Liquid: $0 дополнительно (включено в Shopify)",{"type":33,"tag":66,"props":612,"children":613},{},[614],{"type":38,"value":615},"Hydrogen: $120\u002Fмесяц (2,4M запросов, 1,4M сверх лимита)",{"type":33,"tag":34,"props":617,"children":618},{},[619],{"type":38,"value":620},"Квота API требует внимания на Hydrogen. Каждый SSR маршрут бьёт в Storefront API. Без агрессивной стратегии кеша можно выбежать из квоты. Мы используем pattern stale-while-revalidate:",{"type":33,"tag":622,"props":623,"children":627},"pre",{"className":624,"code":625,"language":626,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Пример loader маршрута Hydrogen\nexport async function loader({context}: LoaderFunctionArgs) {\n  const {storefront} = context;\n  \n  return defer({\n    products: storefront.query(PRODUCTS_QUERY, {\n      cache: storefront.CacheCustom({\n        mode: 'public',\n        maxAge: 3600,\n        staleWhileRevalidate: 86400, \u002F\u002F 24 часа старого контента\n      }),\n    }),\n  });\n}\n","typescript",[628],{"type":33,"tag":277,"props":629,"children":630},{"__ignoreMap":16},[631,643,701,736,745,764,793,811,831,848,872,881,890,899],{"type":33,"tag":632,"props":633,"children":636},"span",{"class":634,"line":635},"line",1,[637],{"type":33,"tag":632,"props":638,"children":640},{"style":639},"--shiki-default:#6A737D",[641],{"type":38,"value":642},"\u002F\u002F Пример loader маршрута Hydrogen\n",{"type":33,"tag":632,"props":644,"children":646},{"class":634,"line":645},2,[647,653,658,663,669,675,681,686,691,696],{"type":33,"tag":632,"props":648,"children":650},{"style":649},"--shiki-default:#F97583",[651],{"type":38,"value":652},"export",{"type":33,"tag":632,"props":654,"children":655},{"style":649},[656],{"type":38,"value":657}," async",{"type":33,"tag":632,"props":659,"children":660},{"style":649},[661],{"type":38,"value":662}," function",{"type":33,"tag":632,"props":664,"children":666},{"style":665},"--shiki-default:#B392F0",[667],{"type":38,"value":668}," loader",{"type":33,"tag":632,"props":670,"children":672},{"style":671},"--shiki-default:#E1E4E8",[673],{"type":38,"value":674},"({",{"type":33,"tag":632,"props":676,"children":678},{"style":677},"--shiki-default:#FFAB70",[679],{"type":38,"value":680},"context",{"type":33,"tag":632,"props":682,"children":683},{"style":671},[684],{"type":38,"value":685},"}",{"type":33,"tag":632,"props":687,"children":688},{"style":649},[689],{"type":38,"value":690},":",{"type":33,"tag":632,"props":692,"children":693},{"style":665},[694],{"type":38,"value":695}," LoaderFunctionArgs",{"type":33,"tag":632,"props":697,"children":698},{"style":671},[699],{"type":38,"value":700},") {\n",{"type":33,"tag":632,"props":702,"children":704},{"class":634,"line":703},3,[705,710,715,721,726,731],{"type":33,"tag":632,"props":706,"children":707},{"style":649},[708],{"type":38,"value":709},"  const",{"type":33,"tag":632,"props":711,"children":712},{"style":671},[713],{"type":38,"value":714}," {",{"type":33,"tag":632,"props":716,"children":718},{"style":717},"--shiki-default:#79B8FF",[719],{"type":38,"value":720},"storefront",{"type":33,"tag":632,"props":722,"children":723},{"style":671},[724],{"type":38,"value":725},"} ",{"type":33,"tag":632,"props":727,"children":728},{"style":649},[729],{"type":38,"value":730},"=",{"type":33,"tag":632,"props":732,"children":733},{"style":671},[734],{"type":38,"value":735}," context;\n",{"type":33,"tag":632,"props":737,"children":739},{"class":634,"line":738},4,[740],{"type":33,"tag":632,"props":741,"children":742},{"style":671},[743],{"type":38,"value":744},"  \n",{"type":33,"tag":632,"props":746,"children":748},{"class":634,"line":747},5,[749,754,759],{"type":33,"tag":632,"props":750,"children":751},{"style":649},[752],{"type":38,"value":753},"  return",{"type":33,"tag":632,"props":755,"children":756},{"style":665},[757],{"type":38,"value":758}," defer",{"type":33,"tag":632,"props":760,"children":761},{"style":671},[762],{"type":38,"value":763},"({\n",{"type":33,"tag":632,"props":765,"children":767},{"class":634,"line":766},6,[768,773,778,783,788],{"type":33,"tag":632,"props":769,"children":770},{"style":671},[771],{"type":38,"value":772},"    products: storefront.",{"type":33,"tag":632,"props":774,"children":775},{"style":665},[776],{"type":38,"value":777},"query",{"type":33,"tag":632,"props":779,"children":780},{"style":671},[781],{"type":38,"value":782},"(",{"type":33,"tag":632,"props":784,"children":785},{"style":717},[786],{"type":38,"value":787},"PRODUCTS_QUERY",{"type":33,"tag":632,"props":789,"children":790},{"style":671},[791],{"type":38,"value":792},", {\n",{"type":33,"tag":632,"props":794,"children":796},{"class":634,"line":795},7,[797,802,807],{"type":33,"tag":632,"props":798,"children":799},{"style":671},[800],{"type":38,"value":801},"      cache: storefront.",{"type":33,"tag":632,"props":803,"children":804},{"style":665},[805],{"type":38,"value":806},"CacheCustom",{"type":33,"tag":632,"props":808,"children":809},{"style":671},[810],{"type":38,"value":763},{"type":33,"tag":632,"props":812,"children":814},{"class":634,"line":813},8,[815,820,826],{"type":33,"tag":632,"props":816,"children":817},{"style":671},[818],{"type":38,"value":819},"        mode: ",{"type":33,"tag":632,"props":821,"children":823},{"style":822},"--shiki-default:#9ECBFF",[824],{"type":38,"value":825},"'public'",{"type":33,"tag":632,"props":827,"children":828},{"style":671},[829],{"type":38,"value":830},",\n",{"type":33,"tag":632,"props":832,"children":833},{"class":634,"line":27},[834,839,844],{"type":33,"tag":632,"props":835,"children":836},{"style":671},[837],{"type":38,"value":838},"        maxAge: ",{"type":33,"tag":632,"props":840,"children":841},{"style":717},[842],{"type":38,"value":843},"3600",{"type":33,"tag":632,"props":845,"children":846},{"style":671},[847],{"type":38,"value":830},{"type":33,"tag":632,"props":849,"children":851},{"class":634,"line":850},10,[852,857,862,867],{"type":33,"tag":632,"props":853,"children":854},{"style":671},[855],{"type":38,"value":856},"        staleWhileRevalidate: ",{"type":33,"tag":632,"props":858,"children":859},{"style":717},[860],{"type":38,"value":861},"86400",{"type":33,"tag":632,"props":863,"children":864},{"style":671},[865],{"type":38,"value":866},", ",{"type":33,"tag":632,"props":868,"children":869},{"style":639},[870],{"type":38,"value":871},"\u002F\u002F 24 часа старого контента\n",{"type":33,"tag":632,"props":873,"children":875},{"class":634,"line":874},11,[876],{"type":33,"tag":632,"props":877,"children":878},{"style":671},[879],{"type":38,"value":880},"      }),\n",{"type":33,"tag":632,"props":882,"children":884},{"class":634,"line":883},12,[885],{"type":33,"tag":632,"props":886,"children":887},{"style":671},[888],{"type":38,"value":889},"    }),\n",{"type":33,"tag":632,"props":891,"children":893},{"class":634,"line":892},13,[894],{"type":33,"tag":632,"props":895,"children":896},{"style":671},[897],{"type":38,"value":898},"  });\n",{"type":33,"tag":632,"props":900,"children":902},{"class":634,"line":901},14,[903],{"type":33,"tag":632,"props":904,"children":905},{"style":671},[906],{"type":38,"value":907},"}\n",{"type":33,"tag":34,"props":909,"children":910},{},[911],{"type":38,"value":912},"Этот pattern снизил API запросы на 40 %. Но есть риск: старый контент может показаться 1 час — цены, стоки обновляются с задержкой. Компромисс: стоимость vs свежесть данных.",{"type":33,"tag":41,"props":914,"children":916},{"id":915},"на-основе-каких-факторов-принимали-решение",[917],{"type":38,"value":918},"На основе каких факторов принимали решение",{"type":33,"tag":34,"props":920,"children":921},{},[922],{"type":38,"value":923},"Шестая метрика — не метрика, это матрица решения. Hydrogen мы выбирали для проектов:",{"type":33,"tag":925,"props":926,"children":927},"ol",{},[928,938,948,958],{"type":33,"tag":66,"props":929,"children":930},{},[931,936],{"type":33,"tag":56,"props":932,"children":933},{},[934],{"type":38,"value":935},"50k+ session\u002Fдень",{"type":38,"value":937}," — улучшение LCP напрямую влияет на conversion",{"type":33,"tag":66,"props":939,"children":940},{},[941,946],{"type":33,"tag":56,"props":942,"children":943},{},[944],{"type":38,"value":945},"Высокие требования персонализации",{"type":38,"value":947}," — edge SSR обслуживает динамический контент быстро",{"type":33,"tag":66,"props":949,"children":950},{},[951,956],{"type":33,"tag":56,"props":952,"children":953},{},[954],{"type":38,"value":955},"Team знает React",{"type":38,"value":957}," — миграция гладкая, velocity растёт",{"type":33,"tag":66,"props":959,"children":960},{},[961,966],{"type":33,"tag":56,"props":962,"children":963},{},[964],{"type":38,"value":965},"Shopify Plus",{"type":38,"value":967}," — Oxygen в плане, нет лишней стоимости runtime",{"type":33,"tag":34,"props":969,"children":970},{},[971],{"type":38,"value":972},"Liquid оставляем в проектах:",{"type":33,"tag":925,"props":974,"children":975},{},[976,986,996,1006],{"type":33,"tag":66,"props":977,"children":978},{},[979,984],{"type":33,"tag":56,"props":980,"children":981},{},[982],{"type":38,"value":983},"\u003C5k session\u002Fдень",{"type":38,"value":985}," — стоимость миграции не окупается",{"type":33,"tag":66,"props":987,"children":988},{},[989,994],{"type":33,"tag":56,"props":990,"children":991},{},[992],{"type":38,"value":993},"Статический каталог",{"type":38,"value":995}," — обновления редкие, Liquid template достаточен",{"type":33,"tag":66,"props":997,"children":998},{},[999,1004],{"type":33,"tag":56,"props":1000,"children":1001},{},[1002],{"type":38,"value":1003},"Маленькая team",{"type":38,"value":1005}," — React не знают, обучение дорого стоит",{"type":33,"tag":66,"props":1007,"children":1008},{},[1009,1014],{"type":33,"tag":56,"props":1010,"children":1011},{},[1012],{"type":38,"value":1013},"Бюджет ограничен",{"type":38,"value":1015}," — миграция + hosting cost не дополучаются",{"type":33,"tag":34,"props":1017,"children":1018},{},[1019],{"type":38,"value":1020},"Конкретный пример: цепь супермаркетов (80k session\u002Fдень, 4000 SKU) — мигрировали на Hydrogen. TTFB упал 480 мс → 190 мс, LCP 3,2 с → 1,6 с. Conversion rate вырос %1,8 → %2,3 (+27 %). Миграция заняла 35 дней разработки, окупилась за 6 месяцев. Параллельно проект бутик-отеля (1200 session\u002Fдень) остался на Liquid — трафик низкий, LCP уже 2,1 с (приемлем), миграция не обоснована.",{"type":33,"tag":41,"props":1022,"children":1024},{"id":1023},"следующий-шаг-гибридный-подход",[1025],{"type":38,"value":1026},"Следующий шаг: гибридный подход",{"type":33,"tag":34,"props":1028,"children":1029},{},[1030,1032,1041],{"type":38,"value":1031},"Выбор Hydrogen\u002FLiquid — не бинарный. На архитектуре ",{"type":33,"tag":1033,"props":1034,"children":1038},"a",{"href":1035,"rel":1036},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[1037],"nofollow",[1039],{"type":38,"value":1040},"Headless Commerce",{"type":38,"value":1042}," можно SSR критические маршруты на Hydrogen (PDP, PLP) и оставить некритичные на Liquid (блог, справочные страницы). Гибридный setup снижает риск миграции, расходы остаются под контролем.",{"type":33,"tag":34,"props":1044,"children":1045},{},[1046],{"type":38,"value":1047},"Наши критерии выбора: цифры говорят — TTFB, conversion rate, developer velocity. Высокий volume session и критичные Core Web Vitals — Hydrogen даст чистый выигрыш. Низкий трафик и team не знает React — Liquid прагматичный выбор. Решение принимайте в месте, где живут ваши метрики — на dashboard.",{"type":33,"tag":1049,"props":1050,"children":1051},"style",{},[1052],{"type":38,"value":1053},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":16,"searchDepth":703,"depth":703,"links":1055},[1056,1059,1060,1061,1064,1065,1066],{"id":43,"depth":645,"text":46,"children":1057},[1058],{"id":204,"depth":703,"text":207},{"id":220,"depth":645,"text":223},{"id":300,"depth":645,"text":303},{"id":425,"depth":645,"text":428,"children":1062},[1063],{"id":531,"depth":703,"text":534},{"id":547,"depth":645,"text":550},{"id":915,"depth":645,"text":918},{"id":1023,"depth":645,"text":1026},"markdown","content:ru:tech:shopify-hydrogen-vs-liquid-reshenie-na-osnove-metriki.md","content","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-reshenie-na-osnove-metriki.md","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-reshenie-na-osnove-metriki","md",1782079494834]