Giving "not-found" response for app router.

[resatDev]

Summary

I have a project which is using the app router. We are using our own design system. So, we have to use "use client" flag for all pages.

However, some of the pages have generic Ids coming from the routing. To check one of this id is valid or not, when page is loading, we are asking an endpoint. Because the page is client component, a loading component is rendering while validation endpoint respond.

If we think this process from perspective of SEO and CSR, the page is returning 200 status. For example;

The domain is x.com.
x.com/items/[itemId] is our generic route. When I am checking the itemId valid or not, my page is rendering loading component because it is client component.
So, the app is returning status 200.
But there is no page related to this id.

What I have tried;

Middleware;
I have checked this id at middleware and I can return 404. But I couldn't show any custom 404 UI.

What are your suggestions at this point?

Using version [email protected]

Additional information

No response

Example

No response