SSR Websites: Page Cache, SEO, Sitemaps, Images and a Custom Domain

Intro

0:00 A website has to be fast, found by search engines, and safe with the code and pictures it sends. In this video, the Calm Home shop gets a page cache, SEO, a UI library pinned by its hashes, smaller images, and a domain of its own.

Going live, the usual way

0:17 Going live usually means a cache in front of the site, with rules and purges, and one day, a page of a signed-in customer served to everyone ; an SEO plugin for each framework, script tags copied from a CDN without their hashes, and a separate pipeline for images. With API Maker, a page says how long the server keeps it, a personal page is never shared, the server writes the head, the sitemap and robots, libraries are pinned with their hashes, and images are made smaller in the panel.

0:48 In this video : the page cache, what it saves, the head of a page and its JSON-LD, robots and the sitemap, UI libraries, images, security by default, and going live.

The page cache

1:00 The page of a product says it in its config : kept for sixty seconds, for everyone, with the tag products, then sent a little stale for five more minutes while one request renders it again. The Routes view shows a bolt for every kept page, and who may open each page : the account pages are for signed-in customers, as their layout says. The first request renders the page, with three reads of MongoDB : a miss, in a few milliseconds.

1:28 The next ones are hits, in a fraction of a millisecond : many times faster. A part of the address the page does not name, like utm source, makes no new copy. And a save of the website drops every copy : the next request renders the new version. The cache never shows the wrong page. A page is kept for everyone only when it says public and the visitor is not signed in.

1:54 A page that read a cookie, a header or the address of its visitor is never shared. ctx dot revalidate drops every page of a tag, after a change of stock. And each copy keeps a place for the CSRF token, so every visitor still gets their own.

SEO

2:12 Search engines and social networks read the head of a page. The template already gives this one a title, a description and a canonical address, from its data. Import serialize, give the page a picture for shared links, and write the JSON-LD of the product : its name, its description and its price. Save. A visitor sees the same page. The server writes the head : the title through the title template, the description, Open Graph and the card of a shared link, with full addresses, and the canonical address.

2:45 The JSON-LD comes out as safe JSON : serialize escapes anything that could close the script.

robots and sitemap

2:53 robots dot txt allows every page and names the sitemap. sitemap dot xml lists the pages that are for everyone : the account pages, closed by their layout, are not in it. A page that takes a value, like the page of each product, is listed by an endpoint : sitemap dot xml dot ts reads the catalog and answers the XML, with one address for each of the thirty six products.

UI libraries

3:21 UI libraries lists what the browsers of the visitors load : Bootstrap and its icons, for this shop. The catalog has the common libraries, each pinned to a version. GLightbox shows its files, each with its SHA 384 hash, and how a page uses it. Load it on the pages of the products only, and add it. In the page, every file of a library carries its hash, so a file changed on the CDN is refused by the browser.

3:50 A page that does not load GLightbox does not mention it. The content security policy lets in the origin of the libraries and the nonce of this answer : a script tag written by hand does not run. And a library can be hosted with the website instead, its files copied to public and checked against the same hashes.

Images

4:11 Photographs straight from a camera weigh megabytes. A right click on the folder of images, Compress images : two prints, several megabytes in all. WebP, and an estimate first : nothing is written yet. Compress : the panel says what it writes, and that git keeps the originals. Megabytes saved : most of the weight is gone. Location data goes, and photographs are turned upright.

Security by default

4:38 And security comes by default. Every value a page shows is escaped. Every answer has a strict content security policy with its own nonce, and the headers that keep it out of frames of other sites, its type as sent, and the camera and microphone off. Forms carry their CSRF token, sessions are sealed, and a page reaches only its tables, columns and rows.

Going live

5:02 Going live. A website answers on the port of the APIs, after the path of its account and its name. List its domain in site dot config and point a reverse proxy at it : for that host, every link, asset and redirect loses the prefix, and robots names the sitemap at the domain. Behind HTTPS, the session cookie is Secure and browsers get strict transport security. Every server of the installation answers every website : one binary, one deployment.

5:35 A save, or a pull from git, makes a new version on every server. The settings of the installation give the threads that render, the memory and time of a page, and the size of the page cache. And every website is a folder in git, kept in step with VS Code by the local client, with a guide in the docs for AI assistants.

Recap

5:56 To sum up. Pages kept by the server, never the wrong one. The head, JSON-LD, robots and the sitemap, written by the server. UI libraries pinned with their hashes. Images made smaller in the panel. Safe by default, on a domain of its own. Next : the whole Calm Home storefront. API Maker. Build faster, spend smarter, deliver better.