Vodič1. lipnja 2026. | FlexyConsent

Suglasnost za kolačiće za Next.js, Gatsby i statične stranice: Vodič za integraciju za developere

Problem suglasnosti na statičnim stranicama

Moderni JavaScript okviri poput Next.js, Gatsby i Nuxt.js uveli su promjenu paradigme u načinu na koji se web stranice grade i isporučuju. Stranice se unaprijed renderiraju u vrijeme builda ili na poslužitelju, a zatim se na klijentu hidriraju. To stvara jedinstveni izazov za suglasnost za kolačiće: banner za suglasnost mora biti spreman prije nego što se pokrenu bilo kakvi skripte za praćenje, ali sama stranica može već biti renderirana i keširana na edgeu.

Tradicionalni CMP-ovi dizajnirani su za server-renderirani PHP ili jednostavne HTML stranice gdje se dokument učitava linearno od vrha prema dnu. U svijetu okvira s dijeljenjem koda, lijenim učitavanjem i streaming server-side renderiranjem, te pretpostavke se ruše. Ispravno postavljanje suglasnosti u tim okruženjima zahtijeva razumijevanje rendering pipelinea.

Zašto je tajming važniji nego što mislite

Na standardnoj HTML stranici, postavljanje CMP skripte u <head> prije ostalih skripti je jednostavno. U Next.js App Routeru ili Gatsbyju situacija je složenija:

Prvo stiže prerenderirani HTML: Preglednik prima kompletan HTML s CDN-a ili poslužitelja. Ako su u taj HTML ugrađene inline skripte ili treće strane tagovi, oni se mogu izvršiti prije nego što se učita vaša logika suglasnosti.
Jaz hidratacije: React hidratacija događa se nakon što je HTML iscrtan. Ako je vaš banner za suglasnost React komponenta, ona ne postoji u funkcionalnom stanju dok se hidratacija ne dovrši. Tijekom tog jaza, Google tagovi ili analitičke skripte mogu se pokrenuti bez suglasnosti.
Komplikacije s edge keširanjem: Ako koristite ISR (Incremental Static Regeneration) ili edge funkcije, HTML se kešira. Ne možete dinamički ubrizgavati logiku koja ovisi o suglasnosti u keširani HTML bez mehanizma na strani klijenta.

Temeljno načelo je ovo: suglasnost se mora uspostaviti na razini skripte, a ne na razini komponente. React komponenta koja prikazuje banner za suglasnost dolazi prekasno ako postane interaktivna tek nakon hidratacije.

Integracija s Next.js App Routerom

Next.js 13+ s App Routerom uveo je novi način rukovanja skriptama. Ovo je preporučeni pristup za integraciju suglasnosti:

Korak 1: Učitajte CMP skriptu u root layoutu

Koristite Next.js Script komponentu sa strategijom beforeInteractive u vašem root layout.tsx. Time govorite Next.js-u da ubrizga skriptu u početni HTML dokument, prije nego što hidratacija započne:

Strategija beforeInteractive je ključna. Zadana strategija afterInteractive učitava skripte nakon hidratacije, što je prekasno za suglasnost. S beforeInteractive, CMP skripta je uključena u server-renderirani HTML i izvršava se dok se stranica učitava.

Korak 2: Postavite zadane postavke suglasnosti prije Google tagova

Prije vašeg Google Tag Manager ili gtag.js isječka, uključite inline skriptu koja postavlja zadana stanja suglasnosti. To osigurava da čak i ako se GTM učita prije nego što se pojavi CMP banner, poštuje zadane odbijene postavke:

Ova inline skripta treba biti smještena u <head> vašeg root layouta, prije CMP i GTM skripti. U Next.js-u za tu svrhu možete koristiti običan <script> tag unutar <head> elementa vašeg layouta.

Korak 3: Rukovanje promjenama ruta

Kod navigacije u single-page aplikaciji, CMP skripta se učitava jednom, ali promjene ruta ne pokreću potpuno ponovno učitavanje stranice. Vaš CMP mora opstati kroz navigacije na strani klijenta. FlexyConsent to rješava automatski — jednom kada se učita, ostaje aktivan kroz sve promjene ruta bez ponovne inicijalizacije.

Integracija s Next.js Pages Routerom

Za projekte koji još koriste Pages Router, pristup je sličan, ali koristi _document.tsx umjesto root layouta. Postavite CMP skriptu u <Head> komponentu vaše prilagođene Document klase. Strategija beforeInteractive radi na isti način u Pages Routeru.

Ključna razlika je u tome što se _document.tsx renderira samo na poslužitelju, tako da je svaka logika suglasnosti ovdje zajamčeno u početnom HTML payloadu.

