CMS & Website Rendering Architecture¶

This document describes how brekz-cms and brekz-website work together to render pages. The architecture spans multiple services and is important to understand before working on either.

Overview¶

flowchart TD
    Browser["Browser\nBlade + Vue.js"]

    subgraph website["brekz-website — Laravel + Custom Blade Directives"]
        Controllers["Controllers\nRoutes + data passing to Blade"]
        Blade["Blade Templates\nStatamic directives + Vue components"]
        Vue["Vue.js\nInteractive components hydrated client-side"]
        Repository["StatamicContentRepository\nAbstraction layer over Statamic API"]
    end

    subgraph cms["brekz-cms — Statamic"]
        CP["Statamic CP\nEditor admin UI"]
        Collections["Blueprints / Collections"]
        ContentAPI["Content API\nEntries, globals, taxonomies, nav"]
        Media["Spatie Media\nAssets + S3 image transforms"]
        Storage["Flat files / DB + S3 media storage"]
    end

    Browser -->|"HTTP request"| Controllers
    Controllers --> Blade
    Blade --> Vue
    Vue -->|"Hydrated HTML"| Browser
    Blade -->|"Custom Blade directives"| Repository
    Repository -->|"REST API"| ContentAPI
    CP --> Collections
    Collections --> ContentAPI
    ContentAPI --> Media
    Media --> Storage

How it works¶

1. Content is managed in Statamic¶

Content editors use the Statamic Control Panel to manage entries, globals, taxonomies and navigation. Content is stored in flat files or a database, with media assets in S3 via Spatie Media.

2. brekz-website fetches content via custom Blade directives¶

brekz-website uses custom Blade directives that call the StatamicContentRepository. This repository is an abstraction layer over Statamic's REST API. This means Statamic internals can change without affecting the rest of the application — only the repository needs to be updated.

3. Pages are warmed up¶

To ensure fast response times, pages are pre-built ("warmed up") into cached HTML. On an incoming request, the cached HTML is served directly without having to call Statamic at runtime.

4. Vue.js handles dynamic content client-side¶

Dynamic content (pricing, cart, user-specific data) is not part of the pre-rendered HTML. Vue.js components are hydrated client-side and fetch dynamic data via API calls after the page loads.

Why this approach?¶

Statamic's full-page caching works well for simple content sites, but Brekz has dynamic data (PrestaShop pricing, user sessions) that cannot be statically cached. By pre-rendering only the static HTML and loading dynamic parts via Vue.js, we get:

• Fast initial page load (pre-warmed HTML)
• Dynamic content still works per user
• Statamic remains purely a content tool, not an application server

Key files¶

Related services¶

• brekz-cms
• brekz-website
• Sections system