[{"data":1,"prerenderedAt":2016},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-razlastirilmis-metrikler":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":14,"_dir":15,"_draft":16,"_partial":16,"_locale":17,"title":18,"description":19,"publishedAt":20,"modifiedAt":20,"category":15,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":2010,"_id":2011,"_source":2012,"_file":2013,"_stem":2014,"_extension":2015},"\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-razlastirilmis-metrikler","tech",false,"","Shopify Hydrogen vs Liquid: Данные, на основе которых мы приняли решение","TTFB, время сборки, velocity разработчиков и стоимость миграции. Как мы перешли на Hydrogen — реальные цифры, компромиссы, ROI за 6–9 месяцев.","2026-07-26",[22,23,24,25,26],"shopify-hydrogen","headless-commerce","web-performance","liquid","ttfb",8,"Roibase",{"type":30,"children":31,"toc":1997},"root",[32,40,47,52,84,114,127,134,139,164,176,182,187,215,220,225,566,571,627,632,638,643,676,681,785,790,796,801,912,924,1115,1128,1134,1139,1147,1175,1187,1195,1224,1233,1238,1254,1260,1279,1377,1382,1415,1420,1891,1896,1902,1907,1915,1939,1947,1970,1975,1981,1986,1991],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","К концу 2024 года в экосистеме Shopify приходится выбирать между двумя архитектурами: классический template engine Liquid или Hydrogen. Мы не принимаем это решение на основе предположений — сравниваем TTFB, время сборки, velocity разработчиков и стоимость миграции. Здесь мы объясняем, какие цифры мы анализировали и какие компромиссы приняли.",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"liquid-встроенная-скорость-ограниченная-гибкость",[45],{"type":38,"value":46},"Liquid: Встроенная скорость, ограниченная гибкость",{"type":33,"tag":34,"props":48,"children":49},{},[50],{"type":38,"value":51},"Liquid — это template engine, который Shopify использует с 2006 года. Он рендерится на сервере, кэшируется на CDN, работает на собственной инфраструктуре Oxygen. Наши бенчмарки:",{"type":33,"tag":34,"props":53,"children":54},{},[55,61,63,67,72,74,77,82],{"type":33,"tag":56,"props":57,"children":58},"strong",{},[59],{"type":38,"value":60},"Средний TTFB:",{"type":38,"value":62}," 180–220 мс (из edge Oxygen CDN)",{"type":33,"tag":64,"props":65,"children":66},"br",{},[],{"type":33,"tag":56,"props":68,"children":69},{},[70],{"type":38,"value":71},"Время сборки:",{"type":38,"value":73}," отсутствует — каждый запрос рендерится в runtime",{"type":33,"tag":64,"props":75,"children":76},{},[],{"type":33,"tag":56,"props":78,"children":79},{},[80],{"type":38,"value":81},"Коэффициент попаданий кэша:",{"type":38,"value":83}," 82% (для статических страниц)",{"type":33,"tag":34,"props":85,"children":86},{},[87,89,96,98,104,106,112],{"type":38,"value":88},"Преимущество Liquid не в скорости, а в простоте. Вы нанимаете разработчика тем, заполняете папки ",{"type":33,"tag":90,"props":91,"children":93},"code",{"className":92},[],[94],{"type":38,"value":95},"sections\u002F",{"type":38,"value":97}," и ",{"type":33,"tag":90,"props":99,"children":101},{"className":100},[],[102],{"type":38,"value":103},"snippets\u002F",{"type":38,"value":105},", контент редактируется в админке Shopify. Нет frontend pipeline, нет npm dependencies. Но гибкость равна нулю: интерактивность на клиенте требует ",{"type":33,"tag":90,"props":107,"children":109},{"className":108},[],[110],{"type":38,"value":111},"\u003Cscript>",{"type":38,"value":113}," тегов и библиотек вроде Alpine.js или Petite Vue. Нет библиотеки компонентов, нет управления состоянием.",{"type":33,"tag":34,"props":115,"children":116},{},[117,119,125],{"type":38,"value":118},"Для персонализации в Liquid вы привязаны к объекту ",{"type":33,"tag":90,"props":120,"children":122},{"className":121},[],[123],{"type":38,"value":124},"customer",{"type":38,"value":126}," Shopify. Случаи вроде динамического ценообразования или рекомендаций требуют обхода кэша CDN и запроса к серверу — TTFB прыгает с 180 мс до 400–600 мс. На этом этапе преимущество Liquid в скорости испаряется.",{"type":33,"tag":128,"props":129,"children":131},"h3",{"id":130},"компромисс-liquid-velocity-разработчиков",[132],{"type":38,"value":133},"Компромисс Liquid: Velocity разработчиков",{"type":33,"tag":34,"props":135,"children":136},{},[137],{"type":38,"value":138},"Добавить функцию:",{"type":33,"tag":140,"props":141,"children":142},"ol",{},[143,149,154,159],{"type":33,"tag":144,"props":145,"children":146},"li",{},[147],{"type":38,"value":148},"Найти разработчика, пишущего на Liquid (нишевый навык)",{"type":33,"tag":144,"props":150,"children":151},{},[152],{"type":38,"value":153},"Добавить Shopify theme app extension или написать custom section",{"type":33,"tag":144,"props":155,"children":156},{},[157],{"type":38,"value":158},"Протестировать в preview-режиме (нет локального dev server)",{"type":33,"tag":144,"props":160,"children":161},{},[162],{"type":38,"value":163},"Развернуть через GitHub sync или Shopify CLI",{"type":33,"tag":34,"props":165,"children":166},{},[167,169,174],{"type":38,"value":168},"Среднее время доставки feature: ",{"type":33,"tag":56,"props":170,"children":171},{},[172],{"type":38,"value":173},"3–5 дней",{"type":38,"value":175}," (для простой section). Настроить A\u002FB тест, добавить analytics event, оптимизировать скрипт третьей стороны — каждое это отдельная работа. Нет TypeScript, нет механизма переиспользования компонентов, нет framework для unit тестов.",{"type":33,"tag":41,"props":177,"children":179},{"id":178},"hydrogen-react-remix-edge-ssr",[180],{"type":38,"value":181},"Hydrogen: React, Remix, Edge SSR",{"type":33,"tag":34,"props":183,"children":184},{},[185],{"type":38,"value":186},"Hydrogen — это headless framework от Shopify, представленный в 2021 году. Построен на React, использует Remix, работает на edge network Oxygen. Наши production метрики:",{"type":33,"tag":34,"props":188,"children":189},{},[190,194,196,199,203,205,208,213],{"type":33,"tag":56,"props":191,"children":192},{},[193],{"type":38,"value":60},{"type":38,"value":195}," 90–140 мс (edge SSR, попадание кэша)",{"type":33,"tag":64,"props":197,"children":198},{},[],{"type":33,"tag":56,"props":200,"children":201},{},[202],{"type":38,"value":71},{"type":38,"value":204}," 45–70 секунд (Remix build + Oxygen deploy)",{"type":33,"tag":64,"props":206,"children":207},{},[],{"type":33,"tag":56,"props":209,"children":210},{},[211],{"type":38,"value":212},"TTFB при промахе кэша:",{"type":38,"value":214}," 250–350 мс (включая latency Storefront API)",{"type":33,"tag":34,"props":216,"children":217},{},[218],{"type":38,"value":219},"Ключевое преимущество Hydrogen — архитектура на основе компонентов. Вы используете экосистему React: Radix UI, Framer Motion, React Query. Управление состоянием через Zustand или Jotai. TypeScript встроен, dev server Vite с HMR за 200–400 мс.",{"type":33,"tag":34,"props":221,"children":222},{},[223],{"type":38,"value":224},"Пример кода — компонент карточки продукта в Hydrogen:",{"type":33,"tag":226,"props":227,"children":231},"pre",{"className":228,"code":229,"language":230,"meta":17,"style":17},"language-tsx shiki shiki-themes github-dark","\u002F\u002F app\u002Fcomponents\u002FProductCard.tsx\nimport {Image, Money} from '@shopify\u002Fhydrogen';\nimport type {Product} from '@shopify\u002Fhydrogen\u002Fstorefront-api-types';\n\nexport function ProductCard({product}: {product: Product}) {\n  return (\n    \u003Cdiv className=\"product-card\">\n      \u003CImage data={product.featuredImage} sizes=\"(min-width: 768px) 33vw, 100vw\" \u002F>\n      \u003Ch3>{product.title}\u003C\u002Fh3>\n      \u003CMoney data={product.priceRange.minVariantPrice} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n","tsx",[232],{"type":33,"tag":90,"props":233,"children":234},{"__ignoreMap":17},[235,247,279,310,320,384,398,433,480,505,531,548,557],{"type":33,"tag":236,"props":237,"children":240},"span",{"class":238,"line":239},"line",1,[241],{"type":33,"tag":236,"props":242,"children":244},{"style":243},"--shiki-default:#6A737D",[245],{"type":38,"value":246},"\u002F\u002F app\u002Fcomponents\u002FProductCard.tsx\n",{"type":33,"tag":236,"props":248,"children":250},{"class":238,"line":249},2,[251,257,263,268,274],{"type":33,"tag":236,"props":252,"children":254},{"style":253},"--shiki-default:#F97583",[255],{"type":38,"value":256},"import",{"type":33,"tag":236,"props":258,"children":260},{"style":259},"--shiki-default:#E1E4E8",[261],{"type":38,"value":262}," {Image, Money} ",{"type":33,"tag":236,"props":264,"children":265},{"style":253},[266],{"type":38,"value":267},"from",{"type":33,"tag":236,"props":269,"children":271},{"style":270},"--shiki-default:#9ECBFF",[272],{"type":38,"value":273}," '@shopify\u002Fhydrogen'",{"type":33,"tag":236,"props":275,"children":276},{"style":259},[277],{"type":38,"value":278},";\n",{"type":33,"tag":236,"props":280,"children":282},{"class":238,"line":281},3,[283,287,292,297,301,306],{"type":33,"tag":236,"props":284,"children":285},{"style":253},[286],{"type":38,"value":256},{"type":33,"tag":236,"props":288,"children":289},{"style":253},[290],{"type":38,"value":291}," type",{"type":33,"tag":236,"props":293,"children":294},{"style":259},[295],{"type":38,"value":296}," {Product} ",{"type":33,"tag":236,"props":298,"children":299},{"style":253},[300],{"type":38,"value":267},{"type":33,"tag":236,"props":302,"children":303},{"style":270},[304],{"type":38,"value":305}," '@shopify\u002Fhydrogen\u002Fstorefront-api-types'",{"type":33,"tag":236,"props":307,"children":308},{"style":259},[309],{"type":38,"value":278},{"type":33,"tag":236,"props":311,"children":313},{"class":238,"line":312},4,[314],{"type":33,"tag":236,"props":315,"children":317},{"emptyLinePlaceholder":316},true,[318],{"type":38,"value":319},"\n",{"type":33,"tag":236,"props":321,"children":323},{"class":238,"line":322},5,[324,329,334,340,345,351,356,361,366,370,374,379],{"type":33,"tag":236,"props":325,"children":326},{"style":253},[327],{"type":38,"value":328},"export",{"type":33,"tag":236,"props":330,"children":331},{"style":253},[332],{"type":38,"value":333}," function",{"type":33,"tag":236,"props":335,"children":337},{"style":336},"--shiki-default:#B392F0",[338],{"type":38,"value":339}," ProductCard",{"type":33,"tag":236,"props":341,"children":342},{"style":259},[343],{"type":38,"value":344},"({",{"type":33,"tag":236,"props":346,"children":348},{"style":347},"--shiki-default:#FFAB70",[349],{"type":38,"value":350},"product",{"type":33,"tag":236,"props":352,"children":353},{"style":259},[354],{"type":38,"value":355},"}",{"type":33,"tag":236,"props":357,"children":358},{"style":253},[359],{"type":38,"value":360},":",{"type":33,"tag":236,"props":362,"children":363},{"style":259},[364],{"type":38,"value":365}," {",{"type":33,"tag":236,"props":367,"children":368},{"style":347},[369],{"type":38,"value":350},{"type":33,"tag":236,"props":371,"children":372},{"style":253},[373],{"type":38,"value":360},{"type":33,"tag":236,"props":375,"children":376},{"style":336},[377],{"type":38,"value":378}," Product",{"type":33,"tag":236,"props":380,"children":381},{"style":259},[382],{"type":38,"value":383},"}) {\n",{"type":33,"tag":236,"props":385,"children":387},{"class":238,"line":386},6,[388,393],{"type":33,"tag":236,"props":389,"children":390},{"style":253},[391],{"type":38,"value":392},"  return",{"type":33,"tag":236,"props":394,"children":395},{"style":259},[396],{"type":38,"value":397}," (\n",{"type":33,"tag":236,"props":399,"children":401},{"class":238,"line":400},7,[402,407,413,418,423,428],{"type":33,"tag":236,"props":403,"children":404},{"style":259},[405],{"type":38,"value":406},"    \u003C",{"type":33,"tag":236,"props":408,"children":410},{"style":409},"--shiki-default:#85E89D",[411],{"type":38,"value":412},"div",{"type":33,"tag":236,"props":414,"children":415},{"style":336},[416],{"type":38,"value":417}," className",{"type":33,"tag":236,"props":419,"children":420},{"style":253},[421],{"type":38,"value":422},"=",{"type":33,"tag":236,"props":424,"children":425},{"style":270},[426],{"type":38,"value":427},"\"product-card\"",{"type":33,"tag":236,"props":429,"children":430},{"style":259},[431],{"type":38,"value":432},">\n",{"type":33,"tag":236,"props":434,"children":435},{"class":238,"line":27},[436,441,447,452,456,461,466,470,475],{"type":33,"tag":236,"props":437,"children":438},{"style":259},[439],{"type":38,"value":440},"      \u003C",{"type":33,"tag":236,"props":442,"children":444},{"style":443},"--shiki-default:#79B8FF",[445],{"type":38,"value":446},"Image",{"type":33,"tag":236,"props":448,"children":449},{"style":336},[450],{"type":38,"value":451}," data",{"type":33,"tag":236,"props":453,"children":454},{"style":253},[455],{"type":38,"value":422},{"type":33,"tag":236,"props":457,"children":458},{"style":259},[459],{"type":38,"value":460},"{product.featuredImage} ",{"type":33,"tag":236,"props":462,"children":463},{"style":336},[464],{"type":38,"value":465},"sizes",{"type":33,"tag":236,"props":467,"children":468},{"style":253},[469],{"type":38,"value":422},{"type":33,"tag":236,"props":471,"children":472},{"style":270},[473],{"type":38,"value":474},"\"(min-width: 768px) 33vw, 100vw\"",{"type":33,"tag":236,"props":476,"children":477},{"style":259},[478],{"type":38,"value":479}," \u002F>\n",{"type":33,"tag":236,"props":481,"children":483},{"class":238,"line":482},9,[484,488,492,497,501],{"type":33,"tag":236,"props":485,"children":486},{"style":259},[487],{"type":38,"value":440},{"type":33,"tag":236,"props":489,"children":490},{"style":409},[491],{"type":38,"value":128},{"type":33,"tag":236,"props":493,"children":494},{"style":259},[495],{"type":38,"value":496},">{product.title}\u003C\u002F",{"type":33,"tag":236,"props":498,"children":499},{"style":409},[500],{"type":38,"value":128},{"type":33,"tag":236,"props":502,"children":503},{"style":259},[504],{"type":38,"value":432},{"type":33,"tag":236,"props":506,"children":508},{"class":238,"line":507},10,[509,513,518,522,526],{"type":33,"tag":236,"props":510,"children":511},{"style":259},[512],{"type":38,"value":440},{"type":33,"tag":236,"props":514,"children":515},{"style":443},[516],{"type":38,"value":517},"Money",{"type":33,"tag":236,"props":519,"children":520},{"style":336},[521],{"type":38,"value":451},{"type":33,"tag":236,"props":523,"children":524},{"style":253},[525],{"type":38,"value":422},{"type":33,"tag":236,"props":527,"children":528},{"style":259},[529],{"type":38,"value":530},"{product.priceRange.minVariantPrice} \u002F>\n",{"type":33,"tag":236,"props":532,"children":534},{"class":238,"line":533},11,[535,540,544],{"type":33,"tag":236,"props":536,"children":537},{"style":259},[538],{"type":38,"value":539},"    \u003C\u002F",{"type":33,"tag":236,"props":541,"children":542},{"style":409},[543],{"type":38,"value":412},{"type":33,"tag":236,"props":545,"children":546},{"style":259},[547],{"type":38,"value":432},{"type":33,"tag":236,"props":549,"children":551},{"class":238,"line":550},12,[552],{"type":33,"tag":236,"props":553,"children":554},{"style":259},[555],{"type":38,"value":556},"  );\n",{"type":33,"tag":236,"props":558,"children":560},{"class":238,"line":559},13,[561],{"type":33,"tag":236,"props":562,"children":563},{"style":259},[564],{"type":38,"value":565},"}\n",{"type":33,"tag":34,"props":567,"children":568},{},[569],{"type":38,"value":570},"То же самое в Liquid:",{"type":33,"tag":226,"props":572,"children":575},{"className":573,"code":574,"language":25,"meta":17,"style":17},"language-liquid shiki shiki-themes github-dark","{% comment %} sections\u002Fproduct-card.liquid {% endcomment %}\n\u003Cdiv class=\"product-card\">\n  {{ product.featured_image | image_url: width: 800 | image_tag }}\n  \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n  \u003Cspan>{{ product.price | money }}\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[576],{"type":33,"tag":90,"props":577,"children":578},{"__ignoreMap":17},[579,587,595,603,611,619],{"type":33,"tag":236,"props":580,"children":581},{"class":238,"line":239},[582],{"type":33,"tag":236,"props":583,"children":584},{},[585],{"type":38,"value":586},"{% comment %} sections\u002Fproduct-card.liquid {% endcomment %}\n",{"type":33,"tag":236,"props":588,"children":589},{"class":238,"line":249},[590],{"type":33,"tag":236,"props":591,"children":592},{},[593],{"type":38,"value":594},"\u003Cdiv class=\"product-card\">\n",{"type":33,"tag":236,"props":596,"children":597},{"class":238,"line":281},[598],{"type":33,"tag":236,"props":599,"children":600},{},[601],{"type":38,"value":602},"  {{ product.featured_image | image_url: width: 800 | image_tag }}\n",{"type":33,"tag":236,"props":604,"children":605},{"class":238,"line":312},[606],{"type":33,"tag":236,"props":607,"children":608},{},[609],{"type":38,"value":610},"  \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n",{"type":33,"tag":236,"props":612,"children":613},{"class":238,"line":322},[614],{"type":33,"tag":236,"props":615,"children":616},{},[617],{"type":38,"value":618},"  \u003Cspan>{{ product.price | money }}\u003C\u002Fspan>\n",{"type":33,"tag":236,"props":620,"children":621},{"class":238,"line":386},[622],{"type":33,"tag":236,"props":623,"children":624},{},[625],{"type":38,"value":626},"\u003C\u002Fdiv>\n",{"type":33,"tag":34,"props":628,"children":629},{},[630],{"type":38,"value":631},"Разница не в синтаксисе — в Hydrogen вы импортируете этот компонент и переиспользуете его с type safety, документируете в Storybook. В Liquid вы включаете snippet, передаете переменные — рефакторинг сложен.",{"type":33,"tag":41,"props":633,"children":635},{"id":634},"стоимость-миграции-расчет-в-часах",[636],{"type":38,"value":637},"Стоимость миграции: расчет в часах",{"type":33,"tag":34,"props":639,"children":640},{},[641],{"type":38,"value":642},"При миграции e-commerce сайта есть три затраты:",{"type":33,"tag":140,"props":644,"children":645},{},[646,656,666],{"type":33,"tag":144,"props":647,"children":648},{},[649,654],{"type":33,"tag":56,"props":650,"children":651},{},[652],{"type":38,"value":653},"Миграция шаблонов:",{"type":38,"value":655}," Liquid → JSX",{"type":33,"tag":144,"props":657,"children":658},{},[659,664],{"type":33,"tag":56,"props":660,"children":661},{},[662],{"type":38,"value":663},"Рефакторинг получения данных:",{"type":38,"value":665}," Theme → Storefront API query",{"type":33,"tag":144,"props":667,"children":668},{},[669,674],{"type":33,"tag":56,"props":670,"children":671},{},[672],{"type":38,"value":673},"Интеграция третьих сторон:",{"type":38,"value":675}," pixel, analytics, widget отзывов",{"type":33,"tag":34,"props":677,"children":678},{},[679],{"type":38,"value":680},"Наш опыт:",{"type":33,"tag":682,"props":683,"children":684},"table",{},[685,709],{"type":33,"tag":686,"props":687,"children":688},"thead",{},[689],{"type":33,"tag":690,"props":691,"children":692},"tr",{},[693,699,704],{"type":33,"tag":694,"props":695,"children":696},"th",{},[697],{"type":38,"value":698},"Метрика",{"type":33,"tag":694,"props":700,"children":701},{},[702],{"type":38,"value":703},"Сайт 50 страниц",{"type":33,"tag":694,"props":705,"children":706},{},[707],{"type":38,"value":708},"Сайт 200 страниц",{"type":33,"tag":710,"props":711,"children":712},"tbody",{},[713,732,749,767],{"type":33,"tag":690,"props":714,"children":715},{},[716,722,727],{"type":33,"tag":717,"props":718,"children":719},"td",{},[720],{"type":38,"value":721},"Dev часов (миграция)",{"type":33,"tag":717,"props":723,"children":724},{},[725],{"type":38,"value":726},"120–180",{"type":33,"tag":717,"props":728,"children":729},{},[730],{"type":38,"value":731},"400–600",{"type":33,"tag":690,"props":733,"children":734},{},[735,740,745],{"type":33,"tag":717,"props":736,"children":737},{},[738],{"type":38,"value":739},"QA часов",{"type":33,"tag":717,"props":741,"children":742},{},[743],{"type":38,"value":744},"40–60",{"type":33,"tag":717,"props":746,"children":747},{},[748],{"type":38,"value":726},{"type":33,"tag":690,"props":750,"children":751},{},[752,757,762],{"type":33,"tag":717,"props":753,"children":754},{},[755],{"type":38,"value":756},"Простой",{"type":33,"tag":717,"props":758,"children":759},{},[760],{"type":38,"value":761},"0 (staging deploy)",{"type":33,"tag":717,"props":763,"children":764},{},[765],{"type":38,"value":766},"0",{"type":33,"tag":690,"props":768,"children":769},{},[770,775,780],{"type":33,"tag":717,"props":771,"children":772},{},[773],{"type":38,"value":774},"Риск",{"type":33,"tag":717,"props":776,"children":777},{},[778],{"type":38,"value":779},"Низкий",{"type":33,"tag":717,"props":781,"children":782},{},[783],{"type":38,"value":784},"Средний (контроль URL для SEO)",{"type":33,"tag":34,"props":786,"children":787},{},[788],{"type":38,"value":789},"Самая крупная затрата — смена набора навыков разработчика. Разработчик Liquid не напишет Hydrogen — вы нанимаете frontend разработчика на React или обучаете команду. Средняя разница в зарплате: Liquid dev ₽60–90k\u002Fмесяц, React dev ₽105–150k\u002Fмесяц (локальные пулы).",{"type":33,"tag":128,"props":791,"children":793},{"id":792},"latency-запросов-к-storefront-api",[794],{"type":38,"value":795},"Latency запросов к Storefront API",{"type":33,"tag":34,"props":797,"children":798},{},[799],{"type":38,"value":800},"Hydrogen делает GraphQL запросы к Shopify Storefront API. В Liquid доступ к данным на серверной стороне бесплатный (одно монолитное приложение), в Hydrogen есть сетевой hop. Пример запроса:",{"type":33,"tag":226,"props":802,"children":806},{"className":803,"code":804,"language":805,"meta":17,"style":17},"language-graphql shiki shiki-themes github-dark","query ProductPage($handle: String!) {\n  product(handle: $handle) {\n    id\n    title\n    description\n    priceRange {\n      minVariantPrice { amount currencyCode }\n    }\n    images(first: 10) {\n      nodes { url altText }\n    }\n  }\n}\n","graphql",[807],{"type":33,"tag":90,"props":808,"children":809},{"__ignoreMap":17},[810,818,826,834,842,850,858,866,874,882,890,897,905],{"type":33,"tag":236,"props":811,"children":812},{"class":238,"line":239},[813],{"type":33,"tag":236,"props":814,"children":815},{},[816],{"type":38,"value":817},"query ProductPage($handle: String!) {\n",{"type":33,"tag":236,"props":819,"children":820},{"class":238,"line":249},[821],{"type":33,"tag":236,"props":822,"children":823},{},[824],{"type":38,"value":825},"  product(handle: $handle) {\n",{"type":33,"tag":236,"props":827,"children":828},{"class":238,"line":281},[829],{"type":33,"tag":236,"props":830,"children":831},{},[832],{"type":38,"value":833},"    id\n",{"type":33,"tag":236,"props":835,"children":836},{"class":238,"line":312},[837],{"type":33,"tag":236,"props":838,"children":839},{},[840],{"type":38,"value":841},"    title\n",{"type":33,"tag":236,"props":843,"children":844},{"class":238,"line":322},[845],{"type":33,"tag":236,"props":846,"children":847},{},[848],{"type":38,"value":849},"    description\n",{"type":33,"tag":236,"props":851,"children":852},{"class":238,"line":386},[853],{"type":33,"tag":236,"props":854,"children":855},{},[856],{"type":38,"value":857},"    priceRange {\n",{"type":33,"tag":236,"props":859,"children":860},{"class":238,"line":400},[861],{"type":33,"tag":236,"props":862,"children":863},{},[864],{"type":38,"value":865},"      minVariantPrice { amount currencyCode }\n",{"type":33,"tag":236,"props":867,"children":868},{"class":238,"line":27},[869],{"type":33,"tag":236,"props":870,"children":871},{},[872],{"type":38,"value":873},"    }\n",{"type":33,"tag":236,"props":875,"children":876},{"class":238,"line":482},[877],{"type":33,"tag":236,"props":878,"children":879},{},[880],{"type":38,"value":881},"    images(first: 10) {\n",{"type":33,"tag":236,"props":883,"children":884},{"class":238,"line":507},[885],{"type":33,"tag":236,"props":886,"children":887},{},[888],{"type":38,"value":889},"      nodes { url altText }\n",{"type":33,"tag":236,"props":891,"children":892},{"class":238,"line":533},[893],{"type":33,"tag":236,"props":894,"children":895},{},[896],{"type":38,"value":873},{"type":33,"tag":236,"props":898,"children":899},{"class":238,"line":550},[900],{"type":33,"tag":236,"props":901,"children":902},{},[903],{"type":38,"value":904},"  }\n",{"type":33,"tag":236,"props":906,"children":907},{"class":238,"line":559},[908],{"type":33,"tag":236,"props":909,"children":910},{},[911],{"type":38,"value":565},{"type":33,"tag":34,"props":913,"children":914},{},[915,917,922],{"type":38,"value":916},"Этот запрос идет из edge Oxygen на backend Shopify — среднее latency ",{"type":33,"tag":56,"props":918,"children":919},{},[920],{"type":38,"value":921},"80–120 мс",{"type":38,"value":923},". В Liquid этого latency нет, потому что данные в памяти. Но Hydrogen компенсирует это с помощью кэш-стратегии:",{"type":33,"tag":226,"props":925,"children":927},{"className":228,"code":926,"language":230,"meta":17,"style":17},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\nexport async function loader({params, context}: LoaderFunctionArgs) {\n  const {product} = await context.storefront.query(PRODUCT_QUERY, {\n    variables: {handle: params.handle},\n    cache: context.storefront.CacheLong(), \u002F\u002F кэш на 1 час\n  });\n  return json({product});\n}\n",[928],{"type":33,"tag":90,"props":929,"children":930},{"__ignoreMap":17},[931,939,997,1052,1060,1083,1091,1108],{"type":33,"tag":236,"props":932,"children":933},{"class":238,"line":239},[934],{"type":33,"tag":236,"props":935,"children":936},{"style":243},[937],{"type":38,"value":938},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\n",{"type":33,"tag":236,"props":940,"children":941},{"class":238,"line":249},[942,946,951,955,960,964,969,974,979,983,987,992],{"type":33,"tag":236,"props":943,"children":944},{"style":253},[945],{"type":38,"value":328},{"type":33,"tag":236,"props":947,"children":948},{"style":253},[949],{"type":38,"value":950}," async",{"type":33,"tag":236,"props":952,"children":953},{"style":253},[954],{"type":38,"value":333},{"type":33,"tag":236,"props":956,"children":957},{"style":336},[958],{"type":38,"value":959}," loader",{"type":33,"tag":236,"props":961,"children":962},{"style":259},[963],{"type":38,"value":344},{"type":33,"tag":236,"props":965,"children":966},{"style":347},[967],{"type":38,"value":968},"params",{"type":33,"tag":236,"props":970,"children":971},{"style":259},[972],{"type":38,"value":973},", ",{"type":33,"tag":236,"props":975,"children":976},{"style":347},[977],{"type":38,"value":978},"context",{"type":33,"tag":236,"props":980,"children":981},{"style":259},[982],{"type":38,"value":355},{"type":33,"tag":236,"props":984,"children":985},{"style":253},[986],{"type":38,"value":360},{"type":33,"tag":236,"props":988,"children":989},{"style":336},[990],{"type":38,"value":991}," LoaderFunctionArgs",{"type":33,"tag":236,"props":993,"children":994},{"style":259},[995],{"type":38,"value":996},") {\n",{"type":33,"tag":236,"props":998,"children":999},{"class":238,"line":281},[1000,1005,1009,1013,1018,1022,1027,1032,1037,1042,1047],{"type":33,"tag":236,"props":1001,"children":1002},{"style":253},[1003],{"type":38,"value":1004},"  const",{"type":33,"tag":236,"props":1006,"children":1007},{"style":259},[1008],{"type":38,"value":365},{"type":33,"tag":236,"props":1010,"children":1011},{"style":443},[1012],{"type":38,"value":350},{"type":33,"tag":236,"props":1014,"children":1015},{"style":259},[1016],{"type":38,"value":1017},"} ",{"type":33,"tag":236,"props":1019,"children":1020},{"style":253},[1021],{"type":38,"value":422},{"type":33,"tag":236,"props":1023,"children":1024},{"style":253},[1025],{"type":38,"value":1026}," await",{"type":33,"tag":236,"props":1028,"children":1029},{"style":259},[1030],{"type":38,"value":1031}," context.storefront.",{"type":33,"tag":236,"props":1033,"children":1034},{"style":336},[1035],{"type":38,"value":1036},"query",{"type":33,"tag":236,"props":1038,"children":1039},{"style":259},[1040],{"type":38,"value":1041},"(",{"type":33,"tag":236,"props":1043,"children":1044},{"style":443},[1045],{"type":38,"value":1046},"PRODUCT_QUERY",{"type":33,"tag":236,"props":1048,"children":1049},{"style":259},[1050],{"type":38,"value":1051},", {\n",{"type":33,"tag":236,"props":1053,"children":1054},{"class":238,"line":312},[1055],{"type":33,"tag":236,"props":1056,"children":1057},{"style":259},[1058],{"type":38,"value":1059},"    variables: {handle: params.handle},\n",{"type":33,"tag":236,"props":1061,"children":1062},{"class":238,"line":322},[1063,1068,1073,1078],{"type":33,"tag":236,"props":1064,"children":1065},{"style":259},[1066],{"type":38,"value":1067},"    cache: context.storefront.",{"type":33,"tag":236,"props":1069,"children":1070},{"style":336},[1071],{"type":38,"value":1072},"CacheLong",{"type":33,"tag":236,"props":1074,"children":1075},{"style":259},[1076],{"type":38,"value":1077},"(), ",{"type":33,"tag":236,"props":1079,"children":1080},{"style":243},[1081],{"type":38,"value":1082},"\u002F\u002F кэш на 1 час\n",{"type":33,"tag":236,"props":1084,"children":1085},{"class":238,"line":386},[1086],{"type":33,"tag":236,"props":1087,"children":1088},{"style":259},[1089],{"type":38,"value":1090},"  });\n",{"type":33,"tag":236,"props":1092,"children":1093},{"class":238,"line":400},[1094,1098,1103],{"type":33,"tag":236,"props":1095,"children":1096},{"style":253},[1097],{"type":38,"value":392},{"type":33,"tag":236,"props":1099,"children":1100},{"style":336},[1101],{"type":38,"value":1102}," json",{"type":33,"tag":236,"props":1104,"children":1105},{"style":259},[1106],{"type":38,"value":1107},"({product});\n",{"type":33,"tag":236,"props":1109,"children":1110},{"class":238,"line":27},[1111],{"type":33,"tag":236,"props":1112,"children":1113},{"style":259},[1114],{"type":38,"value":565},{"type":33,"tag":34,"props":1116,"children":1117},{},[1118,1120,1126],{"type":38,"value":1119},"Стратегия ",{"type":33,"tag":90,"props":1121,"children":1123},{"className":1122},[],[1124],{"type":38,"value":1125},"CacheLong()",{"type":38,"value":1127}," кэширует один и тот же запрос на edge на протяжении 1 часа — для второго запроса latency падает ниже 10 мс.",{"type":33,"tag":41,"props":1129,"children":1131},{"id":1130},"сравнение-velocity-разработчиков",[1132],{"type":38,"value":1133},"Сравнение velocity разработчиков",{"type":33,"tag":34,"props":1135,"children":1136},{},[1137],{"type":38,"value":1138},"Реализуем одну функцию в обеих архитектурах: \"Показать динамический виджет appsell для продукта, добавленного в корзину\".",{"type":33,"tag":34,"props":1140,"children":1141},{},[1142],{"type":33,"tag":56,"props":1143,"children":1144},{},[1145],{"type":38,"value":1146},"Подход Liquid:",{"type":33,"tag":140,"props":1148,"children":1149},{},[1150,1155,1160,1165,1170],{"type":33,"tag":144,"props":1151,"children":1152},{},[1153],{"type":38,"value":1154},"Написать custom app (Shopify App Bridge)",{"type":33,"tag":144,"props":1156,"children":1157},{},[1158],{"type":38,"value":1159},"Добавить как app extension или snippet",{"type":33,"tag":144,"props":1161,"children":1162},{},[1163],{"type":38,"value":1164},"Сделать Ajax запрос на странице корзины",{"type":33,"tag":144,"props":1166,"children":1167},{},[1168],{"type":38,"value":1169},"Подключиться к API recommendation engine",{"type":33,"tag":144,"props":1171,"children":1172},{},[1173],{"type":38,"value":1174},"Отрендерить response в DOM",{"type":33,"tag":34,"props":1176,"children":1177},{},[1178,1180,1185],{"type":38,"value":1179},"Время: ",{"type":33,"tag":56,"props":1181,"children":1182},{},[1183],{"type":38,"value":1184},"3–4 дня",{"type":38,"value":1186}," (с тестированием)",{"type":33,"tag":34,"props":1188,"children":1189},{},[1190],{"type":33,"tag":56,"props":1191,"children":1192},{},[1193],{"type":38,"value":1194},"Подход Hydrogen:",{"type":33,"tag":140,"props":1196,"children":1197},{},[1198,1203,1214,1219],{"type":33,"tag":144,"props":1199,"children":1200},{},[1201],{"type":38,"value":1202},"Написать React компонент (CartUpsell.tsx)",{"type":33,"tag":144,"props":1204,"children":1205},{},[1206,1208],{"type":38,"value":1207},"Получить cart data из хука ",{"type":33,"tag":90,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":38,"value":1213},"useCart",{"type":33,"tag":144,"props":1215,"children":1216},{},[1217],{"type":38,"value":1218},"Запросить recommendation API (React Query)",{"type":33,"tag":144,"props":1220,"children":1221},{},[1222],{"type":38,"value":1223},"Импортировать компонент в cart route",{"type":33,"tag":34,"props":1225,"children":1226},{},[1227,1228],{"type":38,"value":1179},{"type":33,"tag":56,"props":1229,"children":1230},{},[1231],{"type":38,"value":1232},"4–6 часов",{"type":33,"tag":34,"props":1234,"children":1235},{},[1236],{"type":38,"value":1237},"В чем разница: в Hydrogen есть type safety TypeScript, компонент покрыт тестами, изолирован в Storybook. В Liquid каждое изменение требует ручного тестирования в preview-режиме.",{"type":33,"tag":34,"props":1239,"children":1240},{},[1241,1243,1252],{"type":38,"value":1242},"Реальный пример проекта (клиент Roibase): функция персонализации, которая в Liquid заняла 1 спринт (2 недели), в Hydrogen заняла 3 дня — это вклад ",{"type":33,"tag":1244,"props":1245,"children":1249},"a",{"href":1246,"rel":1247},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[1248],"nofollow",[1250],{"type":38,"value":1251},"headless commerce",{"type":38,"value":1253}," архитектуры в velocity.",{"type":33,"tag":41,"props":1255,"children":1257},{"id":1256},"web-performance-разница-в-core-web-vitals",[1258],{"type":38,"value":1259},"Web Performance: разница в Core Web Vitals",{"type":33,"tag":34,"props":1261,"children":1262},{},[1263,1265,1270,1272,1277],{"type":38,"value":1264},"Отчет Shopify Q1 2025: среднее Liquid theme имеет LCP ",{"type":33,"tag":56,"props":1266,"children":1267},{},[1268],{"type":38,"value":1269},"2,4 сек",{"type":38,"value":1271},", Hydrogen сайт — LCP ",{"type":33,"tag":56,"props":1273,"children":1274},{},[1275],{"type":38,"value":1276},"1,8 сек",{"type":38,"value":1278}," (мобиль, 4G). Наши production данные:",{"type":33,"tag":682,"props":1280,"children":1281},{},[1282,1302],{"type":33,"tag":686,"props":1283,"children":1284},{},[1285],{"type":33,"tag":690,"props":1286,"children":1287},{},[1288,1292,1297],{"type":33,"tag":694,"props":1289,"children":1290},{},[1291],{"type":38,"value":698},{"type":33,"tag":694,"props":1293,"children":1294},{},[1295],{"type":38,"value":1296},"Liquid (theme)",{"type":33,"tag":694,"props":1298,"children":1299},{},[1300],{"type":38,"value":1301},"Hydrogen",{"type":33,"tag":710,"props":1303,"children":1304},{},[1305,1323,1341,1359],{"type":33,"tag":690,"props":1306,"children":1307},{},[1308,1313,1318],{"type":33,"tag":717,"props":1309,"children":1310},{},[1311],{"type":38,"value":1312},"TTFB",{"type":33,"tag":717,"props":1314,"children":1315},{},[1316],{"type":38,"value":1317},"210 мс",{"type":33,"tag":717,"props":1319,"children":1320},{},[1321],{"type":38,"value":1322},"130 мс",{"type":33,"tag":690,"props":1324,"children":1325},{},[1326,1331,1336],{"type":33,"tag":717,"props":1327,"children":1328},{},[1329],{"type":38,"value":1330},"LCP",{"type":33,"tag":717,"props":1332,"children":1333},{},[1334],{"type":38,"value":1335},"2,6 сек",{"type":33,"tag":717,"props":1337,"children":1338},{},[1339],{"type":38,"value":1340},"1,9 сек",{"type":33,"tag":690,"props":1342,"children":1343},{},[1344,1349,1354],{"type":33,"tag":717,"props":1345,"children":1346},{},[1347],{"type":38,"value":1348},"TBT",{"type":33,"tag":717,"props":1350,"children":1351},{},[1352],{"type":38,"value":1353},"420 мс",{"type":33,"tag":717,"props":1355,"children":1356},{},[1357],{"type":38,"value":1358},"180 мс",{"type":33,"tag":690,"props":1360,"children":1361},{},[1362,1367,1372],{"type":33,"tag":717,"props":1363,"children":1364},{},[1365],{"type":38,"value":1366},"CLS",{"type":33,"tag":717,"props":1368,"children":1369},{},[1370],{"type":38,"value":1371},"0,08",{"type":33,"tag":717,"props":1373,"children":1374},{},[1375],{"type":38,"value":1376},"0,02",{"type":33,"tag":34,"props":1378,"children":1379},{},[1380],{"type":38,"value":1381},"Преимущество Hydrogen в производительности идет из трех источников:",{"type":33,"tag":140,"props":1383,"children":1384},{},[1385,1395,1405],{"type":33,"tag":144,"props":1386,"children":1387},{},[1388,1393],{"type":33,"tag":56,"props":1389,"children":1390},{},[1391],{"type":38,"value":1392},"Edge SSR:",{"type":38,"value":1394}," Oxygen edge на глобальной сети PoP (как Cloudflare) рендерит HTML ближайшему edge к пользователю",{"type":33,"tag":144,"props":1396,"children":1397},{},[1398,1403],{"type":33,"tag":56,"props":1399,"children":1400},{},[1401],{"type":38,"value":1402},"Streaming SSR:",{"type":38,"value":1404}," поддержка Remix позволяет рендерить above-fold контент мгновенно, ниже-fold ленивая загрузка",{"type":33,"tag":144,"props":1406,"children":1407},{},[1408,1413],{"type":33,"tag":56,"props":1409,"children":1410},{},[1411],{"type":38,"value":1412},"Оптимизированный bundle:",{"type":38,"value":1414}," Vite build с автоматическим code splitting, tree shaking, динамический import — JS bundle на 40% меньше",{"type":33,"tag":34,"props":1416,"children":1417},{},[1418],{"type":38,"value":1419},"Пример: ленивая загрузка grid продуктов (Hydrogen):",{"type":33,"tag":226,"props":1421,"children":1423},{"className":228,"code":1422,"language":230,"meta":17,"style":17},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx\nimport {Await} from '@remix-run\u002Freact';\nimport {Suspense} from 'react';\n\nexport async function loader({params, context}: LoaderFunctionArgs) {\n  const productsPromise = context.storefront.query(PRODUCTS_QUERY, {\n    variables: {handle: params.handle},\n  });\n  \n  return defer({products: productsPromise}); \u002F\u002F Streaming promise\n}\n\nexport default function Collection() {\n  const {products} = useLoaderData\u003Ctypeof loader>();\n  \n  return (\n    \u003CSuspense fallback={\u003CProductGridSkeleton \u002F>}>\n      \u003CAwait resolve={products}>\n        {(data) => \u003CProductGrid products={data.products} \u002F>}\n      \u003C\u002FAwait>\n    \u003C\u002FSuspense>\n  );\n}\n",[1424],{"type":33,"tag":90,"props":1425,"children":1426},{"__ignoreMap":17},[1427,1435,1460,1485,1492,1543,1581,1588,1595,1603,1625,1632,1639,1665,1710,1718,1730,1767,1794,1842,1859,1875,1883],{"type":33,"tag":236,"props":1428,"children":1429},{"class":238,"line":239},[1430],{"type":33,"tag":236,"props":1431,"children":1432},{"style":243},[1433],{"type":38,"value":1434},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx\n",{"type":33,"tag":236,"props":1436,"children":1437},{"class":238,"line":249},[1438,1442,1447,1451,1456],{"type":33,"tag":236,"props":1439,"children":1440},{"style":253},[1441],{"type":38,"value":256},{"type":33,"tag":236,"props":1443,"children":1444},{"style":259},[1445],{"type":38,"value":1446}," {Await} ",{"type":33,"tag":236,"props":1448,"children":1449},{"style":253},[1450],{"type":38,"value":267},{"type":33,"tag":236,"props":1452,"children":1453},{"style":270},[1454],{"type":38,"value":1455}," '@remix-run\u002Freact'",{"type":33,"tag":236,"props":1457,"children":1458},{"style":259},[1459],{"type":38,"value":278},{"type":33,"tag":236,"props":1461,"children":1462},{"class":238,"line":281},[1463,1467,1472,1476,1481],{"type":33,"tag":236,"props":1464,"children":1465},{"style":253},[1466],{"type":38,"value":256},{"type":33,"tag":236,"props":1468,"children":1469},{"style":259},[1470],{"type":38,"value":1471}," {Suspense} ",{"type":33,"tag":236,"props":1473,"children":1474},{"style":253},[1475],{"type":38,"value":267},{"type":33,"tag":236,"props":1477,"children":1478},{"style":270},[1479],{"type":38,"value":1480}," 'react'",{"type":33,"tag":236,"props":1482,"children":1483},{"style":259},[1484],{"type":38,"value":278},{"type":33,"tag":236,"props":1486,"children":1487},{"class":238,"line":312},[1488],{"type":33,"tag":236,"props":1489,"children":1490},{"emptyLinePlaceholder":316},[1491],{"type":38,"value":319},{"type":33,"tag":236,"props":1493,"children":1494},{"class":238,"line":322},[1495,1499,1503,1507,1511,1515,1519,1523,1527,1531,1535,1539],{"type":33,"tag":236,"props":1496,"children":1497},{"style":253},[1498],{"type":38,"value":328},{"type":33,"tag":236,"props":1500,"children":1501},{"style":253},[1502],{"type":38,"value":950},{"type":33,"tag":236,"props":1504,"children":1505},{"style":253},[1506],{"type":38,"value":333},{"type":33,"tag":236,"props":1508,"children":1509},{"style":336},[1510],{"type":38,"value":959},{"type":33,"tag":236,"props":1512,"children":1513},{"style":259},[1514],{"type":38,"value":344},{"type":33,"tag":236,"props":1516,"children":1517},{"style":347},[1518],{"type":38,"value":968},{"type":33,"tag":236,"props":1520,"children":1521},{"style":259},[1522],{"type":38,"value":973},{"type":33,"tag":236,"props":1524,"children":1525},{"style":347},[1526],{"type":38,"value":978},{"type":33,"tag":236,"props":1528,"children":1529},{"style":259},[1530],{"type":38,"value":355},{"type":33,"tag":236,"props":1532,"children":1533},{"style":253},[1534],{"type":38,"value":360},{"type":33,"tag":236,"props":1536,"children":1537},{"style":336},[1538],{"type":38,"value":991},{"type":33,"tag":236,"props":1540,"children":1541},{"style":259},[1542],{"type":38,"value":996},{"type":33,"tag":236,"props":1544,"children":1545},{"class":238,"line":386},[1546,1550,1555,1560,1564,1568,1572,1577],{"type":33,"tag":236,"props":1547,"children":1548},{"style":253},[1549],{"type":38,"value":1004},{"type":33,"tag":236,"props":1551,"children":1552},{"style":443},[1553],{"type":38,"value":1554}," productsPromise",{"type":33,"tag":236,"props":1556,"children":1557},{"style":253},[1558],{"type":38,"value":1559}," =",{"type":33,"tag":236,"props":1561,"children":1562},{"style":259},[1563],{"type":38,"value":1031},{"type":33,"tag":236,"props":1565,"children":1566},{"style":336},[1567],{"type":38,"value":1036},{"type":33,"tag":236,"props":1569,"children":1570},{"style":259},[1571],{"type":38,"value":1041},{"type":33,"tag":236,"props":1573,"children":1574},{"style":443},[1575],{"type":38,"value":1576},"PRODUCTS_QUERY",{"type":33,"tag":236,"props":1578,"children":1579},{"style":259},[1580],{"type":38,"value":1051},{"type":33,"tag":236,"props":1582,"children":1583},{"class":238,"line":400},[1584],{"type":33,"tag":236,"props":1585,"children":1586},{"style":259},[1587],{"type":38,"value":1059},{"type":33,"tag":236,"props":1589,"children":1590},{"class":238,"line":27},[1591],{"type":33,"tag":236,"props":1592,"children":1593},{"style":259},[1594],{"type":38,"value":1090},{"type":33,"tag":236,"props":1596,"children":1597},{"class":238,"line":482},[1598],{"type":33,"tag":236,"props":1599,"children":1600},{"style":259},[1601],{"type":38,"value":1602},"  \n",{"type":33,"tag":236,"props":1604,"children":1605},{"class":238,"line":507},[1606,1610,1615,1620],{"type":33,"tag":236,"props":1607,"children":1608},{"style":253},[1609],{"type":38,"value":392},{"type":33,"tag":236,"props":1611,"children":1612},{"style":336},[1613],{"type":38,"value":1614}," defer",{"type":33,"tag":236,"props":1616,"children":1617},{"style":259},[1618],{"type":38,"value":1619},"({products: productsPromise}); ",{"type":33,"tag":236,"props":1621,"children":1622},{"style":243},[1623],{"type":38,"value":1624},"\u002F\u002F Streaming promise\n",{"type":33,"tag":236,"props":1626,"children":1627},{"class":238,"line":533},[1628],{"type":33,"tag":236,"props":1629,"children":1630},{"style":259},[1631],{"type":38,"value":565},{"type":33,"tag":236,"props":1633,"children":1634},{"class":238,"line":550},[1635],{"type":33,"tag":236,"props":1636,"children":1637},{"emptyLinePlaceholder":316},[1638],{"type":38,"value":319},{"type":33,"tag":236,"props":1640,"children":1641},{"class":238,"line":559},[1642,1646,1651,1655,1660],{"type":33,"tag":236,"props":1643,"children":1644},{"style":253},[1645],{"type":38,"value":328},{"type":33,"tag":236,"props":1647,"children":1648},{"style":253},[1649],{"type":38,"value":1650}," default",{"type":33,"tag":236,"props":1652,"children":1653},{"style":253},[1654],{"type":38,"value":333},{"type":33,"tag":236,"props":1656,"children":1657},{"style":336},[1658],{"type":38,"value":1659}," Collection",{"type":33,"tag":236,"props":1661,"children":1662},{"style":259},[1663],{"type":38,"value":1664},"() {\n",{"type":33,"tag":236,"props":1666,"children":1668},{"class":238,"line":1667},14,[1669,1673,1677,1682,1686,1690,1695,1700,1705],{"type":33,"tag":236,"props":1670,"children":1671},{"style":253},[1672],{"type":38,"value":1004},{"type":33,"tag":236,"props":1674,"children":1675},{"style":259},[1676],{"type":38,"value":365},{"type":33,"tag":236,"props":1678,"children":1679},{"style":443},[1680],{"type":38,"value":1681},"products",{"type":33,"tag":236,"props":1683,"children":1684},{"style":259},[1685],{"type":38,"value":1017},{"type":33,"tag":236,"props":1687,"children":1688},{"style":253},[1689],{"type":38,"value":422},{"type":33,"tag":236,"props":1691,"children":1692},{"style":336},[1693],{"type":38,"value":1694}," useLoaderData",{"type":33,"tag":236,"props":1696,"children":1697},{"style":259},[1698],{"type":38,"value":1699},"\u003C",{"type":33,"tag":236,"props":1701,"children":1702},{"style":253},[1703],{"type":38,"value":1704},"typeof",{"type":33,"tag":236,"props":1706,"children":1707},{"style":259},[1708],{"type":38,"value":1709}," loader>();\n",{"type":33,"tag":236,"props":1711,"children":1713},{"class":238,"line":1712},15,[1714],{"type":33,"tag":236,"props":1715,"children":1716},{"style":259},[1717],{"type":38,"value":1602},{"type":33,"tag":236,"props":1719,"children":1721},{"class":238,"line":1720},16,[1722,1726],{"type":33,"tag":236,"props":1723,"children":1724},{"style":253},[1725],{"type":38,"value":392},{"type":33,"tag":236,"props":1727,"children":1728},{"style":259},[1729],{"type":38,"value":397},{"type":33,"tag":236,"props":1731,"children":1733},{"class":238,"line":1732},17,[1734,1738,1743,1748,1752,1757,1762],{"type":33,"tag":236,"props":1735,"children":1736},{"style":259},[1737],{"type":38,"value":406},{"type":33,"tag":236,"props":1739,"children":1740},{"style":443},[1741],{"type":38,"value":1742},"Suspense",{"type":33,"tag":236,"props":1744,"children":1745},{"style":336},[1746],{"type":38,"value":1747}," fallback",{"type":33,"tag":236,"props":1749,"children":1750},{"style":253},[1751],{"type":38,"value":422},{"type":33,"tag":236,"props":1753,"children":1754},{"style":259},[1755],{"type":38,"value":1756},"{\u003C",{"type":33,"tag":236,"props":1758,"children":1759},{"style":443},[1760],{"type":38,"value":1761},"ProductGridSkeleton",{"type":33,"tag":236,"props":1763,"children":1764},{"style":259},[1765],{"type":38,"value":1766}," \u002F>}>\n",{"type":33,"tag":236,"props":1768,"children":1770},{"class":238,"line":1769},18,[1771,1775,1780,1785,1789],{"type":33,"tag":236,"props":1772,"children":1773},{"style":259},[1774],{"type":38,"value":440},{"type":33,"tag":236,"props":1776,"children":1777},{"style":443},[1778],{"type":38,"value":1779},"Await",{"type":33,"tag":236,"props":1781,"children":1782},{"style":336},[1783],{"type":38,"value":1784}," resolve",{"type":33,"tag":236,"props":1786,"children":1787},{"style":253},[1788],{"type":38,"value":422},{"type":33,"tag":236,"props":1790,"children":1791},{"style":259},[1792],{"type":38,"value":1793},"{products}>\n",{"type":33,"tag":236,"props":1795,"children":1797},{"class":238,"line":1796},19,[1798,1803,1808,1813,1818,1823,1828,1833,1837],{"type":33,"tag":236,"props":1799,"children":1800},{"style":259},[1801],{"type":38,"value":1802},"        {(",{"type":33,"tag":236,"props":1804,"children":1805},{"style":347},[1806],{"type":38,"value":1807},"data",{"type":33,"tag":236,"props":1809,"children":1810},{"style":259},[1811],{"type":38,"value":1812},") ",{"type":33,"tag":236,"props":1814,"children":1815},{"style":253},[1816],{"type":38,"value":1817},"=>",{"type":33,"tag":236,"props":1819,"children":1820},{"style":259},[1821],{"type":38,"value":1822}," \u003C",{"type":33,"tag":236,"props":1824,"children":1825},{"style":443},[1826],{"type":38,"value":1827},"ProductGrid",{"type":33,"tag":236,"props":1829,"children":1830},{"style":336},[1831],{"type":38,"value":1832}," products",{"type":33,"tag":236,"props":1834,"children":1835},{"style":253},[1836],{"type":38,"value":422},{"type":33,"tag":236,"props":1838,"children":1839},{"style":259},[1840],{"type":38,"value":1841},"{data.products} \u002F>}\n",{"type":33,"tag":236,"props":1843,"children":1845},{"class":238,"line":1844},20,[1846,1851,1855],{"type":33,"tag":236,"props":1847,"children":1848},{"style":259},[1849],{"type":38,"value":1850},"      \u003C\u002F",{"type":33,"tag":236,"props":1852,"children":1853},{"style":443},[1854],{"type":38,"value":1779},{"type":33,"tag":236,"props":1856,"children":1857},{"style":259},[1858],{"type":38,"value":432},{"type":33,"tag":236,"props":1860,"children":1862},{"class":238,"line":1861},21,[1863,1867,1871],{"type":33,"tag":236,"props":1864,"children":1865},{"style":259},[1866],{"type":38,"value":539},{"type":33,"tag":236,"props":1868,"children":1869},{"style":443},[1870],{"type":38,"value":1742},{"type":33,"tag":236,"props":1872,"children":1873},{"style":259},[1874],{"type":38,"value":432},{"type":33,"tag":236,"props":1876,"children":1878},{"class":238,"line":1877},22,[1879],{"type":33,"tag":236,"props":1880,"children":1881},{"style":259},[1882],{"type":38,"value":556},{"type":33,"tag":236,"props":1884,"children":1886},{"class":238,"line":1885},23,[1887],{"type":33,"tag":236,"props":1888,"children":1889},{"style":259},[1890],{"type":38,"value":565},{"type":33,"tag":34,"props":1892,"children":1893},{},[1894],{"type":38,"value":1895},"Этот паттерн отправляет above-fold HTML мгновенно и выполняет hydration на клиенте — LCP падает с 2,6 сек до 1,9 сек благодаря этому.",{"type":33,"tag":41,"props":1897,"children":1899},{"id":1898},"матрица-решений-когда-выбирать-какой-вариант",[1900],{"type":38,"value":1901},"Матрица решений: когда выбирать какой вариант",{"type":33,"tag":34,"props":1903,"children":1904},{},[1905],{"type":38,"value":1906},"Наше decision tree:",{"type":33,"tag":34,"props":1908,"children":1909},{},[1910],{"type":33,"tag":56,"props":1911,"children":1912},{},[1913],{"type":38,"value":1914},"Выбирайте Liquid если:",{"type":33,"tag":1916,"props":1917,"children":1918},"ul",{},[1919,1924,1929,1934],{"type":33,"tag":144,"props":1920,"children":1921},{},[1922],{"type":38,"value":1923},"Годовой GMV \u003C$2M",{"type":33,"tag":144,"props":1925,"children":1926},{},[1927],{"type":38,"value":1928},"Менее 4 deployments в месяц",{"type":33,"tag":144,"props":1930,"children":1931},{},[1932],{"type":38,"value":1933},"Нет потребности в персонализации",{"type":33,"tag":144,"props":1935,"children":1936},{},[1937],{"type":38,"value":1938},"Текущая команда разработчиков theme Shopify",{"type":33,"tag":34,"props":1940,"children":1941},{},[1942],{"type":33,"tag":56,"props":1943,"children":1944},{},[1945],{"type":38,"value":1946},"Выбирайте Hydrogen если:",{"type":33,"tag":1916,"props":1948,"children":1949},{},[1950,1955,1960,1965],{"type":33,"tag":144,"props":1951,"children":1952},{},[1953],{"type":38,"value":1954},"Годовой GMV >$5M",{"type":33,"tag":144,"props":1956,"children":1957},{},[1958],{"type":38,"value":1959},"2+ deployments в неделю",{"type":33,"tag":144,"props":1961,"children":1962},{},[1963],{"type":38,"value":1964},"A\u002FB тест, персонализация, headless CMS интеграция в roadmap",{"type":33,"tag":144,"props":1966,"children":1967},{},[1968],{"type":38,"value":1969},"Можете инвестировать в современный frontend stack",{"type":33,"tag":34,"props":1971,"children":1972},{},[1973],{"type":38,"value":1974},"Серая зона ($2–5M GMV): смотрите на метрики вроде conversion rate, AOV, repeat purchase. Если у вас агрессивный CRO roadmap, переходите на Hydrogen — разница в velocity разработчиков окупается за счет ROI.",{"type":33,"tag":41,"props":1976,"children":1978},{"id":1977},"вывод-принять-компромиссы",[1979],{"type":38,"value":1980},"Вывод: принять компромиссы",{"type":33,"tag":34,"props":1982,"children":1983},{},[1984],{"type":38,"value":1985},"Hydrogen на 35–40% быстрее Liquid (по TTFB, LCP), velocity разработчиков выше в 3–5 раз, но стоимость миграции 120–600 часов. Стоит ли инвестировать зависит от темпа операционного growth.",{"type":33,"tag":34,"props":1987,"children":1988},{},[1989],{"type":38,"value":1990},"Из нашего опыта с проектами: среднее e-commerce приложение окупает миграцию Hydrogen за 6–9 месяцев — ускоряется velocity CRO итераций, падает цикл времени A\u002FB тестирования, сокращается время интеграции третьих сторон. Если вы планируете быстрый рост, Hydrogen имеет цифровое подтверждение. Если вы публикуете статический каталог, Liquid достаточно.",{"type":33,"tag":1992,"props":1993,"children":1994},"style",{},[1995],{"type":38,"value":1996},"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":17,"searchDepth":281,"depth":281,"links":1998},[1999,2002,2003,2006,2007,2008,2009],{"id":43,"depth":249,"text":46,"children":2000},[2001],{"id":130,"depth":281,"text":133},{"id":178,"depth":249,"text":181},{"id":634,"depth":249,"text":637,"children":2004},[2005],{"id":792,"depth":281,"text":795},{"id":1130,"depth":249,"text":1133},{"id":1256,"depth":249,"text":1259},{"id":1898,"depth":249,"text":1901},{"id":1977,"depth":249,"text":1980},"markdown","content:ru:tech:shopify-hydrogen-vs-liquid-razlastirilmis-metrikler.md","content","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-razlastirilmis-metrikler.md","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-razlastirilmis-metrikler","md",1785967486195]