[Cache Compoenents] Returning 200 Instead of 404 When Using Suspense and Cached Components

[abhishekmardiya]

I want to return a 404 status code for pages that don’t have any search params.

However, because I’m using a cache components, I have to wrap my async logic inside Suspense. The problem is that notFound() gets called after Suspense resolves, so Next.js already sends a 200 status.

Is there a proper way to handle this so the page still returns a true 404?

Example:
page path: https://my-app.com/top-products?type=1&model=mac
page path: https://my-app.com/top-products (wants early return)

import { notFound } from "next/navigation";
import { Suspense } from "react";

export defaul function TopProductsPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string>>;
}) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <TopProductsPageContent searchParams={searchParams} />
    </Suspense>
  );
}

const TopProductsPageContent = async ({
  searchParams,
}: {
  searchParams: Promise<Record<string, string>>;
}) => {
  const urlParams = await searchParams;

  if (!Object.keys(urlParams)?.length) {
    return notFound();
  }

  const url = `https://some-api.com?${new URLSearchParams(urlParams)?.toString()}`;

  const res=await fetch(url);
  const data=await res.json()

 return <div>{/* some code */}</div>;
};

[KhalilBensaha]

hello bro
i think the problem in your code that You are using a cache/async component wrapped in Suspense.
and in Next.js behavior suspense waits for the component to resolve before rendering, so the HTTP response is already set to 200 when notFound() is eventually called.
you can Move the check before Suspense
try this
import { notFound } from "next/navigation";
import { Suspense } from "react";

export default async function TopProductsPage({
searchParams,
}: {
searchParams: Record<string, string>;
}) {
// Check immediately, before Suspense
if (!searchParams || !Object.keys(searchParams).length) {
notFound(); // <-- true 404
}

return (
<Suspense fallback={

Loading...

}>


);
}

const TopProductsPageContent = async ({
searchParams,
}: {
searchParams: Record<string, string>;
}) => {
const url = https://some-api.com?${new URLSearchParams(searchParams).toString()};
const res = await fetch(url);

return

...

;
};

or Make Suspense optional (second solution but i think the first one is better )
i hope that answered you , if yes i would lik if you can mark it

have a nice day bro

[icyJoseph]

This is not the problem.

1. searchParams is a Promise object, so it has to be awaited (v15 and v16+)
2. with cache components enabled, to access searchParams (runtime data), right now, you have to guarantee a static shell exists around the runtime data access
3. to do that you wrap the access with Suspense, and that's where OP is at the moment - I'll try to follow up soon

[abhishekmardiya]

@icyJoseph
Hi, just circling back on this. Wanted to check if there are any updates