Server-Side Rendered Websites with API Maker: First Steps in TSX

Intro

0:00 API Maker serves websites too : pages written in TSX, rendered by the server right next to your data, edited and previewed in the panel. In the next few minutes, you make the first pages of the Calm Home shop.

A website, the usual way

0:14 A simple website usually means a separate frontend project, a server of its own to run and patch, an API layer between the pages and the data, with CORS and tokens in the browser, a build and a deploy pipeline, and a security review of every form. With API Maker, a website is a folder of TSX files in the panel, rendered by the server that already holds your data, compiled the moment you save, and safe by default : every value escaped, every form protected from CSRF, a strict content security policy.

0:50 In this video : a website from a template, the workspace, files that are routes, a page edited with a live preview, a new page from a model, the site in a real browser tab, and how the server renders it.

A website from a template

1:04 SSR Websites is in APIs and Logic. The account has no website yet : make the first one. Seven templates, each one a complete website with comments that say why it is written so : Starter shows every feature, Blank starts empty, then Blog, Shop, Dashboard, Landing page and Documentation. Shop lists what it shows : products with filters, a cart, sign in, checkout, and the orders of each customer.

1:32 The title is Calm Home, and the name is store. The name is the address : slash s s r, slash calmhome, the path of the account, slash store. Make the website.

The workspace

1:45 The workspace opens on the home page. On top, the address of the website, and the problems of its files : none. On the left, the files of the template : pages, components, lib, data, public, and site dot config, the settings of the website. In the middle, the editor, typed for the pages, and on the right, the shop itself.

Files are routes

2:07 Files are routes. The Routes view lists them : index is the home page, products slash slug takes a part of the path, and a file under api is a JSON endpoint. It says who may open each page, and which ones the server keeps in its cache. Preview opens one : the list of products.

Edit and preview

2:28 Now, change the home page. Its headline says : things for a calm home. Make it : Calm Home, made to last. Command S saves the file, the server compiles it at once, and the preview reloads by itself. No dev server, no build step. A mistake shows up at the save, not in front of a customer. Remove a closing tag, and save : the file does not compile, the count of problems turns red, and the compiler says what is wrong and where.

3:00 Undo, save, and the count is back to zero.

A page from a model

3:04 A new page starts from a model. New file from a template offers many : a page, a page with data, a form, a sign in page, a layout, a JSON endpoint, an RSS feed. Pick Page, name it about, and make it. Write what Calm Home is, save, and the preview shows slash about. The preview takes the size of any screen : pick a phone, turn it on its side, or type a size of your own.

3:32 The shop follows, because the template is responsive.

Settings

3:36 Settings says what the website may do, as site dot config says it : the tables it reads and writes, its sign in, its content security policy. For a domain of its own, it even writes the nginx and Caddy blocks for your reverse proxy.

A real browser tab

3:52 Now the real thing. The address opens the shop in a browser tab, and the new page with it. The browser gets finished HTML : one request, no JSON to fetch, and no token in JavaScript.

How it renders

4:05 How does it work? At the save, the compiler turns TSX into plain string templates, and reads the settings as values. Each version of the website is built once. Pages render in small JavaScript engines, on threads of their own, in the same process as the database clients of API Maker. Every request passes the same gates : the address, the session, who may open the page, the CSRF check, and the cache.

4:33 A page reads its data on the server, in a loader : that is the next video.

One layout

4:39 Every website has the same folders, its pages are typed, and its settings are values the server reads at the save, so a typo closes a page instead of opening it. That makes websites easy to review, for people and for AI assistants : the docs have a guide written for them.

Recap

4:57 To sum up. A website from a template, at an address of its own. Files are routes. Compiled at the save, previewed live. New pages from models. Rendered next to your data. Next : loaders, forms and sign in. API Maker. Build faster, spend smarter, deliver better.