Падручнік1 чэрвеня 2026 | FlexyConsent

Згода на cookie для Next.js, Gatsby і статычных сайтаў: кіраўніцтва па інтэграцыі для распрацоўшчыкаў

Праблема згоды на статычных сайтах

Сучасныя JavaScript-фрэймворкі, такія як Next.js, Gatsby і Nuxt.js, прынеслі змену парадыгмы ў спосаб стварэння і дастаўкі вэб-старонак. Старонкі папярэдне рэндэрацца падчас зборкі ці на серверы, а потым гідратуюцца на кліенце. Гэта стварае ўнікальную праблему для згоды на cookie: банер згоды павінен быць гатовы да выканання любых скрыптоў адсочвання, але сама старонка можа быць ужо адрэндэрана і закэшавана на мяжы сеткі.

Традыцыйныя CMP былі распрацаваны для серверна рэндэрымых PHP ці простых HTML-старонак, дзе дакумент загружаецца лінейна зверху ўніз. У свеце фрэймворкаў з падзелам кода, лянівай загрузкай і патокавым серверным рэндэрынгам гэтыя дапушчэнні парушаюцца. Каб правільна наладзіць згоду ў гэтых асяроддзях, трэба разумець канвеер рэндэрынгу.

Чаму таймінг важнейшы, чым вы думаеце

На стандартнай HTML-старонцы размяшчэнне скрыпта CMP у <head> перад іншымі скрыптамі простае. У Next.js App Router ці Gatsby сітуацыя складанейшая:

Асноўны прынцып такі: згода павінна ўсталёўвацца на ўзроўні скрыпта, а не на ўзроўні кампанента. Кампанент React, які рэндэрыць банер згоды, занадта спазняецца, калі становіцца інтэрактыўным толькі пасля гідратацыі.

Інтэграцыя з Next.js App Router

Next.js 13+ з App Router прынёс новы спосаб апрацоўкі скрыптоў. Вось рэкамендаваны падыход для інтэграцыі згоды:

Крок 1: загрузіце скрыпт CMP у каранёвым макеце

Выкарыстоўвайце кампанент Next.js Script са стратэгіяй beforeInteractive у вашым каранёвым layout.tsx. Гэта ўказвае Next.js укараніць скрыпт у зыходны HTML-дакумент да пачатку гідратацыі:

Стратэгія beforeInteractive крытычна важная. Стратэгія па змаўчанні afterInteractive загружае скрыпты пасля гідратацыі, што занадта позна для згоды. Пры beforeInteractive скрыпт CMP уключаецца ў серверна рэндэрымы HTML і выконваецца пры загрузцы старонкі.

Крок 2: усталюйце згоду па змаўчанні перад тэгамі Google

Перад вашым сніпетам Google Tag Manager ці gtag.js уключыце інлайн-скрыпт, які ўсталёўвае станы згоды па змаўчанні. Гэта гарантуе, што нават калі GTM загрузіцца да з'яўлення банера CMP, ён будзе паважаць налады адмовы па змаўчанні:

Гэты інлайн-скрыпт варта размясціць у <head> вашага каранёвага макета, перад скрыптамі CMP і GTM. У Next.js для гэтай мэты вы можаце выкарыстоўваць звычайны тэг <script> унутры элемента <head> вашага макета.

Крок 3: апрацоўвайце змены маршруту

У навігацыі аднастаронкавага дадатку скрыпт CMP загружаецца адзін раз, але змены маршруту не выклікаюць поўную перазагрузку старонкі. Ваша CMP павінна захоўвацца пры навігацыі на баку кліента. FlexyConsent апрацоўвае гэта аўтаматычна — пасля загрузкі яна застаецца актыўнай пры ўсіх зменах маршруту без паўторнай ініцыялізацыі.

Інтэграцыя з Next.js Pages Router

Для праектаў, якія ўсё яшчэ выкарыстоўваюць Pages Router, падыход аналагічны, але выкарыстоўвае _document.tsx замест каранёвага макета. Размясціце скрыпт CMP у кампаненце <Head> вашага карыстальніцкага класа Document. Стратэгія beforeInteractive працуе такім жа чынам у Pages Router.

Ключавое адрозненне ў тым, што _document.tsx рэндэрыцца толькі на серверы, таму любая логіка згоды тут гарантавана знаходзіцца ў зыходнай карыснай нагрузцы HTML.

Інтэграцыя са статычным сайтам Gatsby

Gatsby генеруе цалкам статычны HTML падчас зборкі. Сервернага рэндэрынгу падчас запыту няма, што спрашчае адны аспекты, але ўскладняе іншыя:

Падыход Gatsby на аснове часу зборкі азначае, што кожны HTML-файл на вашым CDN будзе ўключаць скрыпт згоды. Гэта на самай справе ідэальна — няма сервернай логікі, якая можа даць збой ці няправільна закэшавацца.

Меркаванні па Nuxt.js

Nuxt.js (на аснове Vue) мае свае ўласныя патэрны. У Nuxt 3 выкарыстоўвайце composable useHead ці канфігурацыю app head у nuxt.config.ts, каб дадаць скрыпт CMP глабальна. Nuxt падтрымлівае опцыю body: false (якая размяшчае скрыпты ў head) і атрыбут async для неблакіруючай загрузкі.

Для рэжыму сервернага рэндэрынгу Nuxt прымяняецца той жа прынцып: скрыпт CMP павінен быць у зыходным HTML-адказе, а не дынамічна ўкараняцца кампанентам Vue пасля мантавання.

Пазбяганне зруху макета

Банеры згоды сумна вядомыя тым, што выклікаюць Cumulative Layout Shift (CLS) — Core Web Vital, які ўплывае на SEO-рэйтынгі. Калі банер усплывае пасля рэндэрынгу старонкі, ён зрушвае кантэнт уніз ці нечакана накладваецца на яго.

Стратэгіі мінімізацыі CLS ад банераў згоды:

Фрэймворк-незалежны падыход FlexyConsent

FlexyConsent быў распрацаваны для працы з любым фрэймворкам — ці наогул без фрэймворка — за кошт працы на ўзроўні скрыпта, а не на ўзроўні кампанента. Вось чаму гэта важна:

Парада распрацоўшчыку: самы просты тэст правільнай інтэграцыі CMP — адкрыць укладку Network у браўзеры, адфільтраваць па дамёнах Google і перазагрузіць старонку. Ніякія запыты Google не павінны спрацоўваць да з'яўлення каманды згоды па змаўчанні ў кансолі. Калі яны спрацоўваюць, ваша CMP загружаецца занадта позна.

Бясплатны план FlexyConsent падтрымлівае неабмежаваныя прагляды старонак і працуе з Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix і звычайным HTML. Інтэграцыя аднолькавая для ўсіх іх: адзін тэг скрыпта, правільна размешчаны.

← Блог Чытаць усё →