Cómo funciona esta web
Es una web normal de restaurante. Por debajo está hecha con Astro, como Vweb hace las webs de sus clientes. Todo lo que dice esta página se mide en esta página, ahora mismo.
Las páginas son HTML, no aplicaciones
Astro convierte cada página en HTML normal al construir la web. El navegador recibe texto, fotos y CSS. Solo hay JavaScript donde algo tiene que reaccionar a lo que haces.
…KB JavaScript
Cada página existe antes de que nadie la pida
Cada idioma, cada plato y esta página se construyen una vez como archivos. No hay base de datos que esperar ni nada que se caiga a las 2 de la mañana.
46HTML
Islas: interactividad solo donde hace falta
El ticket del pedido es la única parte interactiva de la web. Es una pequeña isla de Preact que se activa sola; el resto de la página nunca la espera.
<OrderTicket client:load transition:persist />Cambiar de página se siente como una app
Abre un plato desde el menú: la foto y el nombre se deslizan hasta la página nueva. Tu pedido se queda donde está mientras la página cambia por debajo.
Las fotos se redimensionan y convierten solas
El dueño sube una foto. Astro crea versiones AVIF y WebP en varios anchos, y cada móvil descarga solo el tamaño que necesita.
Tu navegador descargó … (…) · original: 1200px, 69 KB · anchos disponibles: 320, 640, 960, 1200px El dueño cambia contenido, no código
Menú, precios, horarios y textos viven en archivos de contenido con un esquema. Cada campo que el dueño puede cambiar lleva una etiqueta en neerlandés para el CMS de Vweb. Un precio mal escrito no llega a publicarse: el build se detiene.
price: z.object({ xcg: z.number().positive().meta({ title: 'Prijs in XCG' }), usd: z.number().positive().meta({ title: 'Prijs in USD' }), }).meta({ title: 'Prijs' }),Cuatro idiomas, cuatro páginas reales
Cada idioma tiene su propia dirección, así Google enseña la correcta. Al cambiar de idioma sigues en el mismo plato.
Las fuentes se sirven desde este servidor
Astro descarga las fuentes al construir y las sirve desde esta web. Ningún dato de visitantes va a un servicio de fuentes.
0peticiones a servicios de fuentes
La siguiente página ya está cargando
Cuando pasas el ratón o tocas un enlace, Astro empieza a cargar esa página. Cuando haces clic, muchas veces ya está ahí.
prefetch: { prefetchAll: true }