# Server-Side Rendering & Templates ApexKit features a powerful built-in Server-Side Rendering (SSR) engine. It combines the flexibility of **JavaScript Controllers** with the blazing-fast **Tera HTML templating engine**. This architecture allows you to fetch data securely on the server and render dynamic HTML before it ever reaches the user's browser. * * * ## 1\. Anatomy of a Template A template in ApexKit consists of two parts: * **The Controller (JS):** A Server-Side JavaScript block that executes securely on the backend. * **The View (HTML):** A Tera HTML template that consumes the JSON returned by the Controller. To enable syntax highlighting in standard code editors (like VS Code), we wrap the Controller logic inside a standard `

{{ post.title }}
No posts found.

Rendered for: {{ viewer }}

``` * * * ## 2\. The Request Payload & Authorization Templates are automatically accessible via the `/render/{slug}` URL. When a user visits a template route, the Controller's `req.json()` method yields a payload containing URL parameters, headers, and the authenticated user's claims. ### The Payload Object ```json { "params": { "id": "5" // Extracted from URL query string (e.g., ?id=5) }, "headers": { "user-agent": "Mozilla/5.0...", "host": "localhost:5000" }, "is_htmx": true, // True if the request was made via HTMX "auth": { "id": 1, "email": "user@example.com", "role": "admin" } // Null if the user is not logged in } ``` ### Protecting a Route You can easily build secure, private pages by checking the `auth` object. If the user is not authenticated, simply return a standard HTTP Response with a `401 Unauthorized` status. The frontend client (`apex.js`) will catch this and redirect the user to the login page. ```javascript ``` * * * ## 3\. The Universal Client (`apex.js`) & HTMX ApexKit is uniquely designed to run multi-tenant architecture and isolated sandboxes natively. To ensure your HTML templates work flawlessly across the Root app, Tenants, and Sandboxes *without hardcoding URLs*, ApexKit includes a built-in script called `apex.js`. ### What `apex.js` does: * **Dynamic Routing:** Automatically detects if the app is running in `/tenant/xyz` or `/sandbox/abc` and prefixes all API requests. * **Token Injection:** Automatically retrieves the JWT from `localStorage` and injects it into all `fetch()` and `htmx` headers. * **Auth Helpers:** Exposes a global `$apex` object with `.login()` and `.logout()` methods. ### Setting up the Base Layout Always include HTMX and `apex.js` in your base template or `index.html`: ```html ``` ### Creating a Login Form Use the `$apex` helper to easily log users in and route them to the dashboard: ```html ``` * * * ## 4\. Components & Includes As your UI grows, you should split it into reusable components. ApexKit supports this natively via the `{% include %}` tag. ### ⚠️ The Golden Rule of Components **The SSR JavaScript block (`// ---@@ssr`) only executes on the Route Controller.** Any JavaScript written inside an included component template will be ignored. The Route template (the one mapped to the URL) must fetch **all** the necessary data for itself and its children, and pass it down. **Example Component (`components/navbar`):** ```html ``` **Example Route Controller (`dashboard`):** ```html

{% include "components/navbar" %}

Dashboard Content

``` * * * ## 5\. Tera Syntax Cheat Sheet ApexKit uses the Tera templating engine (similar to Jinja2, Django, and Twig). ### Variables & Output ```html {{ user.email }} {{ post.title | upper }} {{ post.content | safe }} {{ posts | length }} {{ data | debug }} ``` ### Conditionals ```html {% if user.role == "admin" %} Admin Panel {% elif user.role == "editor" %} Editor Panel {% else %}

Standard User

{% endif %} ``` ### Loops ```html

{{ loop.index }}. {{ item.name }}
No items found.

```

{{ title }}

Dashboard Content

Scripting Engine Documentation

Related Guides

ApexKit Security Policies & RLS Guide

GraphQL API Documentation

Server-Side Rendering & Templates