Integracija statičnih stranica u Gatsbyju

Gatsby generira potpuno statični HTML u vrijeme builda. Nema server-side renderiranja u trenutku zahtjeva, što neke aspekte pojednostavljuje, ali druge komplicira:

Koristite gatsby-ssr.tsx za ubrizgavanje CMP skripte u <head> svake stranice. API onRenderBody omogućuje dodavanje skripti u head koje će biti prisutne u svakoj statičnoj HTML datoteci.
Izbjegavajte Gatsby plugine koji lijeno učitavaju suglasnost: Neki community plugini omataju suglasnost u React komponente koje se montiraju tek nakon hidratacije. To stvara vremenski jaz opisan ranije.
Postavite zadane postavke suglasnosti inline: Koristite setHeadComponents u gatsby-ssr.tsx za dodavanje inline skripte koja postavlja zadana stanja suglasnosti. Ta skripta bit će u statičnom HTML-u i izvršit će se odmah.

Gatsbyjev pristup u vrijeme builda znači da će svaka HTML datoteka na vašem CDN-u uključivati skriptu za suglasnost. To je zapravo idealno — nema poslužiteljske logike koja može zakazati ili biti pogrešno keširana.

Razmatranja za Nuxt.js

Nuxt.js (baziran na Vueu) ima vlastite obrasce. U Nuxt 3 koristite useHead composable ili nuxt.config.ts konfiguraciju app heada za globalno dodavanje CMP skripte. Nuxt podržava opciju body: false (koja postavlja skripte u head) i atribut async za neblokirajuće učitavanje.

Za Nuxtov način server-side renderiranja vrijedi isto načelo: CMP skripta mora biti u početnom HTML odgovoru, a ne dinamički ubrizgana Vue komponentom nakon mounta.

Izbjegavanje pomaka layouta

Banneri za suglasnost ozloglašeni su po uzrokovanju Cumulative Layout Shift (CLS), Core Web Vital metrike koja utječe na SEO rangiranje. Kada se banner pojavi nakon što se stranica renderira, gura sadržaj prema dolje ili ga neočekivano prekriva.

Strategije za minimiziranje CLS-a od bannera za suglasnost:

Koristite banner pozicioniran na dnu: Banneri na dnu vidljivog područja ne pomiču sadržaj stranice. Ovo je pristup koji je najprijateljskiji za CLS.
Rezervirajte prostor: Ako morate koristiti gornji banner, rezervirajte vertikalni prostor u svom CSS-u kako bi se layout stranice prilagodio banneru prije nego što se prikaže.
Izbjegavajte modalne overlaya pri učitavanju: Full-screen zidovi za suglasnost koji se pojavljuju nakon što je stranica renderirana uzrokuju percipiranu nestabilnost layouta. Ako trebate zid, renderirajte ga kao dio početnog stanja stranice.
Učitajte CMP sinkrono u headu: Kada se CMP učitava kao render-blocking skripta u headu, banner se može pojaviti kao dio početnog prikaza umjesto da iskače kasnije.

Framework-agnostični pristup FlexyConsenta

FlexyConsent je dizajniran da radi s bilo kojim okvirom — ili bez ikakvog okvira — tako što djeluje na razini skripte, a ne na razini komponente. Evo zašto je to važno:

Jedan async script tag: Dovoljan je jedan <script> tag u <head>. Nema npm paketa za instalaciju, nema wrappera specifičnih za okvire, nema konfiguracije builda.
Zadane postavke suglasnosti pokreću se odmah: Skripta postavlja Consent Mode V2 zadane postavke kao svoju prvu radnju, prije bilo kakvog callbacka ili manipulacije DOM-om. To znači da Google tagovi poštuju suglasnost od prve milisekunde.
Bez ovisnosti o DOM-u: Logika suglasnosti ne čeka da se React, Vue ili Svelte hidriraju. Djeluje neovisno o lifecycleu okvira.
Radi sa SSG, SSR, ISR i CSR: Budući da je riječ o običnoj skripti, funkcionira identično bez obzira je li stranica statički generirana, renderirana na poslužitelju, inkrementalno regenerirana ili renderirana na klijentu.

Developerski savjet: Najjednostavniji test ispravne integracije CMP-a je otvoriti Network tab u pregledniku, filtrirati po Google domenama i ponovno učitati stranicu. Ne bi smio postojati nijedan Google zahtjev prije nego što se u konzoli pojavi naredba za zadanu suglasnost. Ako postoji, vaš se CMP učitava prekasno.

FlexyConsentov besplatni plan podržava neograničen broj prikaza stranica i radi s Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix i običnim HTML-om. Integracija je ista za sve njih: jedan script tag, pravilno postavljen.