Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A site can serve visitors different designs at the same address by selecting the page before it reaches the browser. In the taranity.com project described by its author, seven complete Astro design trees are prebuilt, a cookie records each visitor’s choice, and a Cloudflare Pages Function at the edge selects which HTML variant to return. The URL stays canonical; the server-side choice determines the appearance.
How can one URL serve seven different designs?
The project author describes seven complete design trees, not a single template with a color switch. The variants change typography, page structure, and motion while using the same content. The author says all 70 pages are prerendered, then a visitor’s cookie and a Cloudflare Pages Function determine which variant is served.
- Build the variants: Astro generates the pages for each design ahead of time, according to the author’s account.
- Record the visitor’s choice: A cookie identifies the selected design.
- Select at the edge: A Cloudflare Pages Function reads the choice and returns the corresponding prebuilt HTML.
- Keep the canonical address: Since the selection is carried by a cookie rather than a different path or query string, the visitor can see a different design without changing the displayed URL.
This is a description of one project, not an independently verified deployment guide or performance benchmark. The author’s claims about the architecture and its results should be understood in that context.
Why select the design before the browser renders?
The author says this approach sends the browser only the selected design and avoids a visible switch after the page loads. A browser-side method can instead load the page and then change its CSS or classes. MDN documents linked stylesheets as a way to define a site’s look and feel, including support for alternate stylesheets: MDN: The Link element and MDN: Introduction to the CSS cascade.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Neither approach is automatically better. Client-side switching avoids needing the server to choose among prebuilt HTML variants, but the browser must apply the choice as part of page rendering. Edge selection can deliver a chosen variant from the start, but requires generating and maintaining every variant and handling caching correctly. The right trade-off depends on build size, cache design, duplicated content, and the accessibility behavior of each design. The project account does not provide independent comparative performance measurements.
What role does the URL play?
A query parameter is another general way to pass a design choice, such as a value in the URL’s query string. MDN notes that a URI’s query component is data whose format and interpretation depend on the resource; a server may use it to alter a response, but that behavior is implementation-specific: MDN: URI query.
Rank #2
The described project uses a cookie instead. That keeps the selection out of the address, so sharing or bookmarking the canonical URL does not inherently encode a particular design. If a site needs a link that reliably opens a specific variant, a URL-based selection may be more appropriate; the choice depends on whether the preference should follow the visitor or the link.
Recommended Free Tools
Why does cookie-based selection complicate caching?
When the response depends on a cookie, a cache must not treat the HTML as identical for every request. The project author says the implementation varies responses by cookie using Vary: Cookie and marks variants private. The author also warns that a caching mistake could expose one visitor to another visitor’s design.
That is a correctness issue as well as a performance consideration: if an intermediary cache reuses a response without respecting the selection, a visitor may receive the wrong variant. The cache policy therefore has to match the actual selection logic throughout the delivery path. The article’s account describes the chosen safeguards but does not independently establish their deployment configuration.
What did the project’s tests establish—and what did they not?
The author reports 411 tests across 29 files. The same account describes an accessibility audit with 50 checks and zero violations. Those are project-reported results, not an independent audit: the author says the accessibility check was run on their own machine, was not automated, and did not include screen-reader testing. The counts should not be read as proof that every design works for every user or assistive technology.
Rank #4
Clean-checkout type checking
The author reports that type checking failed in a clean checkout because generated content types did not yet exist. The described fix was to add an explicit declaration. This illustrates a project-specific build-order dependency: checks that rely on generated files need those files created or appropriately accounted for in the clean-build workflow.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →End-to-end tests and a third-party challenge
The author also reports that end-to-end contact-form tests depended on a third-party Turnstile challenge, despite a published dummy key. In that project, the reported contact-test result fell from 75 of 75 to 42 of 75 after the challenge issue. The author says a stand-in test value made the limitation explicit. This is an account of one integration’s test failure, not evidence that challenge services generally behave this way.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When does this architecture make sense?
- Consider prebuilt variants selected at the edge when the designs differ substantially and the project can manage variant generation and cookie-sensitive caching.
- Consider browser-side stylesheet switching when the differences are primarily presentational and a client-side choice fits the desired rendering behavior.
- Consider URL-based selection when a particular design needs to be shareable or bookmarkable as part of the link.
- Test each design on its own for accessibility and behavior. A shared content source does not establish that every rendered variant is equally usable.
The taranity.com account demonstrates a specific way to keep the address stable while changing the delivered HTML: prebuild each design, store the selection in a cookie, and choose the variant at the edge. Its practical lesson is that the visible URL is only one part of the system; rendering, caching, build order, and test dependencies determine whether the experience works reliably.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
