My super sweet Next.js 16

Today’s issue: JavaScript scout camp, proving Dad wrong, and CSS support for astral projection.

Welcome to #434.

---

My super sweet Next.js 16

Earlier this month, Vercel took a break from brokering the conflict in the Middle East to release the Next.js 16 beta – and they’ve officially christened Turbopack as the default bundler™️.

We’ve already written about how it delivers up to 5–10x faster dev refreshes and 2–5x faster builds, and the best part is that you get those gains with zero config now.

But the real story of Next 16 is the “complete overhaul” of its routing and navigation system that’s built to make client transitions leaner and smarter:

• Layout deduplication – When prefetching multiple URLs that share a layout, it now downloads that layout just once instead of once per Link. So a product grid with 50 links fetches one layout, not 50. Big drop in network bloat.

• Incremental prefetching – Instead of fetching entire pages ahead of time, Next 16 only fetches the parts that aren’t already in cache. It also got smarter about timing – it cancels requests when links leave the viewport, re-prefetches when data expires, and boosts priority when you hover. You’ll see more requests, but each one is much smaller, which produces lower transfer costs overall.

• Better caching APIs – A new updateTag() and upgraded revalidateTag() give you more explicit control over when stale data updates. updateTag() gives instant “read-your-writes” for user actions, while revalidateTag(tag, 'max') handles background SWR without blocking.

Bottom Line: Consider this your aperitif before Next.js Conf starts tomorrow, when hopefully the dark triangle will smile upon us all.

---

TanStack Start Quickstart just launched

You can use it to spin up a fullstack React + TanStack app with the npx create-start-app@latest command.

Then, you can install the Convex package with npm install convex @convex-dev/react-query and get a full production-ready backend with a reactive database and lots more:

• Built-in auth
• File storage
• AI agent component
• Server functions

Check out the docs – and join the TanStack Start revolution.

---

// service-worker.js
const CACHE_NAME = "site-static-v1";
const assetsToCache = ["/", "/index.html", "/css/style.css", "/js/script.js"];

// Install event
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      cache.addAll(assetsToCache);
    })
  );
});

// Fetch event
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cacheResponse) => {
      return cacheResponse || fetch(event.request);
    })
  );
});

---

1. Hono just released Hono CLI which lets you (or your coding agent) look up documentation, optimize builds, and do other Hono-rific things in the terminal.

2. Nate Meyvis wrote about frontend maximalism, which is my second favorite artistic movement after full-stack impressionism.

3. TkDodo wrote about context inheritance in TanStack Router.

4. Apryse wrote this ultimate guide to using PDF SDK to create, manipulate, and modify PDFs in your applications. [sponsored]

5. Node.js v25 doubles down on secure-by-default apps, web-standard APIs, and proving their dad Ryan Dahl wrong.

6. Oxlint now supports JavaScript plugins, which uses a fancy “JavaScript-Rust transfer” to give you the speed of Rust without having to learn Rust and change your pfp to an obscure anime character.

7. Michael Rosenberg wrote on the Cloudflare blog about making JavaScript more trustworthy, and helping it live by all the other precepts of The Scout Law 🫡.

8. CarbonQA provides high-quality QA services for dev teams, so your engineers don’t have to waste time doing QA themselves. Their US-based testers work directly in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]

9. Ryan Carniato gave a talk called Beyond Signals.

10. Ryan Mulligan wrote a blog post called Transition to the other side with container query units – not to be confused with my other open tab about transitioning to the other side via astral projection.

---

In the original code, the service worker caches the assets on install, but it doesn’t update the cache when the assets change. This means that if you update your CSS or JS, the service worker will still serve the old version.

To fix this we can use the cache.put() method to update the cache when the assets change.

// service-worker.js
const CACHE_NAME = "site-static-v1";
const assetsToCache = ["/", "/index.html", "/css/style.css", "/js/script.js"];

// Install event
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      cache.addAll(assetsToCache);
    })
  );
});

// Fetch event
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cacheResponse) => {
      return (
        cacheResponse ||
        fetch(event.request).then((fetchResponse) => {
          return caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request.url, fetchResponse.clone());
            return fetchResponse;
          });
        })
      );
    })
  );
});

Before you get too confident, just remember, service workers were created to keep you humble (allegedly).