--- title: How Next.js 16.3 Makes Server-Rendered Apps Feel Like SPAs description: Next.js 16.3 combines several features—Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions—to make... canonical: https://daily.dev/posts/how-next-js-16-3-makes-server-rendered-apps-feel-like-spas-4drqnsrod twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How Next.js 16.3 Makes Server-Rendered Apps Feel Like SPAs | daily.dev og:description: Next.js 16.3 combines several features—Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions—to make... og:url: https://daily.dev/posts/how-next-js-16-3-makes-server-rendered-apps-feel-like-spas-4drqnsrod og:image: https://api.daily.dev/og/posts/4drQNsROd.png og:image:alt: How Next.js 16.3 Makes Server-Rendered Apps Feel Like SPAs og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How Next.js 16.3 Makes Server-Rendered Apps Feel Like SPAs **[Collections](https://daily.dev/sources/collections)** · 3 min read · 80 upvotes · 7 comments ## Summary Next.js 16.3 combines several features—Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions—to make server-rendered apps feel as snappy as SPAs while keeping Server Components. The standout change is that Cache Components now work fully client-side, letting the `use cache` directive with `cacheTag`/`updateTag` replace much of what SWR or React Query's stale-time config used to handle. Four open-source demo apps (Next Beats, Drop, Flow, Huddle) illustrate caching, optimistic UI, client-side fetching, and view transitions with Playwright testing. ## Content Cache Components started out looking like a niche tool for static sites, and honestly, that's how I initially thought about it too. But after building a few real projects with it — a Prismic-powered marketing site and a set of app-like demos — it's clear the feature has grown into something more interesting. ## Starting with a marketing site The first real test was building a Prismic website with Next.js Cache Components, an experimental caching architecture that's still finding its footing but already works well in practice. The setup is straightforward: page files share a single `fetchPage` function wrapped in `"use cache"`, tagged with `cacheTag`, and given a lifespan with `cacheLife`. Slices handle the actual content blocks. Draft Mode plugs into Prismic's preview system so editors can see unpublished changes without breaking the cache for everyone else. The part that makes this actually usable in production is revalidation. Prismic webhooks fire the moment content gets published, and the cached page updates almost instantly — no waiting around for a rebuild, no stale content sitting on the page for minutes. Pages stay statically built by default, which keeps them fast, but you can still stream in per-request content — a personalized banner, for example — using Suspense only where it's needed. You get static-site speed without giving up the ability to personalize. ## Then it got more ambitious The second project pushed further: four open-source demo apps (Next Beats, Drop, Flow, and Huddle) built to show what Next.js 16.3 can do when you combine several newer features at once — Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions. Together, these produce something that feels a lot closer to a native app than a typical server-rendered site, while still keeping Server Components in the picture. A few patterns came up repeatedly across the demos: - Caching data with `"use cache"`, then invalidating it precisely with `cacheTag` and `updateTag` - Optimistic UI updates using `useOptimistic`, so actions feel instant even before the server responds - Client-side fetching with SWR or React Query where it made more sense than server caching - Page transitions using `ViewTransition` for that smooth, app-like feel - Playwright helpers for testing all of the above without it turning into a nightmare None of these are new ideas individually, but seeing them work together in real demo apps makes the case better than any feature list could. ## Why this changes the calculus Sam Selikoff, who works on the Next.js team, put it well: when Cache Components first showed up, the only real use case was SSG-style sites — docs, ecommerce, marketing pages. Useful, but limited. In 16.3, Cache Components can run entirely in the browser, which effectively lets them replace the staleTime pattern from libraries like SWR. That's a bigger deal than it sounds. It means the same caching model that works for a static marketing page can now handle client-side data freshness too, instead of needing two separate mental models depending on where the code runs. What started as a way to make marketing sites fast and previewable is turning into a general-purpose caching layer for the whole app — static pages, dynamic client data, and everything in between. ## Questions this post answers ### What changed in Next.js 16.3 regarding Cache Components and client-side data fetching? Cache Components in Next.js 16.3 now work entirely in the browser, not just for SSG-style sites like docs or ecommerce catalogs. This lets the `use cache` directive combined with `cacheTag` and `updateTag` replace the stale-time configuration job previously handled by client libraries like SWR, reducing the need for a separate data-fetching library in many cases. _Developers deciding whether to keep SWR or React Query alongside Next.js can track caching changes like this on daily.dev._ ### Do I still need SWR or React Query with Next.js 16.3's new Cache Components? You still need SWR or React Query for cases requiring genuine client-side fetching, but Next.js 16.3's built-in caching primitives now handle a lot of the re-fetch avoidance that previously required those libraries' stale-time settings. The Flow demo app specifically shows client-side fetching patterns using SWR and React Query for scenarios still needing them. _Anyone weighing Next.js built-in caching against SWR or React Query can follow these comparisons on daily.dev._ ### What features does Next.js 16.3 include to make navigation feel like a single-page app? Next.js 16.3 bundles Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions. Instant Navigations and Partial Prefetching improve perceived page-transition speed, offline retry handles failed requests from flaky connections, and View Transitions add visual polish that previously required a client-side router library, all while keeping server-rendering by default. _Teams shipping Next.js upgrades can keep up with feature bundles like this via daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@irshadjan** · 2 upvotes > Nicely explained **@shaswat\_shrivas** · 1 upvotes > What clicked for me here is that Cache Components isn’t really about “better static sites” anymore. The interesting part is how it starts to blur the line between server caching, client-side caching, and dynamic UI. > > The use cache + cacheTag + cacheLife model feels especially compelling because it gives you a common way to think about freshness and invalidation instead of having completely different mental models for each layer. > > And once you combine that with optimistic updates, partial prefetching, View Transitions, etc., I can see why the demos start feeling more like apps than traditional... **@matchpoint** · 0 upvotes > hope it helps **@vladsiu** · 0 upvotes > Well explained, thanks! **@jljorden** · 0 upvotes > I just added the 'use cache' directive to a component and it is quite a bit more responsive now. This is a big help. ## Similar posts on daily.dev - [Cache components in Next.js: Faster pages with partial pre-rendering](https://daily.dev/posts/cache-components-in-next-js-faster-pages-with-partial-pre-rendering-xe8sns7u1) · LogRocket · 10 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#nextjs](https://daily.dev/tags/nextjs) [View this post on daily.dev](https://daily.dev/posts/how-next-js-16-3-makes-server-rendered-apps-feel-like-spas-4drqnsrod) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How Next.js 16.3 Makes Server-Rendered Apps Feel Like SPAs","url":"https://daily.dev/posts/how-next-js-16-3-makes-server-rendered-apps-feel-like-spas-4drqnsrod","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-next-js-16-3-makes-server-rendered-apps-feel-like-spas-4drqnsrod"},"datePublished":"2026-08-18T17:48:26.398Z","dateModified":"2026-08-18T18:25:11.334Z","description":"Next.js 16.3 combines several features—Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions—to make...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/912cfb600ea4c98f033eddd03eb8b76a?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/912cfb600ea4c98f033eddd03eb8b76a?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Collections","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Collections","logo":"https://media.daily.dev/image/upload/s--fk_6ycEi--/f_auto,q_auto/v1780996001/logos/collections?_a=BAMAMiWQ0","url":"https://daily.dev/sources/collections"},"commentCount":7,"discussionUrl":"https://daily.dev/posts/how-next-js-16-3-makes-server-rendered-apps-feel-like-spas-4drqnsrod","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":80},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":7}],"keywords":"webdev,react,nextjs","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Collections","item":"https://daily.dev/sources/collections"},{"@type":"ListItem","position":3,"name":"How Next.js 16.3 Makes Server-Rendered Apps Feel Like SPAs"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-next-js-16-3-makes-server-rendered-apps-feel-like-spas-4drqnsrod","comment":[{"@type":"Comment","text":"Nicely explained","datePublished":"2026-08-18T17:57:06.765Z","url":"https://daily.dev/posts/4drQNsROd#c-fxMvlpkzW","author":{"@type":"Person","name":"Irshad Jan","url":"https://daily.dev/irshadjan","image":"https://lh3.googleusercontent.com/a/ACg8ocIbPdAoUYjuyX21TqDR5ZJH-PquRiZrqMLMi8gmArMG24c4Tmw=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"What clicked for me here is that Cache Components isn’t really about “better static sites” anymore. The interesting part is how it starts to blur the line between server caching, client-side caching, and dynamic UI.\nThe use cache + cacheTag + cacheLife model feels especially compelling because it gives you a common way to think about freshness and invalidation instead of having completely different mental models for each layer.\nAnd once you combine that with optimistic updates, partial prefetching, View Transitions, etc., I can see why the demos start feeling more like apps than traditional web pages.\nFeels less like a single new feature and more like Next.js gradually putting together a more coherent model for building fast, interactive apps.","datePublished":"2026-08-19T05:42:28.231Z","url":"https://daily.dev/posts/4drQNsROd#c-S4CSTGOx7","author":{"@type":"Person","name":"Shaswat Shrivas","url":"https://daily.dev/shaswat_shrivas","image":"https://media.daily.dev/image/upload/s--LNnM28mC--/f_auto/v1774193329/avatars/avatar_RslRc74HTXYv9Xn0Nwv4n?_a=BAMAMiWQ0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"hope it helps","datePublished":"2026-08-19T03:17:00.927Z","url":"https://daily.dev/posts/4drQNsROd#c-yE7cUPyBB","author":{"@type":"Person","name":"Numb Code","url":"https://daily.dev/matchpoint","image":"https://lh3.googleusercontent.com/a/ACg8ocJ86YIewk804FajHaEbzIBiQa9RFZVR0fs-vBpSZ3ObyDY6Qz8=s96-c"}},{"@type":"Comment","text":"Well explained, thanks!","datePublished":"2026-08-19T04:11:18.699Z","url":"https://daily.dev/posts/4drQNsROd#c-C2gEKDjVu","author":{"@type":"Person","name":"Vladislav Siumbeli","url":"https://daily.dev/vladsiu","image":"https://media.daily.dev/image/upload/s--GalxSgjS--/f_auto/v1757768087/avatars/avatar_ezH33Lu6a37KM1SfsCwIx?_a=BAMClqZW0"}},{"@type":"Comment","text":"I just added the ‘use cache’ directive to a component and it is quite a bit more responsive now. This is a big help.","datePublished":"2026-08-25T17:00:48.664Z","url":"https://daily.dev/posts/4drQNsROd#c-R92Y5gVQe","author":{"@type":"Person","name":"Joe Jorden","url":"https://daily.dev/jljorden","image":"https://media.daily.dev/image/upload/s--kdpTC9_y--/f_auto/v1786132527/avatars/avatar_uVaH6vhYMXfcUKQaLziqG?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-next-js-16-3-makes-server-rendered-apps-feel-like-spas-4drqnsrod#faq","mainEntity":[{"@type":"Question","name":"What changed in Next.js 16.3 regarding Cache Components and client-side data fetching?","acceptedAnswer":{"@type":"Answer","text":"Cache Components in Next.js 16.3 now work entirely in the browser, not just for SSG-style sites like docs or ecommerce catalogs. This lets the `use cache` directive combined with `cacheTag` and `updateTag` replace the stale-time configuration job previously handled by client libraries like SWR, reducing the need for a separate data-fetching library in many cases. Developers deciding whether to keep SWR or React Query alongside Next.js can track caching changes like this on daily.dev."}},{"@type":"Question","name":"Do I still need SWR or React Query with Next.js 16.3's new Cache Components?","acceptedAnswer":{"@type":"Answer","text":"You still need SWR or React Query for cases requiring genuine client-side fetching, but Next.js 16.3's built-in caching primitives now handle a lot of the re-fetch avoidance that previously required those libraries' stale-time settings. The Flow demo app specifically shows client-side fetching patterns using SWR and React Query for scenarios still needing them. Anyone weighing Next.js built-in caching against SWR or React Query can follow these comparisons on daily.dev."}},{"@type":"Question","name":"What features does Next.js 16.3 include to make navigation feel like a single-page app?","acceptedAnswer":{"@type":"Answer","text":"Next.js 16.3 bundles Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions. Instant Navigations and Partial Prefetching improve perceived page-transition speed, offline retry handles failed requests from flaky connections, and View Transitions add visual polish that previously required a client-side router library, all while keeping server-rendering by default. Teams shipping Next.js upgrades can keep up with feature bundles like this via daily.dev."}}]} ```