--- title: Building App-like Experiences with Next.js 16.3 | daily.dev description: Demonstrates how Next.js 16.3 features - Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions - combine to... canonical: https://daily.dev/posts/building-app-like-experiences-with-next-js-16-3-kpmxof8lh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building App-like Experiences with Next.js 16.3 | daily.dev og:description: Demonstrates how Next.js 16.3 features - Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions - combine to... og:url: https://daily.dev/posts/building-app-like-experiences-with-next-js-16-3-kpmxof8lh og:image: https://api.daily.dev/og/posts/KpMXOf8LH.png og:image:alt: Building App-like Experiences with Next.js 16.3 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. # Building App-like Experiences with Next.js 16.3 **[Next.js](https://daily.dev/sources/next)** · 15 min read · 0 upvotes · 0 comments ## Summary Demonstrates how Next.js 16.3 features - Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions - combine to build app-like, SPA-feeling experiences while keeping Server Components. Walks through four open-source demo apps (Next Beats, Drop, Flow, Huddle) showing patterns for caching with 'use cache', revalidating with cacheTag/updateTag, optimistic updates with useOptimistic, client-side data fetching with SWR/React Query, and animating with ViewTransition, plus Playwright e2e testing helpers. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I enable Instant Navigations in Next.js 16.3? Enable both cacheComponents and partialPrefetching in next.config.ts. Cache Components ensure a route has a prerendered shell of static, cached, and fallback UI ready to show immediately, while Partial Prefetching fetches that shell for visible Link components before a click, so the browser can display it while the server finishes rendering the rest. _daily.dev helps developers track new Next.js navigation patterns as they roll out features like this._ ### How do I revalidate cached Next.js data after a Server Action mutation? Tag a 'use cache' read with cacheTag, then call updateTag from inside the Server Action to expire that tag after the write completes. The next request for the tagged data fetches a fresh result, and with Partial Prefetching a visible Link with prefetch={true} can fetch that update ahead of the click so the fresh content is ready on navigation. _Developers wiring up mutations and cache invalidation can find patterns like this through daily.dev._ ### How do useOptimistic and useTransition work together for optimistic UI updates in React? useTransition tracks a Server Action and its resulting server update as one pending operation, while useOptimistic set inside that same transition renders the new value immediately before the action resolves. If the action fails, React automatically reverts to the last confirmed value so an error toast can be shown, as demonstrated by a favorite-button toggle that updates instantly and rolls back on failure. _daily.dev surfaces practical React patterns for teams building responsive, optimistic interfaces._ ## Similar posts on daily.dev - [Next.js 16.3: Instant Navigations](https://daily.dev/posts/next-js-16-3-instant-navigations-80ncbhrrp) · Next.js · 138 upvotes · 16 comments --- Tags: [#react](https://daily.dev/tags/react), [#nextjs](https://daily.dev/tags/nextjs), [#view-transitions](https://daily.dev/tags/view-transitions) [View this post on daily.dev](https://daily.dev/posts/building-app-like-experiences-with-next-js-16-3-kpmxof8lh) ```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":"Building App-like Experiences with Next.js 16.3","url":"https://daily.dev/posts/building-app-like-experiences-with-next-js-16-3-kpmxof8lh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-app-like-experiences-with-next-js-16-3-kpmxof8lh"},"datePublished":"2026-08-18T16:50:36.803Z","dateModified":"2026-09-14T06:30:27.811Z","description":"Demonstrates how Next.js 16.3 features - Instant Navigations, Cache Components, Partial Prefetching, offline retry, and React View Transitions - combine to...","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":"Next.js","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":"Next.js","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/a7460ee33d92486cb5afd0fca36a116d","url":"https://daily.dev/sources/next"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/building-app-like-experiences-with-next-js-16-3-kpmxof8lh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,nextjs,view-transitions","timeRequired":"PT15M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Next.js","item":"https://daily.dev/sources/next"},{"@type":"ListItem","position":3,"name":"Building App-like Experiences with Next.js 16.3"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/building-app-like-experiences-with-next-js-16-3-kpmxof8lh#faq","mainEntity":[{"@type":"Question","name":"How do I enable Instant Navigations in Next.js 16.3?","acceptedAnswer":{"@type":"Answer","text":"Enable both cacheComponents and partialPrefetching in next.config.ts. Cache Components ensure a route has a prerendered shell of static, cached, and fallback UI ready to show immediately, while Partial Prefetching fetches that shell for visible Link components before a click, so the browser can display it while the server finishes rendering the rest. daily.dev helps developers track new Next.js navigation patterns as they roll out features like this."}},{"@type":"Question","name":"How do I revalidate cached Next.js data after a Server Action mutation?","acceptedAnswer":{"@type":"Answer","text":"Tag a 'use cache' read with cacheTag, then call updateTag from inside the Server Action to expire that tag after the write completes. The next request for the tagged data fetches a fresh result, and with Partial Prefetching a visible Link with prefetch={true} can fetch that update ahead of the click so the fresh content is ready on navigation. Developers wiring up mutations and cache invalidation can find patterns like this through daily.dev."}},{"@type":"Question","name":"How do useOptimistic and useTransition work together for optimistic UI updates in React?","acceptedAnswer":{"@type":"Answer","text":"useTransition tracks a Server Action and its resulting server update as one pending operation, while useOptimistic set inside that same transition renders the new value immediately before the action resolves. If the action fails, React automatically reverts to the last confirmed value so an error toast can be shown, as demonstrated by a favorite-button toggle that updates instantly and rolls back on failure. daily.dev surfaces practical React patterns for teams building responsive, optimistic interfaces."}}]} ```