Qo'llanma1-iyun 2026 | FlexyConsent

Next.js, Gatsby va Statik Saytlar uchun Cookie Rozilik: Dasturchi Integratsiya Qo'llanmasi

Statik Sayt Rozilik Muammosi

Next.js, Gatsby va Nuxt.js kabi zamonaviy JavaScript freymvorklari veb-sahifalarni yaratish va yetkazish usulida paradigma o'zgarishini joriy qildi. Sahifalar build vaqtida yoki serverda oldindan renderlanadi, so'ngra klientda gidratsiyalanadi. Bu cookie rozilik uchun noyob muammo yaratadi: rozilik banneri har qanday kuzatuv skriptlari bajarilishidan oldin tayyor bo'lishi kerak, lekin sahifaning o'zi allaqachon renderlangan va edge-da keshlangan bo'lishi mumkin.

An'anaviy CMP-lar server tomonidan renderlangan PHP yoki oddiy HTML sahifalari uchun mo'ljallangan bo'lib, ularda hujjat yuqoridan pastga chiziqli ravishda yuklanadi. Kod bo'lish, dangasa yuklash va striming server tomonidan renderlash bilan freymvork dunyosida taxminlar buziladi. Ushbu muhitlarda rozilikni to'g'ri olish renderlash quvurini tushunishni talab qiladi.

Vaqt Siz O'ylaganingizdan Ko'ra Muhimroq

Standart HTML sahifasida CMP skriptini boshqa skriptlardan oldin <head> ichiga joylashtirish oddiy. Next.js App Router yoki Gatsby-da vaziyat murakkabroq:

Oldindan renderlangan HTML birinchi keladi: Brauzer CDN yoki serverdan to'liq HTML oladi. Agar biron-bir inline skriptlar yoki uchinchi tomon teglari ushbu HTML-ga joylashtirilgan bo'lsa, ular sizning rozilik mantiqingiz yuklanishidan oldin bajarilishi mumkin.
Gidratsiya bo'shlig'i: React gidratsiyasi HTML chizilgandan keyin sodir bo'ladi. Agar sizning rozilik komponenti React komponenti bo'lsa, u gidratsiya tugamaguncha funktsional holatda mavjud bo'lmaydi. Ushbu bo'shliq davomida Google teglari yoki analitika skriptlari roziliksiz ishga tushishi mumkin.
Edge keshlash murakkabliklari: Agar siz ISR (Incremental Static Regeneration) yoki edge funktsiyalardan foydalansangiz, HTML keshlanadi. Klient tomonidagi mexanizmsiz keshlangan HTML-ga rozilikka bog'liq mantiqni dinamik ravishda kiritib bo'lmaydi.

Asosiy tamoyil shunday: rozilik skript darajasida o'rnatilishi kerak, komponent darajasida emas. Rozilik bannerini renderlaydigan React komponenti, agar u faqat gidratsiyadan keyin interaktiv bo'lsa, juda kech.

Next.js App Router Integratsiyasi

Next.js 13+ App Router bilan skriptlarni boshqarishning yangi usulini joriy qildi. Rozilik integratsiyasi uchun tavsiya etilgan yondashuv:

1-qadam: Root Layout-da CMP Skriptini Yuklang

Root layout.tsx faylingizda beforeInteractive strategiyasi bilan Next.js Script komponentidan foydalaning. Bu Next.js-ga skriptni boshlang'ich HTML hujjatiga gidratsiya boshlanishidan oldin kiritishni aytadi:

beforeInteractive strategiyasi muhim. Standart afterInteractive strategiyasi skriptlarni gidratsiyadan keyin yuklaydi, bu rozilik uchun juda kech. beforeInteractive bilan CMP skripti serverdan renderlangan HTML-ga kiritiladi va sahifa yuklanayotganda bajariladi.

2-qadam: Google Teglaridan Oldin Standart Rozilikni O'rnating

Google Tag Manager yoki gtag.js snippetingizdan oldin standart rozilik holatlarini o'rnatadigan inline skriptni qo'shing. Bu GTM CMP banneri paydo bo'lishidan oldin yuklansa ham, rad etilgan standartlarga rioya qilishini ta'minlaydi:

Ushbu inline skript root layout-ingizning <head> qismida CMP va GTM skriptlaridan oldin joylashtirilishi kerak. Next.js-da siz bu maqsadda layout-ingizning <head> elementida oddiy <script> tegidan foydalanishingiz mumkin.

3-qadam: Marshrut O'zgarishlarini Boshqaring

Bitta sahifali ilova navigatsiyasida CMP skripti bir marta yuklanadi, lekin marshrut o'zgarishlari to'liq sahifa qayta yuklashni ishga tushirmaydi. Sizning CMP klient tomonidagi navigatsiyalarda saqlanishi kerak. FlexyConsent buni avtomatik ravishda boshqaradi — bir marta yuklangandan so'ng, u qayta ishga tushirishsiz barcha marshrut o'zgarishlarida faol bo'lib qoladi.

Next.js Pages Router Integratsiyasi

Pages Router-dan hali ham foydalanadigan loyihalar uchun yondashuv o'xshash, lekin root layout o'rniga _document.tsx ishlatadi. CMP skriptini maxsus Document klassingizning <Head> komponentiga joylashtiring. beforeInteractive strategiyasi Pages Router-da ham xuddi shunday ishlaydi.

Asosiy farq shundaki, _document.tsx faqat serverda renderlanadi, shuning uchun bu yerdagi har qanday rozilik mantiqi boshlang'ich HTML yuklamasida bo'lishi kafolatlanadi.

Gatsby Statik Sayt Integratsiyasi

