Οδηγός1 Ιουνίου 2026 | FlexyConsent

Cookie Consent για Next.js, Gatsby και Static Sites: Οδηγός Ενσωμάτωσης για Προγραμματιστές

Το Πρόβλημα του Consent σε Static Sites

Τα σύγχρονα JavaScript frameworks όπως τα Next.js, Gatsby και Nuxt.js εισήγαγαν μια αλλαγή παραδείγματος στον τρόπο με τον οποίο κατασκευάζονται και σερβίρονται οι ιστοσελίδες. Οι σελίδες προ-αποδίδονται (pre-rendered) κατά το build time ή στον server και στη συνέχεια υδροδοτούνται (hydrated) στον client. Αυτό δημιουργεί μια μοναδική πρόκληση για το cookie consent: το banner συναίνεσης πρέπει να είναι έτοιμο πριν εκτελεστεί οποιοδήποτε tracking script, αλλά η ίδια η σελίδα μπορεί ήδη να έχει αποδοθεί και γίνει cache στο edge.

Τα παραδοσιακά CMPs σχεδιάστηκαν για server-rendered PHP ή απλές HTML σελίδες όπου το έγγραφο φορτώνεται γραμμικά από πάνω προς τα κάτω. Στον κόσμο των frameworks με code splitting, lazy loading και streaming server-side rendering, αυτές οι παραδοχές καταρρέουν. Η σωστή υλοποίηση του consent σε αυτά τα περιβάλλοντα απαιτεί κατανόηση του rendering pipeline.

Γιατί το Timing Μετράει Περισσότερο απ’ όσο Νομίζετε

Σε μια τυπική HTML σελίδα, η τοποθέτηση ενός CMP script στο <head> πριν από άλλα scripts είναι απλή. Στο Next.js App Router ή στο Gatsby, η κατάσταση είναι πιο περίπλοκη:

Το pre-rendered HTML φτάνει πρώτο: Ο browser λαμβάνει πλήρες HTML από το CDN ή τον server. Αν οποιαδήποτε inline scripts ή third-party tags είναι ενσωματωμένα σε αυτό το HTML, μπορεί να εκτελεστούν πριν φορτώσει η λογική του consent.
Κενό hydration: Το React hydration συμβαίνει αφού το HTML έχει ήδη ζωγραφιστεί (painted). Αν το consent component σας είναι React component, δεν υπάρχει σε λειτουργική κατάσταση μέχρι να ολοκληρωθεί το hydration. Κατά τη διάρκεια αυτού του κενού, Google tags ή analytics scripts μπορεί να ενεργοποιηθούν χωρίς συναίνεση.
Πολυπλοκότητες edge caching: Αν χρησιμοποιείτε ISR (Incremental Static Regeneration) ή edge functions, το HTML γίνεται cache. Δεν μπορείτε να εισάγετε δυναμικά λογική που εξαρτάται από το consent σε cached HTML χωρίς client-side μηχανισμό.

Η βασική αρχή είναι η εξής: η συναίνεση πρέπει να καθορίζεται σε επίπεδο script, όχι σε επίπεδο component. Ένα React component που αποδίδει ένα consent banner είναι ήδη αργά αν γίνεται interactive μόνο μετά το hydration.

Ενσωμάτωση στο Next.js App Router

Το Next.js 13+ με το App Router εισήγαγε έναν νέο τρόπο δι��χείρισης των scripts. Ακολουθεί η προτεινόμενη προσέγγιση για την ενσωμάτωση του consent:

Βήμα 1: Φορτώστε το CMP Script στο Root Layout

Χρησιμοποιήστε το Next.js Script component με τη στρατηγική beforeInteractive στο root layout.tsx. Αυτό λέει στο Next.js να εισάγει το script στο αρχικό HTML document, πριν ξεκινήσει το hydration:

Η στρατηγική beforeInteractive είναι κρίσιμη. Η προεπιλεγμένη στρατηγική afterInteractive φορτώνει scripts μετά το hydration, κάτι που είναι πολύ αργά για το consent. Με το beforeInteractive, το CMP script συμπεριλαμβάνεται στο server-rendered HTML και εκτελείται καθώς η σελίδα φορτώνει.

