[{"data":1,"prerenderedAt":1293},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-vybor-po-dannym":13},{"i18nKey":4,"paths":5},"tech-002-2026-07",{"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-metrics","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-metrics","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-vybor-po-dannym","\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":1287,"_id":1288,"_source":1289,"_file":1290,"_stem":1291,"_extension":1292},"tech",false,"","Shopify Hydrogen vs Liquid: На каких числах мы приняли решение","TTFB 680ms vs 120ms, время сборки 8мин vs 45сек, стоимость миграции $12K. Анализируем данные, повлиявшие на переход на Hydrogen.","2026-07-07",[21,22,23,24,25],"shopify-hydrogen","liquid","web-performance","headless-commerce","ttfb",8,"Roibase",{"type":29,"children":30,"toc":1278},"root",[31,39,46,51,181,186,459,464,470,490,498,513,525,612,626,632,637,763,768,778,784,789,912,917,1090,1095,1101,1106,1114,1132,1140,1158,1163,1169,1174,1218,1224,1229,1262,1267,1272],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Когда Shopify Hydrogen достиг статуса stable в конце 2024 года, мы оценили целесообразность миграции существующей Liquid-темы клиента на Hydrogen. Решение принимали исключительно на числах: TTFB, время сборки, dev velocity, стоимость миграции. Результат: миграция реализована, production запущен через 3 месяца. В этом материале покажем, какие метрики определили выбор.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"ttfb-стоимость-серверного-рендеринга",[44],{"type":37,"value":45},"TTFB: Стоимость серверного рендеринга",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Liquid-тема в production выдавала среднее TTFB 680ms (данные Shopify Analytics, средние значения за 30 дней). Распределение по типам страниц:",{"type":32,"tag":52,"props":53,"children":54},"table",{},[55,84],{"type":32,"tag":56,"props":57,"children":58},"thead",{},[59],{"type":32,"tag":60,"props":61,"children":62},"tr",{},[63,69,74,79],{"type":32,"tag":64,"props":65,"children":66},"th",{},[67],{"type":37,"value":68},"Тип страницы",{"type":32,"tag":64,"props":70,"children":71},{},[72],{"type":37,"value":73},"Liquid TTFB",{"type":32,"tag":64,"props":75,"children":76},{},[77],{"type":37,"value":78},"Hydrogen TTFB",{"type":32,"tag":64,"props":80,"children":81},{},[82],{"type":37,"value":83},"Разница",{"type":32,"tag":85,"props":86,"children":87},"tbody",{},[88,112,135,158],{"type":32,"tag":60,"props":89,"children":90},{},[91,97,102,107],{"type":32,"tag":92,"props":93,"children":94},"td",{},[95],{"type":37,"value":96},"Home",{"type":32,"tag":92,"props":98,"children":99},{},[100],{"type":37,"value":101},"520ms",{"type":32,"tag":92,"props":103,"children":104},{},[105],{"type":37,"value":106},"95ms",{"type":32,"tag":92,"props":108,"children":109},{},[110],{"type":37,"value":111},"-425ms",{"type":32,"tag":60,"props":113,"children":114},{},[115,120,125,130],{"type":32,"tag":92,"props":116,"children":117},{},[118],{"type":37,"value":119},"Collection",{"type":32,"tag":92,"props":121,"children":122},{},[123],{"type":37,"value":124},"780ms",{"type":32,"tag":92,"props":126,"children":127},{},[128],{"type":37,"value":129},"140ms",{"type":32,"tag":92,"props":131,"children":132},{},[133],{"type":37,"value":134},"-640ms",{"type":32,"tag":60,"props":136,"children":137},{},[138,143,148,153],{"type":32,"tag":92,"props":139,"children":140},{},[141],{"type":37,"value":142},"Product",{"type":32,"tag":92,"props":144,"children":145},{},[146],{"type":37,"value":147},"650ms",{"type":32,"tag":92,"props":149,"children":150},{},[151],{"type":37,"value":152},"110ms",{"type":32,"tag":92,"props":154,"children":155},{},[156],{"type":37,"value":157},"-540ms",{"type":32,"tag":60,"props":159,"children":160},{},[161,166,171,176],{"type":32,"tag":92,"props":162,"children":163},{},[164],{"type":37,"value":165},"Cart",{"type":32,"tag":92,"props":167,"children":168},{},[169],{"type":37,"value":170},"890ms",{"type":32,"tag":92,"props":172,"children":173},{},[174],{"type":37,"value":175},"150ms",{"type":32,"tag":92,"props":177,"children":178},{},[179],{"type":37,"value":180},"-740ms",{"type":32,"tag":33,"props":182,"children":183},{},[184],{"type":37,"value":185},"Hydrogen-движок SSR, работающий на edge, независимо от типа страницы выдавал ~120ms. В Liquid каждый запрос к origin инициирует серверный рендеринг, в Hydrogen — loader'ы Remix выполняются на edge-узлах Oxygen.",{"type":32,"tag":187,"props":188,"children":192},"pre",{"className":189,"code":190,"language":191,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Пример loader в Hydrogen — выполняется на edge Oxygen\nexport async function loader({context, params}: LoaderFunctionArgs) {\n  const {storefront} = context;\n  const {handle} = params;\n  \n  const {product} = await storefront.query(PRODUCT_QUERY, {\n    variables: {handle},\n  });\n  \n  return json({product});\n}\n","typescript",[193],{"type":32,"tag":194,"props":195,"children":196},"code",{"__ignoreMap":16},[197,209,277,312,342,351,406,415,423,431,450],{"type":32,"tag":198,"props":199,"children":202},"span",{"class":200,"line":201},"line",1,[203],{"type":32,"tag":198,"props":204,"children":206},{"style":205},"--shiki-default:#6A737D",[207],{"type":37,"value":208},"\u002F\u002F Пример loader в Hydrogen — выполняется на edge Oxygen\n",{"type":32,"tag":198,"props":210,"children":212},{"class":200,"line":211},2,[213,219,224,229,235,241,247,252,257,262,267,272],{"type":32,"tag":198,"props":214,"children":216},{"style":215},"--shiki-default:#F97583",[217],{"type":37,"value":218},"export",{"type":32,"tag":198,"props":220,"children":221},{"style":215},[222],{"type":37,"value":223}," async",{"type":32,"tag":198,"props":225,"children":226},{"style":215},[227],{"type":37,"value":228}," function",{"type":32,"tag":198,"props":230,"children":232},{"style":231},"--shiki-default:#B392F0",[233],{"type":37,"value":234}," loader",{"type":32,"tag":198,"props":236,"children":238},{"style":237},"--shiki-default:#E1E4E8",[239],{"type":37,"value":240},"({",{"type":32,"tag":198,"props":242,"children":244},{"style":243},"--shiki-default:#FFAB70",[245],{"type":37,"value":246},"context",{"type":32,"tag":198,"props":248,"children":249},{"style":237},[250],{"type":37,"value":251},", ",{"type":32,"tag":198,"props":253,"children":254},{"style":243},[255],{"type":37,"value":256},"params",{"type":32,"tag":198,"props":258,"children":259},{"style":237},[260],{"type":37,"value":261},"}",{"type":32,"tag":198,"props":263,"children":264},{"style":215},[265],{"type":37,"value":266},":",{"type":32,"tag":198,"props":268,"children":269},{"style":231},[270],{"type":37,"value":271}," LoaderFunctionArgs",{"type":32,"tag":198,"props":273,"children":274},{"style":237},[275],{"type":37,"value":276},") {\n",{"type":32,"tag":198,"props":278,"children":280},{"class":200,"line":279},3,[281,286,291,297,302,307],{"type":32,"tag":198,"props":282,"children":283},{"style":215},[284],{"type":37,"value":285},"  const",{"type":32,"tag":198,"props":287,"children":288},{"style":237},[289],{"type":37,"value":290}," {",{"type":32,"tag":198,"props":292,"children":294},{"style":293},"--shiki-default:#79B8FF",[295],{"type":37,"value":296},"storefront",{"type":32,"tag":198,"props":298,"children":299},{"style":237},[300],{"type":37,"value":301},"} ",{"type":32,"tag":198,"props":303,"children":304},{"style":215},[305],{"type":37,"value":306},"=",{"type":32,"tag":198,"props":308,"children":309},{"style":237},[310],{"type":37,"value":311}," context;\n",{"type":32,"tag":198,"props":313,"children":315},{"class":200,"line":314},4,[316,320,324,329,333,337],{"type":32,"tag":198,"props":317,"children":318},{"style":215},[319],{"type":37,"value":285},{"type":32,"tag":198,"props":321,"children":322},{"style":237},[323],{"type":37,"value":290},{"type":32,"tag":198,"props":325,"children":326},{"style":293},[327],{"type":37,"value":328},"handle",{"type":32,"tag":198,"props":330,"children":331},{"style":237},[332],{"type":37,"value":301},{"type":32,"tag":198,"props":334,"children":335},{"style":215},[336],{"type":37,"value":306},{"type":32,"tag":198,"props":338,"children":339},{"style":237},[340],{"type":37,"value":341}," params;\n",{"type":32,"tag":198,"props":343,"children":345},{"class":200,"line":344},5,[346],{"type":32,"tag":198,"props":347,"children":348},{"style":237},[349],{"type":37,"value":350},"  \n",{"type":32,"tag":198,"props":352,"children":354},{"class":200,"line":353},6,[355,359,363,368,372,376,381,386,391,396,401],{"type":32,"tag":198,"props":356,"children":357},{"style":215},[358],{"type":37,"value":285},{"type":32,"tag":198,"props":360,"children":361},{"style":237},[362],{"type":37,"value":290},{"type":32,"tag":198,"props":364,"children":365},{"style":293},[366],{"type":37,"value":367},"product",{"type":32,"tag":198,"props":369,"children":370},{"style":237},[371],{"type":37,"value":301},{"type":32,"tag":198,"props":373,"children":374},{"style":215},[375],{"type":37,"value":306},{"type":32,"tag":198,"props":377,"children":378},{"style":215},[379],{"type":37,"value":380}," await",{"type":32,"tag":198,"props":382,"children":383},{"style":237},[384],{"type":37,"value":385}," storefront.",{"type":32,"tag":198,"props":387,"children":388},{"style":231},[389],{"type":37,"value":390},"query",{"type":32,"tag":198,"props":392,"children":393},{"style":237},[394],{"type":37,"value":395},"(",{"type":32,"tag":198,"props":397,"children":398},{"style":293},[399],{"type":37,"value":400},"PRODUCT_QUERY",{"type":32,"tag":198,"props":402,"children":403},{"style":237},[404],{"type":37,"value":405},", {\n",{"type":32,"tag":198,"props":407,"children":409},{"class":200,"line":408},7,[410],{"type":32,"tag":198,"props":411,"children":412},{"style":237},[413],{"type":37,"value":414},"    variables: {handle},\n",{"type":32,"tag":198,"props":416,"children":417},{"class":200,"line":26},[418],{"type":32,"tag":198,"props":419,"children":420},{"style":237},[421],{"type":37,"value":422},"  });\n",{"type":32,"tag":198,"props":424,"children":426},{"class":200,"line":425},9,[427],{"type":32,"tag":198,"props":428,"children":429},{"style":237},[430],{"type":37,"value":350},{"type":32,"tag":198,"props":432,"children":434},{"class":200,"line":433},10,[435,440,445],{"type":32,"tag":198,"props":436,"children":437},{"style":215},[438],{"type":37,"value":439},"  return",{"type":32,"tag":198,"props":441,"children":442},{"style":231},[443],{"type":37,"value":444}," json",{"type":32,"tag":198,"props":446,"children":447},{"style":237},[448],{"type":37,"value":449},"({product});\n",{"type":32,"tag":198,"props":451,"children":453},{"class":200,"line":452},11,[454],{"type":32,"tag":198,"props":455,"children":456},{"style":237},[457],{"type":37,"value":458},"}\n",{"type":32,"tag":33,"props":460,"children":461},{},[462],{"type":37,"value":463},"При попадании в cache TTFB падает до 40ms (с дополнительным слоем кэша через Cloudflare Workers KV). В Liquid аналогичная оптимизация требует полагаться на CDN Shopify, но для динамического контента (корзина, персонализация) это недостаточно.",{"type":32,"tag":40,"props":465,"children":467},{"id":466},"время-сборки-тормоз-разработки",[468],{"type":37,"value":469},"Время сборки: Тормоз разработки",{"type":32,"tag":33,"props":471,"children":472},{},[473,475,481,483,488],{"type":37,"value":474},"Сборка Liquid-темы в production (CI\u002FCD pipeline) занимала в среднем ",{"type":32,"tag":476,"props":477,"children":478},"strong",{},[479],{"type":37,"value":480},"8 минут 15 секунд",{"type":37,"value":482}," — загрузка ассетов Theme Kit, минификация, deploy на Shopify. Сборка Hydrogen: ",{"type":32,"tag":476,"props":484,"children":485},{},[486],{"type":37,"value":487},"45 секунд",{"type":37,"value":489}," — Vite build + Oxygen deploy.",{"type":32,"tag":33,"props":491,"children":492},{},[493],{"type":32,"tag":476,"props":494,"children":495},{},[496],{"type":37,"value":497},"В dev-среде:",{"type":32,"tag":499,"props":500,"children":501},"ul",{},[502,508],{"type":32,"tag":503,"props":504,"children":505},"li",{},[506],{"type":37,"value":507},"Liquid: нет hot reload, каждое изменение требует перезагрузки темы (~12сек)",{"type":32,"tag":503,"props":509,"children":510},{},[511],{"type":37,"value":512},"Hydrogen: HMR доставляет изменения в браузер мгновенно (\u003C200ms)",{"type":32,"tag":33,"props":514,"children":515},{},[516,518,523],{"type":37,"value":517},"Отзыв разработчиков: при 20 изменениях в feature branch'е общее время ожидания в Liquid — 4 минуты, в Hydrogen — 4 секунды. Рост dev velocity на ",{"type":32,"tag":476,"props":519,"children":520},{},[521],{"type":37,"value":522},"98%",{"type":37,"value":524},".",{"type":32,"tag":187,"props":526,"children":530},{"className":527,"code":528,"language":529,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","# Запуск dev-сервера Hydrogen\nnpm run dev\n# Vite готов за 200ms, HMR активен\n\n# Разработка Liquid-темы\nshopify theme serve\n# Ожидание загрузки темы 8-12сек\n","bash",[531],{"type":32,"tag":194,"props":532,"children":533},{"__ignoreMap":16},[534,542,561,569,578,586,604],{"type":32,"tag":198,"props":535,"children":536},{"class":200,"line":201},[537],{"type":32,"tag":198,"props":538,"children":539},{"style":205},[540],{"type":37,"value":541},"# Запуск dev-сервера Hydrogen\n",{"type":32,"tag":198,"props":543,"children":544},{"class":200,"line":211},[545,550,556],{"type":32,"tag":198,"props":546,"children":547},{"style":231},[548],{"type":37,"value":549},"npm",{"type":32,"tag":198,"props":551,"children":553},{"style":552},"--shiki-default:#9ECBFF",[554],{"type":37,"value":555}," run",{"type":32,"tag":198,"props":557,"children":558},{"style":552},[559],{"type":37,"value":560}," dev\n",{"type":32,"tag":198,"props":562,"children":563},{"class":200,"line":279},[564],{"type":32,"tag":198,"props":565,"children":566},{"style":205},[567],{"type":37,"value":568},"# Vite готов за 200ms, HMR активен\n",{"type":32,"tag":198,"props":570,"children":571},{"class":200,"line":314},[572],{"type":32,"tag":198,"props":573,"children":575},{"emptyLinePlaceholder":574},true,[576],{"type":37,"value":577},"\n",{"type":32,"tag":198,"props":579,"children":580},{"class":200,"line":344},[581],{"type":32,"tag":198,"props":582,"children":583},{"style":205},[584],{"type":37,"value":585},"# Разработка Liquid-темы\n",{"type":32,"tag":198,"props":587,"children":588},{"class":200,"line":353},[589,594,599],{"type":32,"tag":198,"props":590,"children":591},{"style":231},[592],{"type":37,"value":593},"shopify",{"type":32,"tag":198,"props":595,"children":596},{"style":552},[597],{"type":37,"value":598}," theme",{"type":32,"tag":198,"props":600,"children":601},{"style":552},[602],{"type":37,"value":603}," serve\n",{"type":32,"tag":198,"props":605,"children":606},{"class":200,"line":408},[607],{"type":32,"tag":198,"props":608,"children":609},{"style":205},[610],{"type":37,"value":611},"# Ожидание загрузки темы 8-12сек\n",{"type":32,"tag":33,"props":613,"children":614},{},[615,624],{"type":32,"tag":616,"props":617,"children":621},"a",{"href":618,"rel":619},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[620],"nofollow",[622],{"type":37,"value":623},"Headless Commerce",{"type":37,"value":625}," архитектура делает такие оптимизации возможными — фронтенд получает данные через Shopify Storefront API, сборка независима.",{"type":32,"tag":40,"props":627,"children":629},{"id":628},"стоимость-миграции-расчет-технического-долга",[630],{"type":37,"value":631},"Стоимость миграции: Расчет технического долга",{"type":32,"tag":33,"props":633,"children":634},{},[635],{"type":37,"value":636},"Разбили миграцию по статьям:",{"type":32,"tag":52,"props":638,"children":639},{},[640,661],{"type":32,"tag":56,"props":641,"children":642},{},[643],{"type":32,"tag":60,"props":644,"children":645},{},[646,651,656],{"type":32,"tag":64,"props":647,"children":648},{},[649],{"type":37,"value":650},"Статья",{"type":32,"tag":64,"props":652,"children":653},{},[654],{"type":37,"value":655},"Часов",{"type":32,"tag":64,"props":657,"children":658},{},[659],{"type":37,"value":660},"Стоимость ($)",{"type":32,"tag":85,"props":662,"children":663},{},[664,682,700,718,736],{"type":32,"tag":60,"props":665,"children":666},{},[667,672,677],{"type":32,"tag":92,"props":668,"children":669},{},[670],{"type":37,"value":671},"Анализ Liquid-темы",{"type":32,"tag":92,"props":673,"children":674},{},[675],{"type":37,"value":676},"16",{"type":32,"tag":92,"props":678,"children":679},{},[680],{"type":37,"value":681},"1,600",{"type":32,"tag":60,"props":683,"children":684},{},[685,690,695],{"type":32,"tag":92,"props":686,"children":687},{},[688],{"type":37,"value":689},"Маппинг компонентов (35 Liquid snippet → React)",{"type":32,"tag":92,"props":691,"children":692},{},[693],{"type":37,"value":694},"80",{"type":32,"tag":92,"props":696,"children":697},{},[698],{"type":37,"value":699},"8,000",{"type":32,"tag":60,"props":701,"children":702},{},[703,708,713],{"type":32,"tag":92,"props":704,"children":705},{},[706],{"type":37,"value":707},"Миграция Shopify API (REST → Storefront API)",{"type":32,"tag":92,"props":709,"children":710},{},[711],{"type":37,"value":712},"24",{"type":32,"tag":92,"props":714,"children":715},{},[716],{"type":37,"value":717},"2,400",{"type":32,"tag":60,"props":719,"children":720},{},[721,726,731],{"type":32,"tag":92,"props":722,"children":723},{},[724],{"type":37,"value":725},"Тестирование + QA",{"type":32,"tag":92,"props":727,"children":728},{},[729],{"type":37,"value":730},"12",{"type":32,"tag":92,"props":732,"children":733},{},[734],{"type":37,"value":735},"1,200",{"type":32,"tag":60,"props":737,"children":738},{},[739,747,755],{"type":32,"tag":92,"props":740,"children":741},{},[742],{"type":32,"tag":476,"props":743,"children":744},{},[745],{"type":37,"value":746},"Итого",{"type":32,"tag":92,"props":748,"children":749},{},[750],{"type":32,"tag":476,"props":751,"children":752},{},[753],{"type":37,"value":754},"132",{"type":32,"tag":92,"props":756,"children":757},{},[758],{"type":32,"tag":476,"props":759,"children":760},{},[761],{"type":37,"value":762},"$13,200",{"type":32,"tag":33,"props":764,"children":765},{},[766],{"type":37,"value":767},"Дополнительно: Oxygen hosting (идет с Shopify Plus), опциональный слой cache через Cloudflare Workers ($5\u002Fмесяц).",{"type":32,"tag":33,"props":769,"children":770},{},[771,776],{"type":32,"tag":476,"props":772,"children":773},{},[774],{"type":37,"value":775},"Трейдофф:",{"type":37,"value":777}," альтернативная стоимость остаться на Liquid — 120 часов в год dev inefficiency (из расчета выше на разнице build time) × $100\u002Fчас = $12,000. К концу первого года стоимость миграции амортизируется.",{"type":32,"tag":40,"props":779,"children":781},{"id":780},"runtime-производительность-влияние-на-core-web-vitals",[782],{"type":37,"value":783},"Runtime производительность: Влияние на Core Web Vitals",{"type":32,"tag":33,"props":785,"children":786},{},[787],{"type":37,"value":788},"Field data (Chrome User Experience Report, 28 дней):",{"type":32,"tag":52,"props":790,"children":791},{},[792,817],{"type":32,"tag":56,"props":793,"children":794},{},[795],{"type":32,"tag":60,"props":796,"children":797},{},[798,803,808,813],{"type":32,"tag":64,"props":799,"children":800},{},[801],{"type":37,"value":802},"Метрика",{"type":32,"tag":64,"props":804,"children":805},{},[806],{"type":37,"value":807},"Liquid (p75)",{"type":32,"tag":64,"props":809,"children":810},{},[811],{"type":37,"value":812},"Hydrogen (p75)",{"type":32,"tag":64,"props":814,"children":815},{},[816],{"type":37,"value":83},{"type":32,"tag":85,"props":818,"children":819},{},[820,843,866,889],{"type":32,"tag":60,"props":821,"children":822},{},[823,828,833,838],{"type":32,"tag":92,"props":824,"children":825},{},[826],{"type":37,"value":827},"LCP",{"type":32,"tag":92,"props":829,"children":830},{},[831],{"type":37,"value":832},"2,840ms",{"type":32,"tag":92,"props":834,"children":835},{},[836],{"type":37,"value":837},"1,620ms",{"type":32,"tag":92,"props":839,"children":840},{},[841],{"type":37,"value":842},"-43%",{"type":32,"tag":60,"props":844,"children":845},{},[846,851,856,861],{"type":32,"tag":92,"props":847,"children":848},{},[849],{"type":37,"value":850},"FID",{"type":32,"tag":92,"props":852,"children":853},{},[854],{"type":37,"value":855},"180ms",{"type":32,"tag":92,"props":857,"children":858},{},[859],{"type":37,"value":860},"80ms",{"type":32,"tag":92,"props":862,"children":863},{},[864],{"type":37,"value":865},"-56%",{"type":32,"tag":60,"props":867,"children":868},{},[869,874,879,884],{"type":32,"tag":92,"props":870,"children":871},{},[872],{"type":37,"value":873},"CLS",{"type":32,"tag":92,"props":875,"children":876},{},[877],{"type":37,"value":878},"0.18",{"type":32,"tag":92,"props":880,"children":881},{},[882],{"type":37,"value":883},"0.04",{"type":32,"tag":92,"props":885,"children":886},{},[887],{"type":37,"value":888},"-78%",{"type":32,"tag":60,"props":890,"children":891},{},[892,897,902,907],{"type":32,"tag":92,"props":893,"children":894},{},[895],{"type":37,"value":896},"TTFB",{"type":32,"tag":92,"props":898,"children":899},{},[900],{"type":37,"value":901},"680ms",{"type":32,"tag":92,"props":903,"children":904},{},[905],{"type":37,"value":906},"120ms",{"type":32,"tag":92,"props":908,"children":909},{},[910],{"type":37,"value":911},"-82%",{"type":32,"tag":33,"props":913,"children":914},{},[915],{"type":37,"value":916},"React Suspense + streaming SSR в Hydrogen снижают LCP. Lazy-loaded компоненты исключены из initial bundle, критический путь сокращен.",{"type":32,"tag":187,"props":918,"children":920},{"className":189,"code":919,"language":191,"meta":16,"style":16},"\u002F\u002F Lazy-loading рекомендаций продуктов через Suspense\nimport {Suspense} from 'react';\nconst ProductRecommendations = lazy(() => import('.\u002FProductRecommendations'));\n\n\u003CSuspense fallback={\u003CRecommendationSkeleton \u002F>}>\n  \u003CProductRecommendations productId={product.id} \u002F>\n\u003C\u002FSuspense>\n",[921],{"type":32,"tag":194,"props":922,"children":923},{"__ignoreMap":16},[924,932,960,1012,1019,1046,1073],{"type":32,"tag":198,"props":925,"children":926},{"class":200,"line":201},[927],{"type":32,"tag":198,"props":928,"children":929},{"style":205},[930],{"type":37,"value":931},"\u002F\u002F Lazy-loading рекомендаций продуктов через Suspense\n",{"type":32,"tag":198,"props":933,"children":934},{"class":200,"line":211},[935,940,945,950,955],{"type":32,"tag":198,"props":936,"children":937},{"style":215},[938],{"type":37,"value":939},"import",{"type":32,"tag":198,"props":941,"children":942},{"style":237},[943],{"type":37,"value":944}," {Suspense} ",{"type":32,"tag":198,"props":946,"children":947},{"style":215},[948],{"type":37,"value":949},"from",{"type":32,"tag":198,"props":951,"children":952},{"style":552},[953],{"type":37,"value":954}," 'react'",{"type":32,"tag":198,"props":956,"children":957},{"style":237},[958],{"type":37,"value":959},";\n",{"type":32,"tag":198,"props":961,"children":962},{"class":200,"line":279},[963,968,973,978,983,988,993,998,1002,1007],{"type":32,"tag":198,"props":964,"children":965},{"style":215},[966],{"type":37,"value":967},"const",{"type":32,"tag":198,"props":969,"children":970},{"style":293},[971],{"type":37,"value":972}," ProductRecommendations",{"type":32,"tag":198,"props":974,"children":975},{"style":215},[976],{"type":37,"value":977}," =",{"type":32,"tag":198,"props":979,"children":980},{"style":231},[981],{"type":37,"value":982}," lazy",{"type":32,"tag":198,"props":984,"children":985},{"style":237},[986],{"type":37,"value":987},"(() ",{"type":32,"tag":198,"props":989,"children":990},{"style":215},[991],{"type":37,"value":992},"=>",{"type":32,"tag":198,"props":994,"children":995},{"style":215},[996],{"type":37,"value":997}," import",{"type":32,"tag":198,"props":999,"children":1000},{"style":237},[1001],{"type":37,"value":395},{"type":32,"tag":198,"props":1003,"children":1004},{"style":552},[1005],{"type":37,"value":1006},"'.\u002FProductRecommendations'",{"type":32,"tag":198,"props":1008,"children":1009},{"style":237},[1010],{"type":37,"value":1011},"));\n",{"type":32,"tag":198,"props":1013,"children":1014},{"class":200,"line":314},[1015],{"type":32,"tag":198,"props":1016,"children":1017},{"emptyLinePlaceholder":574},[1018],{"type":37,"value":577},{"type":32,"tag":198,"props":1020,"children":1021},{"class":200,"line":344},[1022,1027,1032,1036,1041],{"type":32,"tag":198,"props":1023,"children":1024},{"style":215},[1025],{"type":37,"value":1026},"\u003C",{"type":32,"tag":198,"props":1028,"children":1029},{"style":237},[1030],{"type":37,"value":1031},"Suspense fallback",{"type":32,"tag":198,"props":1033,"children":1034},{"style":215},[1035],{"type":37,"value":306},{"type":32,"tag":198,"props":1037,"children":1038},{"style":237},[1039],{"type":37,"value":1040},"{\u003CRecommendationSkeleton \u002F>}",{"type":32,"tag":198,"props":1042,"children":1043},{"style":215},[1044],{"type":37,"value":1045},">\n",{"type":32,"tag":198,"props":1047,"children":1048},{"class":200,"line":353},[1049,1054,1059,1063,1068],{"type":32,"tag":198,"props":1050,"children":1051},{"style":215},[1052],{"type":37,"value":1053},"  \u003C",{"type":32,"tag":198,"props":1055,"children":1056},{"style":237},[1057],{"type":37,"value":1058},"ProductRecommendations productId",{"type":32,"tag":198,"props":1060,"children":1061},{"style":215},[1062],{"type":37,"value":306},{"type":32,"tag":198,"props":1064,"children":1065},{"style":237},[1066],{"type":37,"value":1067},"{product.id} ",{"type":32,"tag":198,"props":1069,"children":1070},{"style":215},[1071],{"type":37,"value":1072},"\u002F>\n",{"type":32,"tag":198,"props":1074,"children":1075},{"class":200,"line":408},[1076,1081,1086],{"type":32,"tag":198,"props":1077,"children":1078},{"style":215},[1079],{"type":37,"value":1080},"\u003C\u002F",{"type":32,"tag":198,"props":1082,"children":1083},{"style":237},[1084],{"type":37,"value":1085},"Suspense",{"type":32,"tag":198,"props":1087,"children":1088},{"style":215},[1089],{"type":37,"value":1045},{"type":32,"tag":33,"props":1091,"children":1092},{},[1093],{"type":37,"value":1094},"Падение CLS: в Liquid динамический контент (drawer корзины, промо) вызывал смещение макета, в Hydrogen это устранено skeleton-компонентами.",{"type":32,"tag":40,"props":1096,"children":1098},{"id":1097},"опыт-разработчика-обратная-связь-команды",[1099],{"type":37,"value":1100},"Опыт разработчика: Обратная связь команды",{"type":32,"tag":33,"props":1102,"children":1103},{},[1104],{"type":37,"value":1105},"Опрос dev-команды через 60 дней после миграции (5 разработчиков):",{"type":32,"tag":33,"props":1107,"children":1108},{},[1109],{"type":32,"tag":476,"props":1110,"children":1111},{},[1112],{"type":37,"value":1113},"Основные боли в Liquid:",{"type":32,"tag":499,"props":1115,"children":1116},{},[1117,1122,1127],{"type":32,"tag":503,"props":1118,"children":1119},{},[1120],{"type":37,"value":1121},"80% «Долгий процесс отладки»",{"type":32,"tag":503,"props":1123,"children":1124},{},[1125],{"type":37,"value":1126},"60% «Отсутствие современного инструментария (TypeScript, hot reload)»",{"type":32,"tag":503,"props":1128,"children":1129},{},[1130],{"type":37,"value":1131},"40% «Нет переиспользования компонентов»",{"type":32,"tag":33,"props":1133,"children":1134},{},[1135],{"type":32,"tag":476,"props":1136,"children":1137},{},[1138],{"type":37,"value":1139},"Основные плюсы Hydrogen:",{"type":32,"tag":499,"props":1141,"children":1142},{},[1143,1148,1153],{"type":32,"tag":503,"props":1144,"children":1145},{},[1146],{"type":37,"value":1147},"100% «TypeScript + IDE autocomplete»",{"type":32,"tag":503,"props":1149,"children":1150},{},[1151],{"type":37,"value":1152},"80% «Dev-скорость с HMR»",{"type":32,"tag":503,"props":1154,"children":1155},{},[1156],{"type":37,"value":1157},"60% «Доступ к экосистеме React»",{"type":32,"tag":33,"props":1159,"children":1160},{},[1161],{"type":37,"value":1162},"Критика: неполная документация Hydrogen (40%), крутая кривая обучения Remix router'а Shopify (20%).",{"type":32,"tag":40,"props":1164,"children":1166},{"id":1165},"когда-остаться-на-liquid-имеет-смысл",[1167],{"type":37,"value":1168},"Когда остаться на Liquid — имеет смысл",{"type":32,"tag":33,"props":1170,"children":1171},{},[1172],{"type":37,"value":1173},"Отказ от Hydrogen целесообразен в таких сценариях:",{"type":32,"tag":1175,"props":1176,"children":1177},"ol",{},[1178,1188,1198,1208],{"type":32,"tag":503,"props":1179,"children":1180},{},[1181,1186],{"type":32,"tag":476,"props":1182,"children":1183},{},[1184],{"type":37,"value":1185},"Трафик \u003C10K сеансов\u002Fмесяц:",{"type":37,"value":1187}," разница TTFB не ощущается UX, ROI миграции отсутствует.",{"type":32,"tag":503,"props":1189,"children":1190},{},[1191,1196],{"type":32,"tag":476,"props":1192,"children":1193},{},[1194],{"type":37,"value":1195},"Тема не кастомная:",{"type":37,"value":1197}," на готовой теме кастомизация минимальна, затраты переоценивают выгоду.",{"type":32,"tag":503,"props":1199,"children":1200},{},[1201,1206],{"type":32,"tag":476,"props":1202,"children":1203},{},[1204],{"type":37,"value":1205},"Dev-team не знает React:",{"type":37,"value":1207}," цена обучения + адаптация растягивает миграцию на 2-3x дольше.",{"type":32,"tag":503,"props":1209,"children":1210},{},[1211,1216],{"type":32,"tag":476,"props":1212,"children":1213},{},[1214],{"type":37,"value":1215},"Не Shopify Plus:",{"type":37,"value":1217}," Oxygen hosting идет в комплекте с Plus; для Basic\u002FAdvanced планов добавится стоимость.",{"type":32,"tag":40,"props":1219,"children":1221},{"id":1220},"после-решения-стратегия-rollout-в-production",[1222],{"type":37,"value":1223},"После решения: Стратегия rollout в production",{"type":32,"tag":33,"props":1225,"children":1226},{},[1227],{"type":37,"value":1228},"Трехэтапный выход:",{"type":32,"tag":1175,"props":1230,"children":1231},{},[1232,1242,1252],{"type":32,"tag":503,"props":1233,"children":1234},{},[1235,1240],{"type":32,"tag":476,"props":1236,"children":1237},{},[1238],{"type":37,"value":1239},"Beta-среда:",{"type":37,"value":1241}," Hydrogen-сайт развернут на Vercel, внутреннее тестирование 2 недели (QA + stakeholders).",{"type":32,"tag":503,"props":1243,"children":1244},{},[1245,1250],{"type":32,"tag":476,"props":1246,"children":1247},{},[1248],{"type":37,"value":1249},"Canary release:",{"type":37,"value":1251}," 10% трафика направлен на Hydrogen (Cloudflare Workers с A\u002FB split), delta конверсии +2.3%.",{"type":32,"tag":503,"props":1253,"children":1254},{},[1255,1260],{"type":32,"tag":476,"props":1256,"children":1257},{},[1258],{"type":37,"value":1259},"Полный выход:",{"type":37,"value":1261}," через 14 дней 100% трафика перемещен на Hydrogen, Liquid-тема остается резервом.",{"type":32,"tag":33,"props":1263,"children":1264},{},[1265],{"type":37,"value":1266},"Метрика post-launch: конверсия checkout 3.8% → 4.1% (влияние снижения TTFB + улучшение CLS). Годовой эффект на выручку: $180K (средний AOV $120, 15K заказов\u002Fмесяц).",{"type":32,"tag":33,"props":1268,"children":1269},{},[1270],{"type":37,"value":1271},"Решение выбрать Hydrogen подтвердилось числами: TTFB упал на 82%, dev velocity вырос на 98%, затраты миграции амортизированы за первый год. Причина — не только performance, но и современный dev experience + гибкость composable архитектуры. Если вы в экосистеме Shopify и хотите перейти на headless, Hydrogen — единственный обоснованный выбор.",{"type":32,"tag":1273,"props":1274,"children":1275},"style",{},[1276],{"type":37,"value":1277},"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":279,"depth":279,"links":1279},[1280,1281,1282,1283,1284,1285,1286],{"id":42,"depth":211,"text":45},{"id":466,"depth":211,"text":469},{"id":628,"depth":211,"text":631},{"id":780,"depth":211,"text":783},{"id":1097,"depth":211,"text":1100},{"id":1165,"depth":211,"text":1168},{"id":1220,"depth":211,"text":1223},"markdown","content:ru:tech:shopify-hydrogen-vs-liquid-vybor-po-dannym.md","content","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-vybor-po-dannym.md","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-vybor-po-dannym","md",1785103548033]