nextjs · Next.js Docs
Next.js Uncached data was accessed outside of `<Suspense>`
Resolving the blocking route error in Next.js by implementing React Suspense boundaries or applying the use cache directive when accessing uncached asynchronous data, headers, or params.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Next.js Uncached data was accessed outside of <Suspense>
Resolving the blocking route error in Next.js by implementing React Suspense boundaries or applying the use cache directive when accessing uncached asynchronous data, headers, or params.
When To Use
Use when you encounter the Uncached data was accessed outside of Suspense error while using the cacheComponents feature or when trying to prevent page blocking during prerendering.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/nextjs-uncached-data-was-accessed-outside-of-suspense-workflow-guide.md | An explanation of why accessing uncached data outside of a Suspense boundary triggers a blocking route error in Next.js. | Questions about an explanation of why accessing uncached data outside of a Suspense boundary triggers a blocking route error in Next.js. |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-blocking-ro.jsx | A JSX code example demonstrating how accessing uncached data in an async component without a Suspense boundary causes a blocking route in Next.js. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data in an async component without a Suspense boundary causes... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-uncached-da.jsx | A JSX code example demonstrating how accessing uncached data in a Next.js component without a Suspense boundary causes a blocking route. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data in a Next.js component without a Suspense boundary cause... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-blocking-ro-2.jsx | A JSX code example demonstrating how accessing uncached data in an async component without a Suspense boundary causes a blocking route. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data in an async component without a Suspense boundary causes... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-uncached-da-2.jsx | A React JSX example demonstrating how to wrap an async component that fetches uncached data within a Suspense boundary to prevent blocking the route. | Exact payloads, commands, or snippets shown in A React JSX example demonstrating how to wrap an async component that fetches uncached data within a Suspense boundar... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-blocking-ro-3.jsx | A JSX code example demonstrating how accessing uncached data in a component without a Suspense boundary causes a blocking route in Next.js. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data in a component without a Suspense boundary causes a bloc... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-uncached-da-3.jsx | A JSX code example demonstrating a Next.js error caused by accessing uncached data via cookies outside of a Suspense boundary. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating a Next.js error caused by accessing uncached data via cookies outside of a Suspense... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-blocking-ro-4.jsx | A JSX code example demonstrating how accessing uncached data via cookies outside of a Suspense boundary causes a blocking route in Next.js. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data via cookies outside of a Suspense boundary causes a bloc... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-blocking-ro-5.jsx | A JSX code example demonstrating how accessing uncached data outside of a Suspense boundary causes a blocking route in Next.js. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data outside of a Suspense boundary causes a blocking route i... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-blocking-ro-6.jsx | A JSX example demonstrating a Next.js route that triggers a blocking error by accessing uncached data without a Suspense boundary. | Exact payloads, commands, or snippets shown in A JSX example demonstrating a Next.js route that triggers a blocking error by accessing uncached data without a Suspe... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-uncached-da-4.jsx | A JSX code example demonstrating a Next.js route where uncached data is accessed without a Suspense boundary, causing a blocking render. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating a Next.js route where uncached data is accessed without a Suspense boundary, causing... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-uncached-da-5.jsx | A JSX code example demonstrating an async component fetching data without a surrounding Suspense boundary in Next.js. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating an async component fetching data without a surrounding Suspense boundary in Next.js. |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-blocking-ro-7.jsx | A JSX code example demonstrating a Next.js page that triggers a blocking route error by accessing uncached data outside of a Suspense boundary. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating a Next.js page that triggers a blocking route error by accessing uncached data outsi... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-uncached-da-6.jsx | A JSX code example demonstrating an async component accessing uncached data without a surrounding Suspense boundary. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating an async component accessing uncached data without a surrounding Suspense boundary. |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-blocking-ro-8.jsx | A JSX code example demonstrating how accessing uncached data in a Next.js route without a Suspense boundary causes a blocking route. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data in a Next.js route without a Suspense boundary causes a... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-blocking-ro-9.jsx | A JSX code example demonstrating how accessing uncached data outside of a Suspense boundary causes a blocking route in Next.js. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data outside of a Suspense boundary causes a blocking route i... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-uncached-da-7.jsx | A JSX code example demonstrating how accessing uncached data in a component without a Suspense boundary causes a blocking route. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data in a component without a Suspense boundary causes a bloc... |
examples/nextjs-uncached-data-was-accessed-outside-of-suspense-nextjs-uncached-da-8.jsx | A JSX code example demonstrating how accessing uncached data in a component without a Suspense boundary causes a blocking route. | Exact payloads, commands, or snippets shown in A JSX code example demonstrating how accessing uncached data in a component without a Suspense boundary causes a bloc... |
What This Skill Covers
- When the cacheComponents feature is enabled, Next.js expects a parent Suspense boundary around any component that awaits data that should be accessed on ever...
- Main sections:
Why This Error Occurred,Possible Ways to Fix It,Accessing Data,Headers,Params and SearchParams.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://nextjs.org/docs/messages/blocking-route