$ quasar dev (SPA mode - no problem)
When the web page show, take turn to click "first" & "second" button quickly and immediately.
suspense #fallback template works well. It renders a loading state until async component to be resolved. Perfect.
$ quasar dev -m ssr (SSR mode - two problems)
Problem 1: It can not render a loading state when the web page show (first route is in pending);
Problem 2: When the web page show, take turn to click "first" & "second" button quickly and immediately. No loading state and Browser console Error happens like:
vue-router.mjs:3479 TypeError: Cannot read property 'shapeFlag' of null
and
TypeError: Cannot read property 'parentNode' of null
What did you expect to happen?
SSR suspense works well like SPA (with router keepAlive), no error, render loading state as expect
$ pnpm create quasar
√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... spa-ssr-suspense-keepalive-demo
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite 5 (BETA | next major version - v2)
√ Package name: ... spa-ssr-suspense-keepalive-demo
√ Project product name: (must start with letter if building mobile apps) ... Quasar App
√ Project description: ... A Quasar Project
√ Pick a Vue component style: » Composition API with Githubissues.
Githubissues is a development platform for aggregating issues.
What happened?
$
quasar dev(SPA mode - no problem) When the web page show, take turn to click "first" & "second" button quickly and immediately. suspense #fallback template works well. It renders a loading state until async component to be resolved. Perfect.$
quasar dev -m ssr(SSR mode - two problems) Problem 1: It can not render a loading state when the web page show (first route is in pending); Problem 2: When the web page show, take turn to click "first" & "second" button quickly and immediately. No loading state and Browser console Error happens like:vue-router.mjs:3479 TypeError: Cannot read property 'shapeFlag' of nullandTypeError: Cannot read property 'parentNode' of nullWhat did you expect to happen?
SSR suspense works well like SPA (with router keepAlive), no error, render loading state as expect
Reproduction URL
https://github.com/fengjac/spa-ssr-suspense-keepalive-demo
How to reproduce?
$ pnpm create quasar √ What would you like to build? » App with Quasar CLI, let's go! √ Project folder: ... spa-ssr-suspense-keepalive-demo √ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest) √ Pick script type: » Typescript √ Pick Quasar App CLI variant: » Quasar App CLI with Vite 5 (BETA | next major version - v2) √ Package name: ... spa-ssr-suspense-keepalive-demo √ Project product name: (must start with letter if building mobile apps) ... Quasar App √ Project description: ... A Quasar Project √ Pick a Vue component style: » Composition API with Githubissues.