How this site works

This is a normal restaurant website. Underneath, it is built with Astro, the way Vweb builds client sites. Every claim on this page is measured on this page, right now.

  1. Pages ship HTML, not apps

    Astro renders every page to plain HTML when the site is built. A browser gets text, images and CSS. JavaScript only goes where something on the page has to react to you.

    …KB JavaScript

  2. Every page exists before anyone asks for it

    Each language, each dish and this page are built once as files. There is no database to wait for and nothing to break at 2 in the morning.

    46HTML

  3. Islands: interactivity only where it is needed

    The order ticket is the only interactive component on the site. It is a small Preact island that wakes up on its own; the rest of the page never waits for it.

    <OrderTicket client:load
      transition:persist />
  4. Moving between pages feels like an app

    Open a dish from the menu: the photo and the name glide into the new page. Your order stays where it is while the page changes underneath it.

  5. Photos are resized and converted automatically

    The owner uploads one photo. Astro makes modern AVIF and WebP versions in several widths, and every phone downloads only the size it needs.

    Kapsalon met kaas, friet en vlees
    Your browser downloaded … (…) · original: 1200px, 69 KB · available widths: 320, 640, 960, 1200px
  6. The owner edits content, not code

    Menu, prices, opening hours and texts live in content files with a schema. Every field the owner may change carries a Dutch label for the Vweb CMS. A wrong price format cannot be published: the build stops.

    price: z.object({
      xcg: z.number().positive().meta({ title: 'Prijs in XCG' }),
      usd: z.number().positive().meta({ title: 'Prijs in USD' }),
    }).meta({ title: 'Prijs' }),
  7. Four languages, four real pages

    Each language has its own address, so Google can show the right one. The switch keeps you on the same dish.

  8. Fonts load from this server

    Astro downloads the fonts at build time and serves them from this site. No visitor data goes to a font service.

    0requests to font services

  9. The next page is already loading

    When you hover or touch a link, Astro starts loading that page. By the time you click, it is often already there.

    prefetch: { prefetchAll: true }