Gatsby build vaqtida to'liq statik HTML yaratadi. So'rov vaqtida server tomonidan renderlash yo'q, bu ba'zi jihatlarni soddalashtiradi, lekin boshqalarini murakkablashtiradi:

Har bir sahifaning <head> qismiga CMP skriptini kiritish uchun gatsby-ssr.tsx dan foydalaning. onRenderBody API sizga har bir statik HTML faylida mavjud bo'ladigan head-ga skriptlarni qo'shish imkonini beradi.
Rozilikni dangasa yuklaydigan Gatsby plaginlaridan saqlaning: Ba'zi hamjamiyat plaginlari rozilikni faqat gidratsiyadan keyin o'rnatiladigan React komponentlariga o'raydi. Bu oldin muhokama qilingan vaqt bo'shlig'ini yaratadi.
Rozilik standartlarini inline joylashtiring: Standart rozilik holatlarini o'rnatadigan inline skript qo'shish uchun gatsby-ssr.tsx da setHeadComponents dan foydalaning. Bu skript statik HTML-da bo'ladi va darhol bajariladi.

Gatsby-ning build vaqtidagi yondashuvi CDN-ingizdagi har bir HTML faylda rozilik skripti bo'lishini anglatadi. Bu aslida ideal — muvaffaqiyatsiz bo'ladigan yoki noto'g'ri keshlanadigan server mantiqi yo'q.

Nuxt.js Mulohazalari

Nuxt.js (Vue-ga asoslangan) o'zining shablonlariga ega. Nuxt 3-da CMP skriptini global ravishda qo'shish uchun useHead composable yoki nuxt.config.ts app head konfiguratsiyasidan foydalaning. Nuxt body: false opsiyasini (skriptlarni head-ga joylashtiradigan) va blokirovka qilmaydigan yuklash uchun async atributini qo'llab-quvvatlaydi.

Nuxt-ning server tomonidan renderlash rejimi uchun xuddi shu tamoyil qo'llaniladi: CMP skripti boshlang'ich HTML javobida bo'lishi kerak, mount-dan keyin Vue komponenti tomonidan dinamik ravishda kiritilmasligi kerak.

Layout Siljishidan Qochish

Rozilik bannerlari SEO reytinglariga ta'sir qiladigan Core Web Vital bo'lgan Cumulative Layout Shift (CLS) ga sabab bo'lishi bilan mashhur. Sahifa renderlangandan keyin banner paydo bo'lganda, u kontentni pastga suradi yoki kutilmaganda qoplaydi.

Rozilik bannerlaridan CLS-ni kamaytirish strategiyalari:

Pastki joylashuvli banner ishlatish: Ko'rish oynasining pastki qismidagi bannerlar sahifa kontentini siljitmaydi. Bu eng CLS-ga qulay yondashuv.
Joy ajrating: Agar yuqori banner ishlatishingiz kerak bo'lsa, CSS-da vertikal joyni zaxiralang, shunda sahifa tartibi banner renderlanishidan oldin unga hisob beradi.
Yuklashda modal qoplamalardan saqlaning: Sahifa renderlangandan keyin paydo bo'ladigan to'liq ekranli rozilik devorlari sezilgan tartib beqarorligini keltirib chiqaradi. Agar sizga devor kerak bo'lsa, uni boshlang'ich sahifa holatining bir qismi sifatida renderlang.
CMP-ni head-da sinxron yuklang: CMP head-da renderlashni bloklaydigan skript sifatida yuklanganda, banner keyinroq paydo bo'lish o'rniga boshlang'ich chizilishning bir qismi sifatida paydo bo'lishi mumkin.

FlexyConsent-ning Freymvorkdan Mustaqil Yondashuvi

FlexyConsent istalgan freymvork bilan — yoki umuman freymvorksiz — ishlash uchun mo'ljallangan bo'lib, komponent darajasida emas, balki skript darajasida ishlaydi. Bu nima uchun muhim:

Bitta async skript tegi: <head> da bitta <script> tegi kifoya. O'rnatish uchun npm paketlari yo'q, freymvorkka xos o'ramalar yo'q, build konfiguratsiyasi yo'q.
Rozilik standartlari darhol ishga tushadi: Skript birinchi harakati sifatida Consent Mode V2 standartlarini o'rnatadi, har qanday callback yoki DOM manipulyatsiyasidan oldin. Bu Google teglarining birinchi millisekunddan boshlab rozilikka rioya qilishini anglatadi.
DOM bog'liqligi yo'q: Rozilik mantiqi React, Vue yoki Svelte gidratsiyalanishini kutmaydi. U freymvork hayot tsiklidan mustaqil ishlaydi.
SSG, SSR, ISR va CSR bilan ishlaydi: Bu oddiy skript bo'lgani uchun, sahifa statik yaratilgan, serverda renderlangan, inkremental qayta yaratilgan yoki klient tomonida renderlangan bo'lishidan qat'i nazar bir xil ishlaydi.

Dasturchi maslahati: To'g'ri CMP integratsiyasining eng oddiy testi brauzeringizning Network tabini ochish, Google domenlari bo'yicha filtrlash va sahifani qayta yuklashdir. Konsolda rozilik standart buyrug'i paydo bo'lishidan oldin hech qanday Google so'rovi ishga tushmasligi kerak. Agar ular ishga tushsa, CMP-ingiz juda kech yuklanmoqda.

FlexyConsent-ning bepul rejasi cheksiz sahifa ko'rishlarni qo'llab-quvvatlaydi va Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix va oddiy HTML bilan ishlaydi. Integratsiya ularning barchasida bir xil: bitta skript tegi, to'g'ri joylashtirilgan.