Handling top-level data fetching in Next.js 16 with cacheComponents and “Uncached data accessed outside of <Suspense>” error

[abhishekmardiya]

Summary

I'm using Next.js 16 with cacheComponents enabled.

I have a page where I need to fetch data at the top level, for example:

export default async function Profile({ params }) {
  const { id } = await params;
  const user = await fetchUser(id);
 
  if (!user) {
    notFound();
  }

  // ...
}

In this case, since data fetching happens directly at the top level of the component, I can’t wrap it in a <Suspense> boundary because I need access to the user value for the notFound() function.
I also can’t use use cache.

Next.js then throws the following error:
Uncached data was accessed outside of <Suspense>

So, should this error be avoided in cases like this? Or is it safe to ignore when top-level data fetching is required?

I know that with this data fetching pattern, the route is considered a blocking route, but I’d still like to confirm whether this is the intended or recommended approach.

What’s the recommended approach for handling this scenario in Next.js 16, especially when component caching is active?

Additional information

No response

Example

No response

[icyJoseph]

You could use a loading.tsx file sibling to this page, but we are finding that when learning cache components, for clarity sake, you can refactor to something like, for example:

async function Profile({ userId }) {
  // if you pass params keep it as you had it
  const id = await userId;
  const user = await fetchUser(id);
 
  if (!user) {
    notFound();
  }

  // ...
}

export default async function Page({ params }) {
    return (
       <>
         <h1>Profile page</h1>
         <Suspense fallback={<p>Loading data...</p>}>
              {/* or just pass params */}
              <Profile userId={params.then(p => p.id)} />
         </Suspense>
       </>
  )
}

[abhishekmardiya]

Thank you for the quick response.

I can’t use loading.tsx because it would return a 200 status code even when displaying a 404 page, which isn’t ideal for SEO.

In my application, the id and user details is used across multiple components and for generating JSON-LD schemas, so I can’t apply the logic you suggested.

Given that, is it okay to ignore the “Uncached data was accessed outside of ” error in this case?

[icyJoseph]

I think you can use the placeholder trick: https://nextjs.org/docs/messages/empty-generate-static-params#option-2-use-a-placeholder-param-for-validation

So if the userId is the placeholder, or no user, then notFound() - I tried a bit locally, and I see 404 Not Found w/ cURL.

[abhishekmardiya]

Okay… but I don’t want any SSG or ISR–related solutions.
From what I understand, cacheComponent doesn’t provide an option to opt out of caching behavior for specific pages or layouts.

So, if I choose to ignore the error Uncached data was accessed outside of <Suspense>, would that have any side effects on the application besides the route being treated as a blocking route?

[icyJoseph]

how do you intent to ignore the error though? it won't build right? - and do you mean you don't want to store any user data in SSG/ISR kind of thing?

[abhishekmardiya]

I wasn’t aware that this error could actually stop the build from completing. I’ll go ahead and use your suggested solution, then.

By the way, is there any chance that Next.js might introduce a feature to let us opt out of cache components for specific pages or layouts?

Thanks again for your help!

[abhishekmardiya]

Also, I wanted to mention that until this conversation, I wasn’t aware that notFound() can be called inside a component as well — I had assumed it could only be used at the top level of a page. It would be helpful if the documentation could be updated to clarify this, as it would likely help others too.