Client-side Transitions in Next.js – Optimizing Navigation with Prefetching, Loading States, and History API

Introduction

Traditionally, navigating to a server-rendered page triggers a full page reload, clearing state, resetting scroll position, and blocking interactivity. Next.js avoids this with client-side transitions using the <Link> component.

Benefits of Client-side Transitions

• Preserve shared layouts and UI
• Replace the current page with a loading state or new content
• Make server-rendered apps feel like client-rendered ones

What Can Slow Down Transitions?

1. Dynamic Routes Without loading.tsx

Without a loading.tsx file, users must wait for the server response. Adding this file enables partial prefetching and shows a fallback UI:

// app/blog/[slug]/loading.tsx
export default function Loading() {
  return <LoadingSkeleton />;
}

2. Missing generateStaticParams

If a dynamic route could be statically generated but lacks generateStaticParams, it falls back to dynamic rendering:

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then(res => res.json())
  return posts.map(post => ({ slug: post.slug }))
}

3. Slow Networks

On slow networks, prefetching may not complete before a user clicks. Use useLinkStatus to show immediate feedback:

// app/ui/loading-indicator.tsx
'use client'
import { useLinkStatus } from 'next/link'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return (
    <span aria-hidden className={`link-hint ${pending ? 'is-pending' : ''}`} />
  )
}

4. Disabling Prefetching

To reduce resource usage, you can disable prefetching or enable it only on hover:

// app/ui/hover-prefetch-link.tsx
'use client'
import Link from 'next/link'
import { useState } from 'react'

function HoverPrefetchLink({ href, children }) {
  const [active, setActive] = useState(false)
  return (
    <Link
      href={href}
      prefetch={active ? null : false}
      onMouseEnter={() => setActive(true)}
    >
      {children}
    </Link>
  )
}

5. Hydration Not Completed

The <Link> component must be hydrated before it can prefetch. To improve hydration:

• Use @next/bundle-analyzer to reduce bundle size
• Move logic from client to server where possible

Using the History API

Next.js supports window.history.pushState and replaceState to update the URL without reloading the page.

Example: Sorting Products

'use client'
import { useSearchParams } from 'next/navigation'

export default function SortProducts() {
  const searchParams = useSearchParams()
  function updateSorting(sortOrder) {
    const params = new URLSearchParams(searchParams.toString())
    params.set('sort', sortOrder)
    window.history.pushState(null, '', `?${params.toString()}`)
  }
}

Example: Switching Locale

'use client'
import { usePathname } from 'next/navigation'

export function LocaleSwitcher() {
  const pathname = usePathname()
  function switchLocale(locale) {
    const newPath = `/${locale}${pathname}`
    window.history.replaceState(null, '', newPath)
  }
}

Conclusion

Client-side transitions in Next.js enable fast, responsive navigation while preserving state and layout. By using loading.tsx, useLinkStatus, and the History API, you can optimize dynamic routes and deliver instant feedback to users.