Personal websites

You know that itch? The one where you start tinkering with your personal website, telling yourself it’s just a quick experiment.

Two or three weeks later, you’ve sunk evenings into it, and your real projects are gathering dust.

It’s a classic developer trap. Even as a senior, I fell right back in.

Diving into AI Magic

I wanted to overhaul my MDX-based site to play with AI.

A few weeks back, I wrote about my first experiments (check it out: experimenting).

This time, I aimed deeper: best practices with the latest AI SDK, providers, middleware for caching, and AI gateways.

The result? A site that generated a custom version on the fly, pulling my latest work via Perplexity Sonar and Grok searches. It cross-checked news about me for freshness. Cool, right?

What hooked me most was tool streaming through a custom writer. I could show the AI thinking and writing in real time, like watching a brain unfold on screen. But I added caching middleware for speed after that first load. Felt innovative.

The Wake-Up Call

Something nagged at me. It wasn’t quite right.

Personal websites shouldn’t make visitors wait for AI to spin up text or animations. They need to load instantly and just... tell your story. You can highlight your skills cleanly, like those slick components on https://www.uilabs.dev. But no frills that slow things down.

Fast. Static. Done.

Switching to Cached Power

I scrapped it all. Rewrote using Next.js cached components. These tap React Server Components and smart caching for the win.

Now, feedback hits instantly. Content stays dynamic, auto-invalidating cache weekly for fresh updates on my work.

See it in action below with a custom refresh button I added to highlight the content update.

Nailing the Posts Problem

One snag remained.

I pull all my Substack posts with cached components too. Initial loads dragged, though. Caching felt wasteful, memory-hogging for static stuff that rarely changes. Minor edits? I can rebuild if needed.

Best fix: static generation at build time.

During builds, it fetches every post from Substack using into.md by Timo Lins.

For the search feature, the cached component grabs recent post urls, creating dynamic routes via slugs in Next.js app router.

Combo achieved. Static core for speed, cached smarts where it counts.

In the end, it’s about balance. Experiment wildly, sure, but deliver what users expect: quick, clear windows into your world. Next time that itch hits, I’ll scratch it smarter.

What’s your personal site trap?