Βήμα 2: Ορίστε Default Consent Πριν από τα Google Tags

Πριν από το Google Tag Manager ή το gtag.js snippet, συμπεριλάβετε ένα inline script που ορίζει τις default καταστάσεις συναίνεσης. Αυτό διασφαλίζει ότι ακόμη κι αν τ�� GTM φορτώσει πριν εμφανιστεί το CMP banner, θα σεβαστεί τα default "denied" states:

Αυτό το inline script πρέπει να τοποθετηθεί στο <head> του root layout σας, πριν από τα CMP και GTM scripts. Στο Next.js, μπορείτε να χρησιμοποιήσετε ένα κανονικό <script> tag μέσα στο στοιχείο <head> του layout για αυτόν τον σκοπό.

Βήμα 3: Διαχείριση Αλλαγών Διαδρομής (Route Changes)

Στην πλοήγηση single-page application, το CMP script φορτώνει μία φορά, αλλά οι αλλαγές διαδρομής δεν προκαλούν πλήρες page reload. Το CMP σας πρέπει να παραμένει ενεργό σε client-side navigations. Το FlexyConsent το χειρίζεται αυτόματα — μόλις φορτώσει, παραμένει ενεργό σε όλες τις αλλαγές διαδρομής χωρίς επαν-αρχικοποίηση.

Ενσωμάτωση στο Next.js Pages Router

Για projects που χρησιμοποιούν ακόμη το Pages Router, η προσέγγιση είναι παρόμοια αλλά ��ρησιμοποιεί το _document.tsx αντί για το root layout. Τοποθετήστε το CMP script στο component <Head> της custom Document κλάσης σας. Η στρατηγική beforeInteractive λειτουργεί με τον ίδιο τρόπο στο Pages Router.

Η βασική διαφορά είναι ότι το _document.tsx γίνεται render μόνο στον server, επομένως οποιαδήποτε λογική consent εδώ είναι εγγυημένο ότι θα βρίσκεται στο αρχικό HTML payload.

Ενσωμάτωση Gatsby Static Site

Το Gatsby δημιουργεί πλήρως static HTML κατά το build time. Δεν υπάρχει server-side rendering κατά το request time, κάτι που απλοποιεί ορισμένες πτυχές αλλά περιπλέκει άλλες:

Χρησιμοποιήστε το gatsby-ssr.tsx για να εισάγετε το CMP script στο <head> κάθε σελίδας. Το API onRenderBody σάς επιτρέπει να προσθέτετε scripts στο head που θα υπάρχουν σε κάθε static HTML αρχείο.
Αποφύγετε Gatsby plugins που κάνουν lazy-load το consent: Ορισμένα community plugins τυλίγουν το consent σε React components πο�� κάνουν mount μόνο μετά το hydration. Αυτό δημιουργεί το timing gap που περιγράψαμε νωρίτερα.
Τοποθετήστε τα consent defaults inline: Χρησιμοποιήστε το setHeadComponents στο gatsby-ssr.tsx για να προσθέσετε ένα inline script που ορίζει default consent states. Αυτό το script θα βρίσκεται στο static HTML και θα εκτελείται άμεσα.

Η προσέγγιση build-time του Gatsby σημαίνει ότι κάθε HTML αρχείο στο CDN σας θα περιλαμβάνει το consent script. Αυτό είναι στην πραγματικότητα ιδανικό — δεν υπάρχει server λογική που μπορεί να αποτύχει ή να κάνει λάθος cache.

Σκέψεις για Nuxt.js

Το Nuxt.js (βασισμένο στο Vue) έχει τα δικά του patterns. Στο Nuxt 3, χρησιμοποιήστε το useHead composable ή τη ρύθμιση app head στο nuxt.config.ts για να προσθέσετε το CMP script global. Το Nuxt υποστηρίζει την επιλογή body: false (που τοποθετεί scripts στο head) και το attribute async για non-blocking φόρτωση.

Για τη λειτουργία server-side rendering του Nuxt, ισχύει η ίδια αρχή: το CMP script πρέπει να βρίσκεται στην αρχική HTML απόκριση, όχι να εισάγεται δυναμικά από Vue component μετά το mount.

Αποφυγή Layout Shift

Τα consent banners είναι διαβόητα για την πρόκληση Cumulative Layout Shift (CLS), ενός Core Web Vital που επηρεάζει τις SEO κατατάξεις. Όταν ένα banner εμφανίζεται αφού η σελίδα έχει ήδη αποδοθεί, σπρώχνει το περιεχόμενο προς τα κάτω ή το καλύπτει απροσδόκητα.

Στρατηγικές για ελαχιστοποίηση του CLS από consent banners:

Χρησιμοποιήστε banner στο κάτω μέρος: Τα banners στο κάτω μέρος του viewport δεν μετακινούν το περιεχόμενο της σελίδας. Αυτή είναι η πιο φιλική προσέγγιση ως προς το CLS.
Δεσμεύστε χώρο: Αν πρέπει να χρησιμοποιήσετε banner στο πάνω μέρος, δεσμεύστε τον κάθετο χώρο στο CSS ώστε το layout της σελίδας να λαμβάνει υπόψη το banner πριν αποδοθεί.
Αποφύγετε modal overlays στο load: Full-screen consent walls που εμφανίζονται αφού η σελίδα έχει αποδοθεί προκαλούν αντιληπτή αστάθεια layout. Αν χρειάζεστε wall, αποδώστε το ως μέρος της αρχικής κατάστασης της σελίδας.
Φορτώστε το CMP συγχρονισμένα στο head: Όταν το CMP φορτώνεται ως render-blocking script στο head, το banner μπορεί να εμφανιστεί ως μέρος του initial paint αντί να «πετάγεται» αργότερα.

Η Framework-Agnostic Προσέγγιση του FlexyConsent

Το FlexyConsent σχεδιάστηκε ώστε να λειτουργεί με οποιοδήποτε framework — ή και χωρίς framework — λειτουργώντας σε επίπεδο script και όχι σε επίπεδο component. Να γιατί αυτό έχει σημασία:

Ένα μόνο async script tag: Ένα <script> tag στο <head> είναι ό,τι χρειάζεται. Χωρίς npm packages, χωρίς framework-specific wrappers, χωρίς build configuration.
Τα consent defaults εκτελούνται άμεσα: Το script ορίζει τα Consent Mode V2 defaults ως πρώτη του ενέργεια, πριν από οποιοδήποτε callback ή DOM manipulation. Αυτό σημαίνει ότι τα Google tags σέβονται τη συναίνεση από το πρώτο millisecond.
Καμία εξάρτηση από το DOM: Η λογική consent δεν περιμένει το React, το Vue ή το Svelte να κάνουν hydrate. Λειτουργεί ανεξάρτητα από τον κύκλο ζωής του framework.
Λειτουργεί με SSG, SSR, ISR και CSR: Επειδή είναι απλό script, λειτουργεί με τον ίδιο τρόπο είτε η σελίδα δημιουργήθηκε στατικά, είτε αποδόθηκε στον server, είτε αναγεννήθηκε σταδιακά, είτε αποδόθηκε στον client.

Συμβουλή για προγραμματιστές: Το πιο απλό τεστ για σωστή ενσωμάτωση CMP είναι να ανοίξετε το Network tab του browser, να φιλτράρετε κατά Google domains και να κάνετε reload τη σελίδα. Δεν πρέπει να εκτελείται κανένα Google request πριν εμφανιστεί η εντολή default consent στην κονσόλα. Αν εμφανίζονται requests νωρίτερα, το CMP σας φορτώνει πολύ αργά.

Το δωρεάν πλάνο του FlexyConsent υποστηρίζει απεριόριστα pageviews και λειτουργεί με Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix και απλή HTML. Η ενσωμάτωση είναι η ίδια σε όλα: ένα script tag, σωστά τοποθετημένο.