This site used to be a Next.js app, deployed through OpenNext on Cloudflare Workers. It worked, but it shipped a lot of JavaScript for what is basically one page of text and a few images. I rebuilt it with TanStack Start, and the home page now ships no JavaScript bundle at all.
What changed
- Framework: TanStack Start with file-based routes, prerendered at build time.
- Tooling: Vite+ for dev, build, lint and format, with TypeScript 7.
- Hosting: the same Cloudflare Worker, deployed by Workers Builds on every push to
main. - Animations: the typing effect, the sparkles and the dock's magnify effect are plain CSS now. They used to need Framer Motion.
No JavaScript in production
TanStack Start can prerender routes at build time. With that on, the build writes static HTML for every page, and the CSS is inlined into it. The home page is one response of about 25 KB compressed.
tanstackStart({
prerender: { enabled: true },
});The dev server still loads React for hot reload, so I only leave the <Scripts /> tag out of the production build.
Space, still without JavaScript
Later I gave the site a space theme, and every effect in it is CSS:
- Parallax stars: the star layers are tied to the scroll position with
animation-timeline: scroll(), so nearer stars move more than far ones as you scroll. - Shooting stars: keyframe animations that only move
transformandopacity, which the browser can run off the main thread. - Page transitions: one rule makes pages glide into each other instead of flashing. A post's title has the same
view-transition-namein the list and on the post page, so it flies into place.
@view-transition {
navigation: auto;
}Browsers that don't support one of these just skip it, and the page works the same.
Results
Lighthouse scores 100 in all four categories on mobile and desktop. Total blocking time is 0 ms, because there is nothing to block.
This blog is written in MDX and rendered the same way, so this page is static HTML too.
