NotFound calls in React data streaming

[scenic nimbus]

I am rendering using React data streaming. This is done by passing the props to the Client Component as they are in Promise and resolving them using use hooks.

https://react.dev/reference/react/use#streaming-data-from-server-to-client

I want to return a Not Found page depending on the content of the data streaming result, so I currently chain then/catch to the Promise and call Next's notFound().

However, due to streaming, HTML will inevitably respond with a status code of 200 at first, and then a meta tag will be added while switching to a 404 page.

Is this an acceptable implementation of Next? Or is this unexpected behavior and should be avoided?

[toxic hamlet]

Hi @scenic nimbus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The behavior you're experiencing is expected when using Next.js with React data streaming. When streaming, a 200 status code is returned initially to signal that the request was successful. This is because Next.js starts streaming data immediately and due to how the web works, it has to have a status code 200 [source (https://github.com/vercel/next.js/issues/51021)].

When using notFound(), Next.js will insert a <meta name="robots" content="noindex" /> tag, signaling to crawlers that the not found page should not be indexed. This is done because once the response headers have been sent to the client, the status code of the response cannot be updated [source (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#status-codes)].

However, it's important to note that this does not affect SEO. The notFound function in Next.js is used to render UI when the notFound function is thrown within a route segment. Along with serving a custom UI, Next.js will return a 200 HTTP status code for streamed responses, and 404 for non-streamed responses [source (https://nextjs.org/docs/app/api-reference/file-conventions/not-found)].

So, your implementation is acceptable and aligns with the expected behavior of Next.js.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: