Fix Error: Error: invariant: static generation store missing in revalidateTag in Next.js

This error occurs when revalidateTag or revalidatePath is called outside a server action or route handler context. These functions require the static generation store which is only available during server-side request processing. Fix it by calling revalidation functions inside a server action or API route handler.

Reading the Stack Trace

Here's what each line means:

• at revalidateTag (/app/node_modules/next/dist/server/web/spec-extension/revalidate-tag.js:12:15): The revalidateTag function checks for the static generation store and throws because it is not available in the current execution context.
• at updatePost (/app/src/app/actions.ts:24:3): The server action at line 24 calls revalidateTag but may not have the 'use server' directive or is being invoked incorrectly.
• at async callServer (/app/node_modules/next/dist/client/app-call-server.js:18:16): The client is calling the server action through Next.js's server action RPC mechanism.

Common Causes

// src/app/actions.ts
import { revalidateTag } from 'next/cache';

// Missing 'use server' directive
export async function updatePost(id: string, data: FormData) {
  await db.post.update({ where: { id }, data: { title: data.get('title') } });
  revalidateTag('posts');
}

'use client';
import { revalidateTag } from 'next/cache';

export function EditButton() {
  return <button onClick={() => revalidateTag('posts')}>Refresh</button>;
}

// src/lib/cache-utils.ts
import { revalidateTag } from 'next/cache';

export function invalidatePostCache() {
  revalidateTag('posts'); // No server context when called from client
}

The Fix

Add the 'use server' directive at the top of the file to mark all exported functions as server actions. This ensures Next.js provides the static generation store when the function executes, allowing revalidateTag to work correctly.

// src/app/actions.ts
import { revalidateTag } from 'next/cache';

export async function updatePost(id: string, data: FormData) {
  await db.post.update({ where: { id }, data: { title: data.get('title') } });
  revalidateTag('posts');
}

'use server';

import { revalidateTag } from 'next/cache';

export async function updatePost(id: string, data: FormData) {
  await db.post.update({ where: { id }, data: { title: data.get('title') as string } });
  revalidateTag('posts');
}

Testing the Fix

import { updatePost } from '@/app/actions';
import { revalidateTag } from 'next/cache';

jest.mock('next/cache', () => ({
  revalidateTag: jest.fn(),
}));

jest.mock('@/lib/db', () => ({
  db: {
    post: {
      update: jest.fn().mockResolvedValue({ id: '1', title: 'Updated' }),
    },
  },
}));

describe('updatePost server action', () => {
  it('updates the post and revalidates the cache tag', async () => {
    const formData = new FormData();
    formData.set('title', 'New Title');
    await updatePost('1', formData);
    expect(revalidateTag).toHaveBeenCalledWith('posts');
  });

  it('calls db.post.update with correct arguments', async () => {
    const { db } = require('@/lib/db');
    const formData = new FormData();
    formData.set('title', 'Updated Title');
    await updatePost('1', formData);
    expect(db.post.update).toHaveBeenCalledWith({
      where: { id: '1' },
      data: { title: 'Updated Title' },
    });
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/revalidation-use-server-directive,git add src/app/actions.ts src/app/__tests__/actions.test.ts,git commit -m "fix: add 'use server' directive to enable revalidateTag",git push origin fix/revalidation-use-server-directive

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Add the 'use server' directive to the actions file.
2. Run the test suite locally to confirm revalidation works.
3. Open a pull request with the server action fix.
4. Wait for CI checks to pass on the PR.
5. Merge to main and verify cache revalidation works in staging.

Frequently Asked Questions