Components from Server Scripts ← Back to Demo Home

Product Catalog

A <script data-bascik-server> returns one <product-card> tag per product, and the Worker renders each tag into the component's markup and scoped CSS at request time, exactly as the build renders a tag written in a page.

Search the catalog

The list below is filtered by ?q= on every request. Try frother or a query with no match.

No products match "nothing-matches".

Live stock (a nested server script)

This tile is a <product-card-live>, which carries its own server script. The Worker runs that script once for the rendered tile with the current request and splices its stock line into the tile.

Milk frother

$129

Live

In stock · checked for /catalog at request time

What the script returns

This sample is page markup, not script output, so it stays text: only what a server or stream script returns is rendered at request time. 

<product-card data-bascik-prop-name="Milk frother" data-bascik-prop-price="$129"><span>Best seller</span></product-card>

Next: Watch the same tiles stream in batches on the streamed catalog, or go back to Server Scripts.