Prerendering per dispositivo: servire due HTML diversi allo stesso URL

Next.js 15 permette di generare due HTML per lo stesso URL e di servirli in base al dispositivo. La scelta avviene prima della richiesta del browser, non lato client¹.

Una pagina di marketing non ha contenuti personalizzati per visitatore. È materiale statico. Il build produce l’HTML e il server lo consegna così com’è, senza un rendering aggiuntivo¹. Qui nasce l’intoppo: alcuni blocchi cambiano con il device. Footer compreso. Su telefono serve un’accordion, su laptop una griglia. Anche sezioni successive seguono lo stesso schema. Stesso contenuto, struttura diversa¹.

Con media query CSS, entrambe le versioni finiscono nello stesso documento. Una resta nascosta. Il risultato: markup duplicato. Ogni utente scarica HTML che non vedrà mai¹. Con JavaScript, la decisione arriva dopo il caricamento. La prima paint non è quella definitiva. La pagina cambia sotto gli occhi del lettore¹.

La proposta evita queste due strade. Due versioni prerenderizzate convivono e il sistema ne serve una sola, in base al device che effettua la richiesta. Una versione per file. Un unico URL. Nessuna logica di scelta nel browser¹.

Tutto vive nell’App Router di Next.js, versione 15. La separazione può anche spostarsi a un livello superiore, davanti all’applicazione¹. Dentro l’app, significa due file distinti sotto la stessa rotta. Davanti, entra in gioco una cache condivisa citata dall’autore. Il punto chiave: le due varianti della stessa pagina coesistono e il sistema ne restituisce una sola, coerente con il dispositivo¹.

Operativamente è semplice. Il server consegna l’HTML pensato per telefono o per laptop. Niente strutture raddoppiate da nascondere con CSS. Niente script che rimpastano il DOM dopo il load. L’utente riceve subito il documento giusto¹.

Il caso del footer rende chiaro il confine decisionale. Su mobile, l’accordion compatta i link. Su desktop, la griglia li dispone in larghezza. Le sezioni seguenti replicano il modello. Non cambia il testo, cambia l’albero del DOM che lo ospita¹. La soluzione non è far convivere due versioni nello stesso HTML. È scriverne due al build e servirle dallo stesso percorso.

C’è anche un effetto collaterale utile. I crawler leggono l’HTML che riceverebbe un telefono. Non trovano una struttura che muta dopo l’esecuzione di JavaScript. Non scaricano markup pensato per altri dispositivi¹.

Portare la stessa logica un livello sopra abilita un controllo identico fuori dall’app. Chi presidia lo strato davanti può applicare lo stesso principio. File e URL restano allineati. La separazione per dispositivo avviene prima che il browser entri in gioco¹.