Problem with url/mappingFallback and 404

I’m having some trouble with mappingFallback and ssr rendering/redirecting 404 but client side rendering not rendering/redirecting 404.

We’ve implemented our own mappingFallback to look for products, categories and stories from storyblok.
The problem comes into play when no product, category or story is found and when there’s no “normal” route matching the url either.

I can see that SSR is rendering/redirecting to the page-not-found component/route then client-side rendering kicks in and it’s just rendering the layout without any content in the router area. i.e. the page not found stuff just disappears.

Anyone familiar with fallbackMappings that could help me track down what’s happening?

Hi! Thanks for the question. On demo - the redirect to 404 works just fine: http://demo.storefrontcloud.io/efwfw
I understand that in your case you get empty page for this kind of URL correct - in client’s side (there is a ssr markup for 404 returned and then -> bang -> empty content)?

Not sure why is that but please take a look at this line: https://github.com/DivanteLtd/vue-storefront/blob/0a3aa2ea637fea48d164f8c590ebb7b77a3115cd/core/modules/url/router/beforeEach.ts#L31

I belive it’s a good starting point for debugging (using Chrome debugger for example).

Don’t you have any URL that’s matching this page anyway (like ‘*’ route kind of)?

We discussed this briefly on Slack but I’ll add my findings here in case it helps.

I’m also using the same module for Storyblok support and it seems to work ok, the main problem is as you mentioned there seems to be something going on with SSR.

If I visit a “Storyblok” page it renders its contents just fine, however I get the following warning in the console:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

However in my case SSR does render the content, I’m not getting a 404 page:

/blog/hello-word

They’re both pretty much the same but it seems like there are 2 extra nodes in the server side markup according to the warning but I haven’t been able to find why.

Mismatching childNodes vs. VNodes: 
NodeList(23) [div.header, text, comment, text, comment, text, comment, text, comment, text, footer, text, footer, text, div.notifications.fixed, text, comment, text, comment, text, div.no-ssr-placeholder, text, comment]
(21) [VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode]

I’m actually seeing this too. When I hit a page where a story is found, it triggers a complete client side render as the ssr and client render is different. Interesting

@jahvi @zimme Did you guys find out what’s happening here? I’m also seeing this error on category pages. Also interesting that in the ssr screenshot there are no icons as I have this issue on category pages as well…