[{"data":1,"prerenderedAt":821},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-s-veritemellikarar":13},{"i18nKey":4,"paths":5},"tech-002-2026-08",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen-entscheidung","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-by-numbers","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-chiffres","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decisione-con-numeri","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-s-veritemellikarar","\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":14,"i18nKey":4,"tags":20,"readingTime":26,"author":27,"body":28,"_type":815,"_id":816,"_source":817,"_file":818,"_stem":819,"_extension":820},"tech",false,"","Shopify Hydrogen vs Liquid: Решение, основанное на данных","Сравнение TTFB, времени сборки, скорости разработки и стоимости миграции при переходе на Hydrogen. Реальные цифры headless-коммерции.","2026-08-13",[21,22,23,24,25],"shopify-hydrogen","headless-commerce","web-performance","liquid-shopify","ttfb",9,"Roibase",{"type":29,"children":30,"toc":803},"root",[31,39,46,51,56,61,67,72,94,471,476,483,488,494,499,652,657,670,676,681,686,692,697,703,708,728,733,767,772,778,783,788,792,797],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","При выборе между Shopify Hydrogen и Liquid мы отказались от риторики «современных технологий» и сосредоточились на конкретных метриках. У одного из наших клиентов была 4-летняя Liquid-тема: 1200 строк CSS, 30+ snippet'ов, среднее TTFB 890 мс. Прототип Hydrogen занял 3 недели, TTFB упал до 240 мс, но стоимость миграции составила 180 часов. В этой статье мы разбираем метрики, на которых основывалось наше решение.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"ttfb-узкое-место-в-pipelineе-liquid",[44],{"type":37,"value":45},"TTFB: узкое место в pipeline'е Liquid",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Liquid-темы рендерятся на стороне сервера и кэшируются в глобальной CDN Shopify. Проблема возникает с персонализированным контентом (корзина, wishlist, geo-базированные цены) — кэш обходится. На тестовом сайте TTFB из Стамбула составлял 890 мс, из Франкфурта — 1240 мс. Тот же контент на Hydrogen с Oxygen (edge runtime Shopify) показал 240 мс из Стамбула и 280 мс из Франкфурта.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"Разница вытекает из того, что Liquid работает в монолитном PHP на серверах Shopify, а Hydrogen выполняется в V8 isolate'ах на edge-узлах Oxygen, где статические ассеты хранятся в CDN, а динамические данные загружаются из Storefront API на edge. Каждый запрос в Liquid идёт в backend, в Hydrogen — работает на краю сети.",{"type":32,"tag":33,"props":57,"children":58},{},[59],{"type":37,"value":60},"Методология измерения имеет значение: мы использовали вкладку Network в Chrome DevTools, колонку «Waiting (TTFB)» для документа. WebPageTest дает идентичный результат в метрике «Time to First Byte». Мы усредняли по 50 запросам (включая cold и warm cache сценарии).",{"type":32,"tag":40,"props":62,"children":64},{"id":63},"build-time-и-компромисс-developer-velocity",[65],{"type":37,"value":66},"Build time и компромисс developer velocity",{"type":32,"tag":33,"props":68,"children":69},{},[70],{"type":37,"value":71},"Liquid-темы не требуют сборки — загружаешь через Shopify CLI, изменения живут мгновенно. Hydrogen-проект построен на Node.js + Remix, каждый deployment включает фазу сборки. На нашем проекте среднее время build составило 140 секунд (Vite bundling + Remix compilation). В Liquid изменение попадает в production за 3 секунды, в Hydrogen — за 2.5 минуты.",{"type":32,"tag":33,"props":73,"children":74},{},[75,77,84,86,92],{"type":37,"value":76},"Но developer experience идёт в противоположном направлении. Liquid использует Shopify Sections и Blocks — функциональный, но хрупкий подход: в 200-строчном файле section нет prop drilling, есть глобальные объекты ",{"type":32,"tag":78,"props":79,"children":81},"code",{"className":80},[],[82],{"type":37,"value":83},"request",{"type":37,"value":85}," и ",{"type":32,"tag":78,"props":87,"children":89},{"className":88},[],[90],{"type":37,"value":91},"product",{"type":37,"value":93},", дебаг ведётся через console.log. Hydrogen предлагает React-компоненты, TypeScript type safety, явный паттерн Remix loader для загрузки данных. На 5-человечной team'е среднее время на feature в Liquid — 4.2 часа, в Hydrogen — 2.8 часа (данные спустя 2 месяца после обучения).",{"type":32,"tag":95,"props":96,"children":100},"pre",{"className":97,"code":98,"language":99,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Hydrogen loader — type-safe, тестируем\nexport async function loader({ context }: LoaderFunctionArgs) {\n  const { storefront } = context;\n  const { product } = await storefront.query(PRODUCT_QUERY, {\n    variables: { handle: 'example' }\n  });\n  return json({ product });\n}\n\n\u002F\u002F Liquid — риск runtime error, нет типов\n{% assign product = all_products['example'] %}\n{% if product.available %}\n  \u003Cbutton>Add to cart\u003C\u002Fbutton>\n{% endif %}\n","typescript",[101],{"type":32,"tag":78,"props":102,"children":103},{"__ignoreMap":16},[104,116,174,209,263,283,292,311,320,329,338,383,413,446],{"type":32,"tag":105,"props":106,"children":109},"span",{"class":107,"line":108},"line",1,[110],{"type":32,"tag":105,"props":111,"children":113},{"style":112},"--shiki-default:#6A737D",[114],{"type":37,"value":115},"\u002F\u002F Hydrogen loader — type-safe, тестируем\n",{"type":32,"tag":105,"props":117,"children":119},{"class":107,"line":118},2,[120,126,131,136,142,148,154,159,164,169],{"type":32,"tag":105,"props":121,"children":123},{"style":122},"--shiki-default:#F97583",[124],{"type":37,"value":125},"export",{"type":32,"tag":105,"props":127,"children":128},{"style":122},[129],{"type":37,"value":130}," async",{"type":32,"tag":105,"props":132,"children":133},{"style":122},[134],{"type":37,"value":135}," function",{"type":32,"tag":105,"props":137,"children":139},{"style":138},"--shiki-default:#B392F0",[140],{"type":37,"value":141}," loader",{"type":32,"tag":105,"props":143,"children":145},{"style":144},"--shiki-default:#E1E4E8",[146],{"type":37,"value":147},"({ ",{"type":32,"tag":105,"props":149,"children":151},{"style":150},"--shiki-default:#FFAB70",[152],{"type":37,"value":153},"context",{"type":32,"tag":105,"props":155,"children":156},{"style":144},[157],{"type":37,"value":158}," }",{"type":32,"tag":105,"props":160,"children":161},{"style":122},[162],{"type":37,"value":163},":",{"type":32,"tag":105,"props":165,"children":166},{"style":138},[167],{"type":37,"value":168}," LoaderFunctionArgs",{"type":32,"tag":105,"props":170,"children":171},{"style":144},[172],{"type":37,"value":173},") {\n",{"type":32,"tag":105,"props":175,"children":177},{"class":107,"line":176},3,[178,183,188,194,199,204],{"type":32,"tag":105,"props":179,"children":180},{"style":122},[181],{"type":37,"value":182},"  const",{"type":32,"tag":105,"props":184,"children":185},{"style":144},[186],{"type":37,"value":187}," { ",{"type":32,"tag":105,"props":189,"children":191},{"style":190},"--shiki-default:#79B8FF",[192],{"type":37,"value":193},"storefront",{"type":32,"tag":105,"props":195,"children":196},{"style":144},[197],{"type":37,"value":198}," } ",{"type":32,"tag":105,"props":200,"children":201},{"style":122},[202],{"type":37,"value":203},"=",{"type":32,"tag":105,"props":205,"children":206},{"style":144},[207],{"type":37,"value":208}," context;\n",{"type":32,"tag":105,"props":210,"children":212},{"class":107,"line":211},4,[213,217,221,225,229,233,238,243,248,253,258],{"type":32,"tag":105,"props":214,"children":215},{"style":122},[216],{"type":37,"value":182},{"type":32,"tag":105,"props":218,"children":219},{"style":144},[220],{"type":37,"value":187},{"type":32,"tag":105,"props":222,"children":223},{"style":190},[224],{"type":37,"value":91},{"type":32,"tag":105,"props":226,"children":227},{"style":144},[228],{"type":37,"value":198},{"type":32,"tag":105,"props":230,"children":231},{"style":122},[232],{"type":37,"value":203},{"type":32,"tag":105,"props":234,"children":235},{"style":122},[236],{"type":37,"value":237}," await",{"type":32,"tag":105,"props":239,"children":240},{"style":144},[241],{"type":37,"value":242}," storefront.",{"type":32,"tag":105,"props":244,"children":245},{"style":138},[246],{"type":37,"value":247},"query",{"type":32,"tag":105,"props":249,"children":250},{"style":144},[251],{"type":37,"value":252},"(",{"type":32,"tag":105,"props":254,"children":255},{"style":190},[256],{"type":37,"value":257},"PRODUCT_QUERY",{"type":32,"tag":105,"props":259,"children":260},{"style":144},[261],{"type":37,"value":262},", {\n",{"type":32,"tag":105,"props":264,"children":266},{"class":107,"line":265},5,[267,272,278],{"type":32,"tag":105,"props":268,"children":269},{"style":144},[270],{"type":37,"value":271},"    variables: { handle: ",{"type":32,"tag":105,"props":273,"children":275},{"style":274},"--shiki-default:#9ECBFF",[276],{"type":37,"value":277},"'example'",{"type":32,"tag":105,"props":279,"children":280},{"style":144},[281],{"type":37,"value":282}," }\n",{"type":32,"tag":105,"props":284,"children":286},{"class":107,"line":285},6,[287],{"type":32,"tag":105,"props":288,"children":289},{"style":144},[290],{"type":37,"value":291},"  });\n",{"type":32,"tag":105,"props":293,"children":295},{"class":107,"line":294},7,[296,301,306],{"type":32,"tag":105,"props":297,"children":298},{"style":122},[299],{"type":37,"value":300},"  return",{"type":32,"tag":105,"props":302,"children":303},{"style":138},[304],{"type":37,"value":305}," json",{"type":32,"tag":105,"props":307,"children":308},{"style":144},[309],{"type":37,"value":310},"({ product });\n",{"type":32,"tag":105,"props":312,"children":314},{"class":107,"line":313},8,[315],{"type":32,"tag":105,"props":316,"children":317},{"style":144},[318],{"type":37,"value":319},"}\n",{"type":32,"tag":105,"props":321,"children":322},{"class":107,"line":26},[323],{"type":32,"tag":105,"props":324,"children":326},{"emptyLinePlaceholder":325},true,[327],{"type":37,"value":328},"\n",{"type":32,"tag":105,"props":330,"children":332},{"class":107,"line":331},10,[333],{"type":32,"tag":105,"props":334,"children":335},{"style":112},[336],{"type":37,"value":337},"\u002F\u002F Liquid — риск runtime error, нет типов\n",{"type":32,"tag":105,"props":339,"children":341},{"class":107,"line":340},11,[342,347,352,357,361,366,370,375,379],{"type":32,"tag":105,"props":343,"children":344},{"style":144},[345],{"type":37,"value":346},"{",{"type":32,"tag":105,"props":348,"children":349},{"style":122},[350],{"type":37,"value":351},"%",{"type":32,"tag":105,"props":353,"children":354},{"style":144},[355],{"type":37,"value":356}," assign product ",{"type":32,"tag":105,"props":358,"children":359},{"style":122},[360],{"type":37,"value":203},{"type":32,"tag":105,"props":362,"children":363},{"style":144},[364],{"type":37,"value":365}," all_products[",{"type":32,"tag":105,"props":367,"children":368},{"style":274},[369],{"type":37,"value":277},{"type":32,"tag":105,"props":371,"children":372},{"style":144},[373],{"type":37,"value":374},"] ",{"type":32,"tag":105,"props":376,"children":377},{"style":122},[378],{"type":37,"value":351},{"type":32,"tag":105,"props":380,"children":381},{"style":144},[382],{"type":37,"value":319},{"type":32,"tag":105,"props":384,"children":386},{"class":107,"line":385},12,[387,391,395,400,405,409],{"type":32,"tag":105,"props":388,"children":389},{"style":144},[390],{"type":37,"value":346},{"type":32,"tag":105,"props":392,"children":393},{"style":122},[394],{"type":37,"value":351},{"type":32,"tag":105,"props":396,"children":397},{"style":122},[398],{"type":37,"value":399}," if",{"type":32,"tag":105,"props":401,"children":402},{"style":144},[403],{"type":37,"value":404}," product.available ",{"type":32,"tag":105,"props":406,"children":407},{"style":122},[408],{"type":37,"value":351},{"type":32,"tag":105,"props":410,"children":411},{"style":144},[412],{"type":37,"value":319},{"type":32,"tag":105,"props":414,"children":416},{"class":107,"line":415},13,[417,422,427,432,437,441],{"type":32,"tag":105,"props":418,"children":419},{"style":144},[420],{"type":37,"value":421},"  \u003C",{"type":32,"tag":105,"props":423,"children":424},{"style":138},[425],{"type":37,"value":426},"button",{"type":32,"tag":105,"props":428,"children":429},{"style":144},[430],{"type":37,"value":431},">Add to cart",{"type":32,"tag":105,"props":433,"children":434},{"style":122},[435],{"type":37,"value":436},"\u003C\u002F",{"type":32,"tag":105,"props":438,"children":439},{"style":144},[440],{"type":37,"value":426},{"type":32,"tag":105,"props":442,"children":443},{"style":122},[444],{"type":37,"value":445},">\n",{"type":32,"tag":105,"props":447,"children":449},{"class":107,"line":448},14,[450,454,458,463,467],{"type":32,"tag":105,"props":451,"children":452},{"style":144},[453],{"type":37,"value":346},{"type":32,"tag":105,"props":455,"children":456},{"style":122},[457],{"type":37,"value":351},{"type":32,"tag":105,"props":459,"children":460},{"style":144},[461],{"type":37,"value":462}," endif ",{"type":32,"tag":105,"props":464,"children":465},{"style":122},[466],{"type":37,"value":351},{"type":32,"tag":105,"props":468,"children":469},{"style":144},[470],{"type":37,"value":319},{"type":32,"tag":33,"props":472,"children":473},{},[474],{"type":37,"value":475},"Эта разница в velocity накапливается. За 6-месячный спринт в Liquid развернули 48 feature'ов, в Hydrogen — 82. Качество кода тоже отличается: в Hydrogen-проекте благодаря ESLint + Prettier + TypeScript rate production-багов составил 0.8%, в Liquid — 3.2% (мерили по ошибкам в PageSpeed Insights console).",{"type":32,"tag":477,"props":478,"children":480},"h3",{"id":479},"эффект-hot-module-replacement-hmr",[481],{"type":37,"value":482},"Эффект Hot Module Replacement (HMR)",{"type":32,"tag":33,"props":484,"children":485},{},[486],{"type":37,"value":487},"Dev-сервер Hydrogen (на базе Vite) поддерживает HMR — при изменении компонента state сохраняется, страница не перезагружается. В Liquid каждое изменение требует полную перезагрузку страницы. При разработке checkout flow в Liquid потребовалось 14 перезагрузок (чтобы заполнить форму и протестировать), в Hydrogen — 2. В ежедневном workflow разработчиков это дало 40 минут сэкономленного времени.",{"type":32,"tag":40,"props":489,"children":491},{"id":490},"стоимость-миграции-куда-пошли-180-часов",[492],{"type":37,"value":493},"Стоимость миграции: куда пошли 180 часов",{"type":32,"tag":33,"props":495,"children":496},{},[497],{"type":37,"value":498},"Стоимость переноса с Liquid на Hydrogen зависит от проекта, но для сходной архитектуры типичное распределение выглядит так:",{"type":32,"tag":500,"props":501,"children":502},"table",{},[503,527],{"type":32,"tag":504,"props":505,"children":506},"thead",{},[507],{"type":32,"tag":508,"props":509,"children":510},"tr",{},[511,517,522],{"type":32,"tag":512,"props":513,"children":514},"th",{},[515],{"type":37,"value":516},"Статья работ",{"type":32,"tag":512,"props":518,"children":519},{},[520],{"type":37,"value":521},"Часов",{"type":32,"tag":512,"props":523,"children":524},{},[525],{"type":37,"value":526},"Описание",{"type":32,"tag":528,"props":529,"children":530},"tbody",{},[531,550,568,586,610,634],{"type":32,"tag":508,"props":532,"children":533},{},[534,540,545],{"type":32,"tag":535,"props":536,"children":537},"td",{},[538],{"type":37,"value":539},"Сопоставление Storefront API schema",{"type":32,"tag":535,"props":541,"children":542},{},[543],{"type":37,"value":544},"32",{"type":32,"tag":535,"props":546,"children":547},{},[548],{"type":37,"value":549},"Написание GraphQL query, отображение Liquid-объектов",{"type":32,"tag":508,"props":551,"children":552},{},[553,558,563],{"type":32,"tag":535,"props":554,"children":555},{},[556],{"type":37,"value":557},"Рефакторинг компонентов",{"type":32,"tag":535,"props":559,"children":560},{},[561],{"type":37,"value":562},"58",{"type":32,"tag":535,"props":564,"children":565},{},[566],{"type":37,"value":567},"Перевод Liquid snippet'ов в React",{"type":32,"tag":508,"props":569,"children":570},{},[571,576,581],{"type":32,"tag":535,"props":572,"children":573},{},[574],{"type":37,"value":575},"Корзина + Checkout",{"type":32,"tag":535,"props":577,"children":578},{},[579],{"type":37,"value":580},"28",{"type":32,"tag":535,"props":582,"children":583},{},[584],{"type":37,"value":585},"Интеграция Shopify Cart API, управление сессией",{"type":32,"tag":508,"props":587,"children":588},{},[589,594,599],{"type":32,"tag":535,"props":590,"children":591},{},[592],{"type":37,"value":593},"SEO + Meta tags",{"type":32,"tag":535,"props":595,"children":596},{},[597],{"type":37,"value":598},"14",{"type":32,"tag":535,"props":600,"children":601},{},[602,608],{"type":32,"tag":78,"props":603,"children":605},{"className":604},[],[606],{"type":37,"value":607},"handle.meta",{"type":37,"value":609}," → React Helmet, canonical URL",{"type":32,"tag":508,"props":611,"children":612},{},[613,618,623],{"type":32,"tag":535,"props":614,"children":615},{},[616],{"type":37,"value":617},"Оптимизация изображений",{"type":32,"tag":535,"props":619,"children":620},{},[621],{"type":37,"value":622},"18",{"type":32,"tag":535,"props":624,"children":625},{},[626,632],{"type":32,"tag":78,"props":627,"children":629},{"className":628},[],[630],{"type":37,"value":631},"{% image %}",{"type":37,"value":633}," → Shopify CDN responsive images",{"type":32,"tag":508,"props":635,"children":636},{},[637,642,647],{"type":32,"tag":535,"props":638,"children":639},{},[640],{"type":37,"value":641},"Тестирование + исправления",{"type":32,"tag":535,"props":643,"children":644},{},[645],{"type":37,"value":646},"30",{"type":32,"tag":535,"props":648,"children":649},{},[650],{"type":37,"value":651},"Cypress E2E, visual regression test",{"type":32,"tag":33,"props":653,"children":654},{},[655],{"type":37,"value":656},"Итого 180 часов (4.5 недели, 2 разработчика). Для Liquid-темы из 1200 строк CSS + 30 snippet'ов может потребоваться 200+ часов. В нашем проекте CSS был перевёден на tailwind отдельно (не входит в эту цифру).",{"type":32,"tag":33,"props":658,"children":659},{},[660,662,668],{"type":37,"value":661},"Критический момент: архитектура Shopify Sections отсутствует в Hydrogen. В Liquid ",{"type":32,"tag":78,"props":663,"children":665},{"className":664},[],[666],{"type":37,"value":667},"{% section 'header' %}",{"type":37,"value":669}," позволяет динамическую инъекцию section'ов, в Hydrogen это делается через import компонентов. Admin-панель section-настроек перешла на Shopify Metaobjects, что заняло ещё 12 часов.",{"type":32,"tag":40,"props":671,"children":673},{"id":672},"runtime-cost-oxygen-vs-liquid-hosting",[674],{"type":37,"value":675},"Runtime cost: Oxygen vs Liquid hosting",{"type":32,"tag":33,"props":677,"children":678},{},[679],{"type":37,"value":680},"Liquid-темы на стандартном хостинге Shopify бесплатны. Hydrogen работает на Oxygen (edge-платформе Shopify) с request-based тарификацией. На тестовом сайте 450K запросов\u002Fмесяц, стоимость Oxygen составила $89\u002Fмесяц (включено в Shopify Plus, доплата в Standard). В Liquid хостинг бесплатен, но TTFB разница дала +2.1% в conversion rate (890ms → 240ms TTFB, похожее улучшение LCP). На 120K USD GMV\u002Fмесяц это +2520 USD дохода. ROI явно в пользу Hydrogen.",{"type":32,"tag":33,"props":682,"children":683},{},[684],{"type":37,"value":685},"Важный момент: Oxygen — это edge runtime как Cloudflare Workers, где каждый запрос запускает новый V8 isolate, лимит памяти 128MB, CPU time 50ms. В Liquid таких лимитов нет (PHP монолит), но есть latency. В Hydrogen не будешь тяжелые операции выполнять — вместо парса большого CSV в runtime, ты сделаешь это в Shopify Admin API и запишешь в metafield.",{"type":32,"tag":477,"props":687,"children":689},{"id":688},"детали-pricing-oxygen",[690],{"type":37,"value":691},"Детали pricing Oxygen",{"type":32,"tag":33,"props":693,"children":694},{},[695],{"type":37,"value":696},"Oxygen Standard: 25K запросов\u002Fмесяц включено, затем $0.00375\u002Fзапрос (эффективно $3.75 за 1000 req). Enterprise — custom pricing. На 450K запросов выходило бы $1.6K\u002Fмесяц, но в Plus-плане Oxygen включен, поэтому доплата отсутствует. В Liquid запросы на стоимость не влияют (в абонентской плате), но edge compute-преимущество недоступно.",{"type":32,"tag":40,"props":698,"children":700},{"id":699},"когда-переходить-на-hydrogen",[701],{"type":37,"value":702},"Когда переходить на Hydrogen",{"type":32,"tag":33,"props":704,"children":705},{},[706],{"type":37,"value":707},"Переход НЕ имеет смысла:",{"type":32,"tag":709,"props":710,"children":711},"ul",{},[712,718,723],{"type":32,"tag":713,"props":714,"children":715},"li",{},[716],{"type":37,"value":717},"Каталог \u003C50 товаров, трафик \u003C10K\u002Fмесяц — Liquid достаточно",{"type":32,"tag":713,"props":719,"children":720},{},[721],{"type":37,"value":722},"Dev team комфортна с Liquid, React неизвестен — обучение +6 месяцев",{"type":32,"tag":713,"props":724,"children":725},{},[726],{"type":37,"value":727},"Тема содержит >10 Shopify App embed'ов — Hydrogen не имеет native support, требует custom integration (Yotpo reviews, Klaviyo popup)",{"type":32,"tag":33,"props":729,"children":730},{},[731],{"type":37,"value":732},"Переход явно имеет смысл:",{"type":32,"tag":709,"props":734,"children":735},{},[736,741,757,762],{"type":32,"tag":713,"props":737,"children":738},{},[739],{"type":37,"value":740},"TTFB >600ms, есть geo-based контент — edge SSR дает ощутимый прирост",{"type":32,"tag":713,"props":742,"children":743},{},[744,746,755],{"type":37,"value":745},"Планируется переход на headless-архитектуру — Hydrogen естественная часть ",{"type":32,"tag":747,"props":748,"children":752},"a",{"href":749,"rel":750},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[751],"nofollow",[753],{"type":37,"value":754},"headless commerce",{"type":37,"value":756}," стратегии",{"type":32,"tag":713,"props":758,"children":759},{},[760],{"type":37,"value":761},"Team имеет опыт React\u002FTypeScript — velocity-gain реализуется сразу",{"type":32,"tag":713,"props":763,"children":764},{},[765],{"type":37,"value":766},"Требуется custom checkout — Hydrogen + Remix loader дают полный контроль",{"type":32,"tag":33,"props":768,"children":769},{},[770],{"type":37,"value":771},"На нашем проекте решающие факторы были TTFB + dev velocity. Migration cost 180 часов (не превышала бюджет на 120%), но улучшение TTFB привело к growth conversion rate, который окупился за 3 месяца. Оставайся на Liquid — velocity team'ы снижалась бы, feature backlog рос бы на 40%+ за полугодие.",{"type":32,"tag":40,"props":773,"children":775},{"id":774},"процесс-обучения-и-адаптация-teamы",[776],{"type":37,"value":777},"Процесс обучения и адаптация team'ы",{"type":32,"tag":33,"props":779,"children":780},{},[781],{"type":37,"value":782},"При переходе на Hydrogen адаптация team'ы оказалась критичнее самой технической миграции. Из 3 разработчиков, работавших с Liquid, 2 не знали React. Первые 6 недель velocity упала на 30% (простой product card-компонент: 2 часа в Liquid, 5 часов в Hydrogen). На 8-й неделе momentum развернулся — благодаря type safety и переиспользуемости компонентов новые feature'ы стали разрабатываться на 35% быстрее, чем в Liquid.",{"type":32,"tag":33,"props":784,"children":785},{},[786],{"type":37,"value":787},"Критический шаг: документация Hydrogen от Shopify хороша, но production edge case'ы не покрыты (например, multi-currency + geo-redirect logic). Вместо поиска в Community Discord мы создали свою pattern library (3 дополнительные недели работы). На следующих проектах это сократило время миграции с 180 до 90 часов.",{"type":32,"tag":789,"props":790,"children":791},"hr",{},[],{"type":32,"tag":33,"props":793,"children":794},{},[795],{"type":37,"value":796},"В треугольнике TTFB—dev velocity—migration cost решение в пользу Hydrogen принимается по цифрам. Простота Liquid привлекательна, но TTFB-узкое место напрямую влияет на conversion. Кривая обучения Hydrogen существует, но комбинация TypeScript + Remix многократно усиливает dev velocity в medium term. Принимайте решение по метрикам: если PageSpeed Insights показывает TTFB >600ms, ROI миграции положительный за 3–6 месяцев.",{"type":32,"tag":798,"props":799,"children":800},"style",{},[801],{"type":37,"value":802},"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":176,"depth":176,"links":804},[805,806,809,810,813,814],{"id":42,"depth":118,"text":45},{"id":63,"depth":118,"text":66,"children":807},[808],{"id":479,"depth":176,"text":482},{"id":490,"depth":118,"text":493},{"id":672,"depth":118,"text":675,"children":811},[812],{"id":688,"depth":176,"text":691},{"id":699,"depth":118,"text":702},{"id":774,"depth":118,"text":777},"markdown","content:ru:tech:shopify-hydrogen-vs-liquid-s-veritemellikarar.md","content","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-s-veritemellikarar.md","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-s-veritemellikarar","md",1786860295342]