Водич1. јун 2026. | FlexyConsent

Сагласност за колачиће за Next.js, Gatsby и статичке сајтове: водич за интеграцију за програмере

Проблем сагласности на статичким сајтовима

Модерни JavaScript оквири као што су Next.js, Gatsby и Nuxt.js увели су промену парадигме у начину на који се веб странице граде и испоручују. Странице се претходно рендерују у време билдовања или на серверу, а затим се на клијенту хидрирају. Ово ствара јединствен изазов за сагласност за колачиће: банер за сагласност мора бити спреман пре него што се изврши било који скрипт за праћење, али сама страница може већ бити рендерована и кеширана на ивици (edge).

Традиционални CMP-ови су дизајнирани за серверски рендерован PHP или једноставне HTML странице где се документ учитава линеарно од врха ка дну. У свету оквира са подељеним кодом (code splitting), лењим учитавањем (lazy loading) и стриминг серверским рендеровањем, те претпоставке се руше. Да би се сагласност исправно имплементирала у овим окружењима, потребно је разумети рендеринг „pipeline“.

Зашто је тајминг важнији него што мислите

На стандардној HTML страници, постављање CMP скрипта у <head> пре осталих скриптова је једноставно. У Next.js App Router-у или Gatsby-ју, ситуација је сложенија:

Кључни принцип је следећи: сагласност мора бити успостављена на нивоу скрипта, а не на нивоу компоненте. React компонента која р��ндерује банер за сагласност стиже прекасно ако постане интерактивна тек након хидрације.

Интеграција са Next.js App Router-ом

Next.js 13+ са App Router-ом је увео нови начин руковања скриптовима. Ово је препоручени приступ за интеграцију сагласности:

Корак 1: Учитајте CMP скрипт у root layout-у

Користите Next.js Script компоненту са стратегијом beforeInteractive у вашем root layout.tsx. Ово говори Next.js-у да убризга скрипт у иницијални HTML документ, пре почетка хидрације:

Стратегија beforeInteractive је критична. Подразумевана стратегија afterInteractive учитава скриптове након хидрације, што је прекасно за сагласност. Са beforeInteractive, CMP скрипт је укључен у серверски рендерован HTML и извршава се док се страница учитава.

Корак 2: Подесите подраз��мевану сагласност пре Google тагова

Пре вашег Google Tag Manager или gtag.js исечка, укључите inline скрипт који поставља подразумевана стања сагласности. Ово осигурава да чак и ако се GTM учита пре него што се појави CMP банер, он поштује подразумевана одбијања:

Овај inline скрипт треба да буде постављен у <head> вашег root layout-а, пре CMP и GTM скриптова. У Next.js-у можете користити обичан <script> таг унутар <head> елемента вашег layout-а за ову сврху.

Корак 3: Руковање променама рута

Код навигације у single-page апликацији, CMP скрипт се учитава једном, али промене рута не покрећу пуно поновно учитавање странице. Ваш CMP мора да опстане током навигације на клијенту. FlexyConsent ово обрађује аутоматски — једном када се учита, остаје активан преко свих промена рута без поновне иницијализације.

Интеграција са Next.js Pages Router-ом

За пројекте који и даље користе Pages Router, приступ је сличан, али користи _document.tsx уместо root layout-а. Поставите CMP скрипт у <Head> компоненту ваше прилагођене Document класе. Стратегија beforeInteractive функционише на исти начин у Pages Router-у.

Кључна разлика је у томе што се _document.tsx рендерује само на серверу, тако да је сва логика сагласности овде загарантовано у иницијалном HTML payload-у.

Интеграција статичког сајта у Gatsby-ју

Gatsby генерише потпуно статички HTML у време билдовања. Нема серверског рендеровања у тренутку захтева, што неке аспекте поједностављује, а друге компликује:

Gatsby-јев приступ у време билдовања значи да ће свака HTML датотека на вашем CDN-у садржати скрипт за сагласност. Ово је заправо идеално — нема серверске логике која може да откаже ил�� да буде погрешно кеширана.

Разматрања за Nuxt.js

Nuxt.js (заснован на Vue) има своје обрасце. У Nuxt 3, користите useHead composable или nuxt.config.ts конфигурацију заглавља апликације да глобално додате CMP скрипт. Nuxt подржава опцију body: false (која поставља скриптове у head) и async атрибут за неблокирајуће учитавање.

За Nuxt-ов режим серверског рендеровања, важи исти принцип: CMP скрипт мора бити у иницијалном HTML одговору, а не динамички убризган од стране Vue компоненте након mount-а.

Избегавање померања layout-а

Банери за сагласност су озлоглашени по изазивању 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-ом. Интеграција је иста у свима: један script таг, правилно постављен.

← Blog Прочитај све →