How are we supposed to handle NextJS's new file/path based error files in conjunction with cacheing CDNs?
Specifically, I'm building a new website using the app route handling of Next 13 and generating content from a headless CMS. The initial content is all statically generated, and then new pages/posts are done with Dynamic Route Segments.
In my specific case, my CMS lets me define webhooks for content changes. Then, whenever content is modified/deleted/created I hit an API route that invalidates the Next cache, and sends an AWS invalidation command to CloudFront. So, 404 errors aren't a problem. It's totally OK for the error to be cached on CloudFront, because if I ever create that page, it will invalidate the CloudFront cache and the content will then be available.
However, if I hit an actual error — say, a server side error, as I happen to have just done — the CDN will cache the error "page" as the actual page.
So, to make ti real, my structure looks like this:
/app
error.js
global-error.js
layout.js
not-found.js
/reflections
error.js
layout.js
/[slug]
error.js
layout.js
not-found.js
page.js
If hitting www.mysite.com/reflections/foo generates a 500 error, then what gets served is, effectively
<app/layout>
<app/reflections/layout>
<app/reflections/[slug]/layout>
<app/reflections/[slug]/error />
and that whole things gets cached at the CDN. If the error ever recovers, then /reflections/foo will still get the error page until the cache expires.
How are we supposed to handle this?