Framework web detectat - Docs de MetricSpot

Què comprova aquesta auditoria

Identifica el framework JavaScript que renderitza la pàgina a partir d’un conjunt en capes d’empremtes. Guanya el primer senyal fiable, i el resultat és purament informatiu: aquesta regla mai fa fallar una auditoria.

Framework	Empremtes primàries
Next.js	`<script id="__NEXT_DATA__">`, `/_next/static/`, runtime `__next_f`, `x-powered-by: Next.js`
Nuxt	`window.__NUXT__`, `/_nuxt/`, `<div id="__nuxt">`, `<script id="__NUXT_DATA__">`
Astro	element personalitzat `astro-island`, atributs `data-astro-cid-*`, comentari `<!-- generated by Astro -->`, etiquetes d’estil `View-Transitions`
SvelteKit	`<script data-sveltekit-hydrate>`, `/_app/immutable/`, globals `__sveltekit_*`
Remix / React Router 7	`window.__remixContext`, `/build/_assets/`, `<link rel="modulepreload" href="/build/`, URLs `_data` d’estil Remix
Gatsby	`/page-data/`, `window.___gatsby`, `<div id="___gatsby">`
Create React App	`/static/js/main..js`, `/static/css/main..css`, `<div id="root">` sense marcatge SSR
Vite + React/Vue	`/assets/index-*.js`, `<script type="module">` amb entry amb hash, sense globals específics de framework
Vue (autònom)	`<div id="app">`, `window.Vue`, atributs `data-v-*` amb scope
Angular	`<app-root>`, atribut `ng-version` a l’element arrel

Quan MetricSpot no pot classificar la pàgina amb confiança (builds molt personalitzats, HTML renderitzat al servidor amb totes les signatures de framework eliminades), reporta “cap framework detectat” i tracta l’auditoria com un lloc HTML renderitzat al servidor.

Per què importa

Igual que la comprovació de CMS, aquest és context que permet a la resta de l’auditoria triar la recepta correcta.

Una etiqueta canonical que falta a Next.js s’arregla via l’export metadata a l’App Router; a Astro va al teu <Layout>; a CRA no hi ha un fix real sense un servidor.
Un Largest Contentful Paint fallit a Gatsby normalment significa mala configuració del plugin d’imatges; a Next.js apunta a hints de prioritat de next/image o el límit de streaming; en un SPA de Vite normalment significa renderització client de contingut above-the-fold (el fix real és SSR).
Un Interaction to Next Paint fallit a Remix o Next.js App Router apunta a client components sobredimensionats; a Astro apunta a illes que haurien de ser client:visible en lloc de client:load.
Un sitemap XML és @astrojs/sitemap a Astro, next-sitemap a Next.js Pages Router, o sitemap.ts a l’App Router, l’etiqueta de fix és diferent cada vegada.

El framework també prediu els sostres. Els llocs Astro o Next.js generats estàticament regularment puntuen 95+ a Lighthouse performance; els CRA o SPAs Vue vanilla renderitzats al client rarament passen de 70 sense code-splitting agressiu. Saber on ets et diu què val la pena optimitzar i què val la pena migrar.

Com solucionar-ho

No hi ha res a arreglar, aquesta regla és informativa. L’acció és llegir la resta de la teva auditoria a través de la lent de les convencions del teu framework.

Next.js (App Router), gairebé tot fix de metadada és l’export metadata a layout.tsx o page.tsx. Les capçaleres de seguretat van a next.config.js sota async headers(). Les imatges utilitzen next/image amb priority per a l’LCP.

Next.js (Pages Router), <Head> a pages/_app.tsx per a etiquetes a tot el lloc, <Head> per pàgina per a overrides. next-sitemap per a sitemaps. Capçaleres encara a next.config.js.

Astro, tot el que és a nivell de pàgina va al teu component <Layout> o a un bloc de frontmatter per pàgina. @astrojs/sitemap per a sitemaps, import.meta.env natiu per a dades en temps de build. El model de “zero JS per defecte” d’Astro fa que la majoria d’auditories de rendiment passin sense intervenció.

Nuxt 3, composable useHead() o definePageMeta() per a metadades. nuxt.config.ts per a configuració a tot el lloc. @nuxtjs/sitemap per a sitemaps.

SvelteKit, <svelte:head> a +layout.svelte per a etiquetes a tot el lloc; <svelte:head> per ruta per a overrides. Capçaleres via hook handle a src/hooks.server.ts.

Remix, exports meta i headers per ruta. Export links per a preloads i fulls d’estil.

Create React App / Vite SPA, la majoria de troballes d’auditoria de servidor renderitzat (capçaleres de seguretat, URLs canòniques, etiquetes OG) no es poden arreglar del tot sense renderització server-side o un pas de build que injecti meta. Considera migrar a Vite + SSR (amb un framework com Astro o Remix) abans de lluitar regla a regla.

Vue (autònom), utilitza vue-meta (Vue 2) o @unhead/vue (Vue 3) per a etiquetes head dinàmiques. Per a SEO de grau SSR, utilitza Nuxt.

Cap framework detectat, ets en HTML pla o una plantilla server-side (PHP, Rails, Django, plantilles Go). Cada fix és una edició directa de la plantilla d’origen; tens el màxim control i la mínima màgia.

Amaga les empremtes del framework si has de fer-ho. Pots eliminar capçaleres x-powered-by i treure comentaris , però les signatures de runtime (IDs de node de muntatge, paths d’actius amb hash, globals d’hidratació) estan integrades al framework i treure-les el trenca. No val l’esforç.

Preguntes freqüents

MetricSpot ha detectat el meu framework malament. Per què?

El cas més habitual és detectar un framework embolcall en lloc del meta-framework. Un lloc Next.js també és un lloc React, MetricSpot reporta Next.js perquè és més específic. Un lloc Nuxt també és un lloc Vue; reportem Nuxt. Si veus “React” però ets a Next.js, el teu build probablement està treient l’script __NEXT_DATA__, inusual però possible en modes de sortida personalitzats.

El framework afecta la meva puntuació d’auditoria?

No, aquesta regla és només informativa. Sí que canvia quines receptes veus: les fallades en altres llocs de l’auditoria recomanaran un fix apropiat per al stack detectat.

I si utilitzo múltiples frameworks (micro-frontends)?

MetricSpot reporta el framework que renderitza l’shell de la pàgina. Si el teu shell és Next.js però una secció és un micro-frontend Vue, reportarem Next.js. Les configuracions de micro-frontend d’una sola pàgina són rares a superfícies de màrqueting, si en tens una, probablement ja saps quin framework posseeix quina ruta i pots interpretar l’auditoria en conseqüència.