JavaScript — 2026 Week 30

Tanner Linsley documents TanStack.com's migration away from React Server Components after custom libraries @tanstack/markdown and @tanstack/highlight reduced the syntax-highlighting bundle from 358 KiB to ~27 KiB transferred. Lighthouse measurements against two production routes — the blog and docs overview, measured July 4, 2026 — show the non-RSC SSR version reduces Total Blocking Time by 53–73 ms and shrinks total bytes by 148–181 KiB, while the document payload alone drops 52–62 KiB. The deeper argument: RSC turns a reusable client dependency into recurring serialized Flight output, which made sense when that dependency was 358 KiB but becomes a net cost once it is small — the architecture's special files, serialization, and bundler config keep running whether or not they earn their keep. RSC remains opt-in and supported in TanStack Start; this is an architectural opt-out, not a framework pivot.

Webpack 5.109 is one of the bundler's largest minor releases, flipping its built-in CSS, HTML, TypeScript, and async WebAssembly support to an "auto" default that activates zero-config imports unless a loader already covers those file types — so css-loader, ts-loader, and similar setups continue untouched. Vite-compatible module APIs land natively: import.meta.glob with eager/import/query options, import.meta.env constants (MODE, DEV, PROD, SSR, BASE_URL), import.meta.resolve, and ?raw/?url/?inline/?no-inline asset query suffixes. CommonJS module concatenation (scope hoisting) extends past ESM-only for the first time to statically-analyzable CJS modules, flattening large CommonJS dependency trees. The HTML pipeline closes the gap with html-webpack-plugin via head generation, CSP injection, SRI, favicon/manifest, and a plugin hook API, while webpack-dev-server 6 ships as native ESM with Express 5 and requires Node.js >= 22.15.

Aurora Scharff builds three advanced RSC compositions into Drop, a social app testing the Next.js 16.3 Instant Navigations preview with cacheComponents and Partial Prerendering. A URL-driven Load More button pushes ?page=N and lets the server stream each page into its own Suspense boundary, with no client-side fetch or state. A search field renders as part of the static server shell by never reading searchParams directly; an inline script seeds its value from the URL during HTML parsing before first paint, and a useLayoutEffect re-syncs it on soft navigations using React's <Activity>. A message composer uses a Server Function — renderDropPreview — that returns JSX, rendering a Shiki-highlighted DropBody on demand entirely on the server and surfacing it via use(preview.node) inside a Suspense boundary, keeping the syntax highlighter out of the client bundle entirely. Each pattern trades minor complexity for a pure-server rendering path.

Angular 22, released June 3, 2026, closes a two-year Signals migration by graduating the Resource API and Signal Forms to production-ready. resource() provides the generic async building block — a reactive params function triggers automatic refetches, exposing value(), isLoading(), and error() with no subscription management. rxResource() plugs existing Observable-returning services into the same lifecycle for RxJS interop, while httpResource() wraps HttpClient directly, letting teams replace most subscribe() call sites with a single reactive declaration; returning undefined from the reactive function suppresses the request. The new debounced() utility wraps any signal with a wait time and returns a Resource (not a plain signal) complete with its own isLoading(), eliminating the typical FormControl + debounceTime + switchMap chain for search inputs — and because everything is signal-native, testing simplifies to fakeAsync and tick().