Causing 404 from component-level getServerSideProps

[thany]

Description

In a component-level getServerSideProps in a Next.js application, how do I make the page become a 404? What props can I set or return in order to cause a 404? The documentation is quite lacking in this regard. Regular Next.js says you just have to return { notFound: true }, but in a JSS application this won't work - it only works like that at page-level.

I think it's pretty commonplace that if a component cannot find its data, that the whole page is allowed to be a 404. But maybe's we're unique. I dunno, but it seems fairly basic to me. Yet, I cannot find for the life of me how to do this properly.

Only thing I found, is to set layoutData.sitecore.route = null; which does cause the whole page to be not found, but I don't think it's the right way, because in the SitecorePageProps, notFound remains false.

The only proper way I found to do this, is possible only at page-level getServerSideProps, but this is useless because of the way JSS is set up - every page is rendered through [[...path]].tsx so at that level I have no way of knowing what might or might not exist. That's for the components to know.

Additional information

No response

[art-alexeyenko]

Hi @thany !
General JSS/Sitecore philosophy is triggering a 404 response when the requested page item/route was not found on Sitecore side. This is the closest we can get to the common practice of 404'ing routes in standard sites and applications. We haven't considered the scenario of individual components triggering 404 for the whole page, and this something we'd rather avoid. If any component fails, our goal is to still render the rest of the page and provide information of what exactly is failing, instead of aborting the whole page from being loaded.
So out of the box, setting route to null would indeed be your best and easiest approach. For a cleaner implementation you can aslo try passing some custom prop from component level method and then read it and set either layout.sitecore.route or nextjs's notFound property via src\lib\page-props-factory\plugins\component-props.ts.
The component props are available via props.componentProps which has the following type:

{
  [componentUid: string]: unknown | ComponentPropsError;
}; 

You should be able to go through all the individual properties and adjust site behavior when needed.

[thany]

If any component fails, our goal is to still render the rest of the page and provide information of what exactly is failing, instead of aborting the whole page from being loaded.

That's great during development, but the end user must receive a human readable message, and the browser must receive an appropriate HTTP response code. Sorry, but that's just how the web works, doesn't it.

So like, if the entire page is a product detail page, and the product can't be found, a 404 (or 410 if you wanna be fancy) is honestly the only correct response to give to the browser. It wouldn't make sense to render a page with a header, some navigation, and otherwise a glaring white box where product details aren't found, would it? The very least thing it should do, is make it a HTTP 404, regardless of what's to be rendered visually.

The workaround you suggest is basically what we got atm. But it really is exactly that: a workaround.

The problem is that as far as Next.js is concerned, the only page where a 404 can be triggered standardly, is in [[...path]].tsx, because of how JSS is set up to work. If we could have a file for each type of page, like in a normal Next.js project, there wouldn't be a problem in the first place.

Or, indeed, if it were possible to use the app router. Because JSS's hack to be able to do a getServerSideProps in a component, is natively supported by the app router, iirc.