Návod1. júna 2026 | FlexyConsent

Cookie súhlas pre Next.js, Gatsby a statické weby: integračný návod pre vývojárov

Problém súhlasu na statických weboch

Moderné JavaScript frameworky ako Next.js, Gatsby a Nuxt.js priniesli paradigmatickú zmenu v tom, ako sa webové stránky vytvárajú a doručujú. Stránky sa predgenerujú v čase buildu alebo na serveri a potom sa na klientovi hydratujú. To vytvára špecifickú výzvu pre cookie súhlas: banner so súhlasom musí byť pripravený skôr, než sa spustia akékoľvek trackovacie skripty, ale samotná stránka už môže byť vyrenderovaná a cachovaná na edge vrstve.

Tradičné CMP boli navrhnuté pre serverom renderované PHP alebo jednoduché HTML stránky, kde sa dokument načítava lineárne zhora nadol. Vo svete frameworkov s code splittingom, lazy loadingom a streaming server-side renderingom tieto predpoklady prestávajú platiť. Správne nastavenie súhlasu v týchto prostrediach vyžaduje pochopenie renderovacieho pipeline.

Prečo je načasovanie dôležitejšie, než si myslíte

V štandardnej HTML stránke je umiestnenie CMP skriptu do <head> pred ostatné skripty jednoduché. V Next.js App Router alebo Gatsby je situácia zložitejšia:

Najprv dorazí predgenerované HTML: Prehliadač dostane kompletné HTML z CDN alebo servera. Ak sú v tomto HTML vložené inline skripty alebo third‑party tagy, môžu sa spustiť skôr, než sa načíta vaša logika súhlasu.
Hydratačná medzera: React hydratácia prebieha po tom, čo je HTML vykreslené. Ak je váš komponent so súhlasom React komponent, v plne funkčnom stave existuje až po dokončení hydratácie. Počas tejto medzery môžu Google tagy alebo analytické skripty odpaľovať bez súhlasu.
Komplikácie s edge cachovaním: Ak používate ISR (Incremental Static Regeneration) alebo edge funkcie, HTML je cachované. Do cachovaného HTML nemôžete dynamicky vkladať logiku závislú od súhlasu bez klientského mechanizmu.

Jadrový princíp je tento: súhlas musí byť nastavený na úrovni skriptu, nie komponentu. React komponent, ktorý renderuje banner so súhlasom, je príliš neskoro, ak sa stane interaktívnym až po hydratácii.

Integrácia s Next.js App Router

Next.js 13+ s App Router priniesol nový spôsob práce so skriptmi. Tu je odporúčaný postup integrácie súhlasu:

Krok 1: Načítajte CMP skript v root layout-e

Použite Next.js komponent Script so stratégiou beforeInteractive v root súbore layout.tsx. Tým poviete Next.js, aby vlo��il skript do počiatočného HTML dokumentu ešte pred začiatkom hydratácie:

Stratégia beforeInteractive je kritická. Predvolená stratégia afterInteractive načítava skripty po hydratácii, čo je pre súhlas príliš neskoro. S beforeInteractive je CMP skript súčasťou serverom renderovaného HTML a spúšťa sa počas načítavania stránky.

Krok 2: Nastavte predvolené súhlasy pred Google tagmi

Pred váš snippet Google Tag Manager alebo gtag.js vložte inline skript, ktorý nastaví predvolené stavy súhlasu. Tým zabezpečíte, že aj keď sa GTM načíta skôr, než sa zobrazí CMP banner, bude rešpektovať predvolené zamietnutie:

Tento inline skript by mal byť umiestnený v <head> vášho root layout-u, pred CMP a GTM skriptmi. V Next.js môžete na tento účel použiť bežný tag <script> vo vnútri elementu <head> v layout-e.

Krok 3: Ošetrite zmeny trás

Pri navigácii v single-page aplikácii sa CMP skript načíta len raz, ale zmeny trás nespúšťajú plné obnovenie stránky. Vaše CMP musí pretrvávať naprieč klientskymi navigáciami. FlexyConsent to rieši automaticky — po načítaní zostáva aktívny pri všetkých zmenách trás bez opätovnej inicializácie.

Integrácia s Next.js Pages Router

Pre projekty, ktoré stále používajú Pages Router, je prístup podobný, ale využíva _document.tsx namiesto root layout-u. Umiestnite CMP skript do komponentu <Head> vo vašej vlastnej Document triede. Stratégia beforeInteractive funguje v Pages Router rovnako.

Kľúčový rozdiel je v tom, že _document.tsx sa renderuje iba na serveri, takže akákoľvek logika súhlasu tu je zaručene súčasťou počiatočného HTML payload-u.

Integrácia so statickým webom v Gatsby

Gatsby generuje plne statické HTML v čase buildu. Neexistuje server-side rendering pri každej požiadavke, čo niektoré aspekty zjednodušuje, ale iné komplikuje:

Použite gatsby-ssr.tsx na vloženie CMP skriptu do <head> každej stránky. API onRenderBody vám umožní pridať do head skripty, ktoré budú prítomné v každom statickom HTML súbore.
Vyhnite sa Gatsby pluginom, ktoré načítavajú súhlas lazy spôsobom: Niektoré komunitné pluginy obalia súhlas do React komponentov, ktoré sa mountujú až po hydratácii. To vytvára načasovaciu medzeru popísanú vyššie.
Umiestnite predvolené súhlasy inline: Použite setHeadComponents v gatsby-ssr.tsx na pridanie inline skriptu, ktorý nastaví predvolené stavy súhlasu. Tento skript bude v statickom HTML a spustí sa okamžite.

Build-time prístup Gatsby znamená, že každý HTML súbor na vašej CDN bude obsahovať skript so súhlasom. To je v skutočnosti ideálne — neexistuje žiadna serverová logika, ktorá by mohla zlyhať alebo byť nesprávne cachovaná.

Špecifiká Nuxt.js

Nuxt.js (postavený na Vue) má vlastné vzory. V Nuxt 3 použite composable useHead alebo konfiguráciu hlavičky aplikácie v nuxt.config.ts na globálne pridanie CMP skriptu. Nuxt podporuje možnosť body: false (umiestni skripty do head) a atribút async pre neblokujúce načítanie.

Pre server-side rendering mód v Nuxt platí rovnaký princíp: CMP skript musí byť v počiatočnej HTML odpovedi, nie dynamicky vložený Vue komponentom po mountnutí.

Vyhnutie sa posunu layoutu

Bannery so súhlasom sú nechválne známe tým, že spôsobujú Cumulative Layout Shift (CLS), Core Web Vital metriku, ktorá ovplyvňuje SEO. Keď sa banner objaví po vyrenderovaní stránky, posunie obsah nadol alebo ho neočakávane prekryje.

Stratégie na minimalizáciu CLS spôsobeného bannermi so súhlasom:

Použite banner umiestnený dole: Bannery v spodnej časti viewportu neposúvajú obsah stránky. Ide o najviac CLS‑friendly prístup.
Rezervujte priestor: Ak musíte použiť horný banner, rezervujte vertikálny priestor v CSS tak, aby layout stránky s bannerom počítal ešte pred jeho vykreslením.
Vyhnite sa modálnym overlayom pri načítaní: Full-screen „consent wall“ zobrazený po vyrenderovaní stránky spôsobuje vnímanú nestabilitu layoutu. Ak potrebujete wall, renderujte ho ako súčasť počiatočného stavu stránky.
Načítajte CMP synchronne v head: Keď je CMP načítaný ako render‑blocking skript v head, banner sa môže zobraziť ako súčasť počiatočného paintu namiesto toho, aby „vyskočil“ neskôr.

Framework-agnostický prístup FlexyConsent

FlexyConsent bol navrhnutý tak, aby fungoval s akýmkoľvek frameworkom — alebo aj bez frameworku — tým, že pracuje na úrovni skriptu, nie komponentu. Prečo na tom záleží:

Jediný async script tag: Stačí jeden tag <script> v <head>. Žiadne npm balíčky na inštaláciu, žiadne framework‑špecifické wrappery, žiadna build konfigurácia.
Predvolené súhlasy sa spúšťajú okamžite: Skript nastaví predvolené hodnoty Consent Mode V2 ako svoju prvú akciu, ešte pred akýmkoľvek callbackom alebo manipuláciou s DOM. To znamená, že Google tagy rešpektujú súhlas od prvej milisekundy.
Bez závislosti na DOM: Logika súhlasu nečaká na hydratáciu React, Vue ani Svelte. Funguje nezávisle od lifecycle frameworku.
Funguje so SSG, SSR, ISR aj CSR: Keďže ide o obyčajný skript, správa sa identicky bez ohľadu na to, či bola stránka staticky generovaná, serverom renderovaná, inkrementálne regenerovaná alebo renderovaná na klientovi.

Tip pre vývojárov: Najjednoduchší test správnej integrácie CMP je otvoriť Network panel v prehliadači, filtrovať podľa domén Google a obnoviť stránku. Pred tým, než sa v konzole objaví príkaz s predvoleným súhlasom, by sa nemali odosielať žiadne požiadavky na Google. Ak sa odosielajú, vaše CMP sa načítava príliš neskoro.

Bezplatný plán FlexyConsent podporuje neobmedzený počet zobrazení stránok a funguje s Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix a čistým HTML. Integrácia je vo všetkých prípadoch rovnaká: jeden script tag, správne umiestnený.