vercel/next.js · error · Error

`${name}` is only available in a Server Component.

Error message

`${name}` is only available in a Server Component.

What it means

Next.js ships a client-bundle stub for `next/cache` (active when `NEXT_RUNTIME === ''`) that throws this error for server-only functions: revalidateTag, revalidatePath, updateTag, refresh, cacheLife, and cacheTag. These functions manipulate server-side cache state and cannot run in the browser. The stub prevents client components from accidentally invoking server cache APIs.

Source

Thrown at packages/next/cache.js:6

let cacheExports

if (process.env.NEXT_RUNTIME === '') {
  const notAvailableInClient = (name) => {
    return function notAvailable() {
      throw new Error(`\`${name}\` is only available in a Server Component.`)
    }
  }

  cacheExports = {
    unstable_cache: function unstable_cache(cb) {
      // Legacy behavior: allow importing/using unstable_cache from client bundles
      // without pulling in server internals.
      if (typeof cb !== 'function') return cb
      return function cached() {
        return cb.apply(this, arguments)
      }
    },
    unstable_noStore: function unstable_noStore() {},
    io: require('next/dist/client/request/io.browser').io,

    updateTag: notAvailableInClient('updateTag'),
    revalidateTag: notAvailableInClient('revalidateTag'),
    revalidatePath: notAvailableInClient('revalidatePath'),

View on GitHub (pinned to 0ae8c72462)

Solutions

1. Move the cache function call into a Server Component, Server Action ('use server'), or Route Handler.
2. Add 'use server' at the top of the file or function that calls the cache API.
3. Split shared utilities into separate server-only and client-safe modules.
4. Call the cache function via a server action invoked from the client component.

Example fix

// before — called in a Client Component
'use client'
import { revalidateTag } from 'next/cache'
function Button() {
  return <button onClick={() => revalidateTag('posts')}>Refresh</button>
}

// after — move to a Server Action
// actions.ts
'use server'
import { revalidateTag } from 'next/cache'
export async function refreshPosts() { revalidateTag('posts') }
// ClientComponent.tsx
'use client'
import { refreshPosts } from './actions'
function Button() {
  return <button onClick={() => refreshPosts()}>Refresh</button>
}

// Ensure cache functions are only called in server contexts.
// The simplest guard: check if the file/module is in the server bundle.
function assertServerContext(fnName: string): void {
  if (typeof window !== 'undefined') {
    throw new Error(`${fnName} must not be called in client code. Use a Server Action.`)
  }
}

// Type-level: use 'use server' on functions that call cache APIs
// so they can't be inlined into client bundles.
// Runtime guard for shared modules:
function isServerSide(): boolean {
  return typeof window === 'undefined' && typeof globalThis !== 'undefined'
}

When it happens

Trigger: Importing `revalidateTag`, `revalidatePath`, `cacheLife`, `cacheTag`, `refresh`, or `updateTag` from `next/cache` and calling it in code that ends up in the client bundle — a Client Component, a module imported by one, or a file without a 'use server' directive.

Common situations: Moving cache invalidation logic into a shared utility that gets imported by a Client Component; calling revalidateTag in an onClick handler; importing from next/cache in a file missing 'use server'; refactoring that pulls server code into a client-imported module.

Related errors

• `catchError` can only be used in Client Components.
• `unstable_isUnrecognizedActionError` can only be used on the
• Using Client Components is not allowed in this environment.
• No router instance found. You should only use "next/router"
• Invalid urlPath provided to revalidate(), must be a path e.g

AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06). Data as JSON: /api/errors/b9e6694216ceb8e1. Report an issue: GitHub.