How would you implement optimistic UI updates in a CSR-heavy Next.js application?

Question

Accepted Answer

Optimistic updates are a technique where the user interface updates immediately after an action, assuming the server request will succeed, then rolls back if it fails. This creates a perception of speed and fluidity essential for modern applications. In a CSR-heavy Next.js application, you have two primary implementation paths: using data fetching libraries like TanStack Query or SWR for complex client-side state management, or leveraging React 19's built-in `useOptimistic` hook with Server Actions for deeper framework integration. TanStack Query provides a robust optimistic update pattern through its `useMutation` hook. The flow involves capturing the current cache state before the mutation, applying optimistic changes immediately, and rolling back if the server request fails. This approach is ideal for complex data dependencies and when you need fine-grained control over cache invalidation. ```jsx // components/PhotoGallery.tsx 'use client'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; async function fetchPhotos() { const response = await fetch('/api/photos'); return response.json(); } async function likePhoto(photoId: string) { const response = await fetch(`/api/photos/${photoId}/like`, { method: 'POST' }); return response.json(); } export default function PhotoGallery() { const queryClient = useQueryClient(); const { data: photos } = useQuery({ queryKey: ['photos'], queryFn: fetchPhotos }); const likeMutation = useMutation({ mutationFn: likePhoto, onMutate: async (photoId) => { // Cancel outgoing refetches to prevent overwriting optimistic update await queryClient.cancelQueries({ queryKey: ['photos'] }); // Snapshot previous value const previousPhotos = queryClient.getQueryData(['photos']); // Optimistically update the cache queryClient.setQueryData(['photos'], (old) => old.map((photo) => photo.id === photoId ? { ...photo, isLiked: true, likes: photo.likes + 1 } : photo ) ); return { previousPhotos }; }, onError: (err, photoId, context) => { // Roll back on error queryClient.setQueryData(['photos'], context.previousPhotos); }, onSettled: () => { // Refetch to ensure consistency with server queryClient.invalidateQueries({ queryKey: ['photos'] }); } }); return (

{photos?.map((photo) => ( ))}

); } ``` SWR offers a similar pattern using its `mutate` function. The key difference is SWR's approach of combining the mutation and revalidation in a single step, which can be simpler for basic use cases but offers less granular control than React Query. ```jsx // components/LikePost.tsx 'use client'; import useSWR from 'swr'; const fetcher = (url) => fetch(url).then(res => res.json()); export default function LikePost({ postId }) { const { data, mutate } = useSWR(`/api/posts/${postId}`, fetcher); const handleLike = async () => { // Optimistically update the UI await mutate(async () => { // Make the actual API call await fetch(`/api/posts/${postId}/like`, { method: 'POST' }); // Return updated data (revalidation happens automatically) return { ...data, meta: { ...data.meta, like_count: data.meta.like_count + 1 } }; }, { optimisticData: { ...data, meta: { ...data.meta, like_count: data.meta.like_count + 1 } }, rollbackOnError: true }); }; return ( ); } ``` In this pattern, SWR immediately shows the optimistic count, and if the server request fails, it automatically rolls back to the previous value [citation:3]. React 19 introduces the experimental `useOptimistic` hook, which integrates directly with React's transition APIs and Server Actions. This approach is more declarative and aligns with Next.js App Router patterns, though it requires using React's experimental channel [citation:4][citation:8]. ```jsx // app/components/OptimisticTodoList.tsx 'use client'; import { useOptimistic, useTransition } from 'react'; import { addTodo } from '@/app/actions'; export default function OptimisticTodoList({ initialTodos }) { const [optimisticTodos, addOptimisticTodo] = useOptimistic( initialTodos, (state, newTodo) => [...state, { ...newTodo, sending: true }] ); const [isPending, startTransition] = useTransition(); async function formAction(formData) { const newTodo = { id: `temp-${Date.now()}`, title: formData.get('title'), completed: false, isOptimistic: true }; // Update UI immediately addOptimist

How would you implement optimistic UI updates in a CSR-heavy Next.js application?

Implement optimistic UI updates in CSR-heavy Next.js apps using either data fetching libraries like TanStack Query or SWR for complex client-side state, or React 19's built-in useOptimistic hook with Server Actions for deeper framework integration

How would you implement optimistic UI updates in a CSR-heavy Next.js application?

Implement optimistic UI updates in CSR-heavy Next.js apps using either data fetching libraries like TanStack Query or SWR for complex client-side state, or React 19's built-in useOptimistic hook with Server Actions for deeper framework integration

Scenario Questions

Follow-up Questions