I create a from scratch new project based on the latest @quasar/cli.
Unfortunately the PWA + SSR usage mentionned here: https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-with-pwa/ only work in Development mode and NOT WORK in Production.
As soon as you create a Production build, it’s not work anymore.
To resume, inside quasar.config.js (or quasar.config.ts)
For Only SSR case
// ...
ssr: {
// ...
pwa: false
// ...
}
// ...
quasar dev -m ssr produce a source server-side rendering.
quasar build -m ssr then cd dist/ssr then node index.js produce a source server-side rendering.
but
For PWA + SSR case
// ...
ssr: {
// ...
pwa: true
// ...
}
// ...
quasar dev -m ssr produce a source server-side rendering
quasar build -m ssr then cd dist/ssr then node index.js NOT GENERATE server-side code.
Question: what configuration I missed and I should add, at build time or at running node time, to made server-side rendering work?
Below all the instruction to reproduce the bug:
-
On Windows 11
-
With nvm 1.1.12
-
With node 20.12.0
-
With npm 10.5.0
-
Create a quasar directory, and move inside
-
Run
npm i -g @quasar/cli -
Run
npm init quasar
— Install [email protected]
— Choose App with Quasar CLI, let’s go!
— Project folder: quasar-project
— Pick Quasar version: Quasar v2(Vue 3 | latest and geartest)
— Choose TypeScript
— Chose Quasar App CLI with Vite 2 (stable | v1)
— Package name: quasar-project
— Project product name: Quasar App
— Project description: A Quasar Project
— Author: SkeptRaiser
— Pick a Vue component style: Composition API
— Pick your CSS preprocessor: Sass with SCSS syntax
— Chose Linting / State Management (Pinia) / axios / vue-i18n
— Pick an ESLint preset: Prettier
— Install project dependencies? Yes, use npm -
Move inside directory
quasar-project -
Add line
"dev-ssr": "quasar dev -m ssr",after"dev"to"$scripts"property underpackage.jsonfrom directoryquasar-project -
Run
npm run dev-ssr -
Reach
view-source:http://localhost:9100/and see the source look like following
<!DOCTYPE html>
<html lang=en-US dir=ltr>
<head>
<script type="module" src="/@vite/client"></script>
<script type="module">
import { inject } from "/@vite-plugin-checker-runtime";
inject({
overlayConfig: {},
base: "/",
});
</script>
<script>window.__INITIAL_STATE__={};document.currentScript.remove()</script>
<title>Quasar App</title>
...
</head>
<body class="desktop no-touch body--light" data-server-rendered>
<div id="q-app"><div class="q-layout q-layout--standard" style="min-height:0px;" tabindex="-1">...</div></div><script type="module" src="/.quasar/client-entry.js"></script>
</body>
</html>
with a rendered body that is CORRECT EXPECTED BEHAVIOR.
- Add line
"build-ssr": "quasar build -m ssr"after"build"to"$scripts"property underpackage.jsonfrom directoryquasar-project - Run
npm run build-ssr - Move inside directory
dist/ssr - Run
node index.js - Reach
view-source:http://localhost:3000/and see the source look like following
<!DOCTYPE html><html lang=en-US dir=ltr><head><script>window.__INITIAL_STATE__={};document.currentScript.remove()</script> <title>Quasar App</title>...</head><body class="desktop no-touch body--light" data-server-rendered> <div id="q-app"><div class="q-layout q-layout--standard" style="min-height:0px;" tabindex="-1">...</div></div></body></html>
with a rendered body that is CORRECT EXPECTED BEHAVIOR.
- Move outside directory and back to
quasar-projectdirectory - Change line 144
pwa: false,topwa: true,in the configssr:property from filequasar.config.js - Run
npm run dev-ssr - Reach
view-source:http://localhost:9100/and see the source look like following
<!DOCTYPE html>
<html lang=en-US dir=ltr>
<head>
<script type="module" src="/@vite/client"></script>
<script type="module">
import { inject } from "/@vite-plugin-checker-runtime";
inject({
overlayConfig: {},
base: "/",
});
</script>
<script>window.__INITIAL_STATE__={};document.currentScript.remove()</script>
<title>Quasar App</title>
...
</head>
<body class="desktop no-touch body--light" data-server-rendered>
<div id="q-app"><div class="q-layout q-layout--standard" style="min-height:0px;" tabindex="-1">...</div></div><script type="module" src="/.quasar/client-entry.js"></script>
</body>
</html>
with a rendered body that is CORRECT EXPECTED BEHAVIOR.
- Run
npm run build-ssr - Move inside directory
dist/ssr - Run
node index.js - Reach
view-source:http://localhost:3000/and see the source look like following
<!DOCTYPE html><html lang=en-US dir=ltr><head><script>window.__INITIAL_STATE__={};document.currentScript.remove()</script> <title>Quasar App</title>...</head><body class="desktop no-touch body--light" data-server-rendered> <div id="q-app"><div class="q-layout q-layout--standard" style="min-height:0px;" tabindex="-1">...</div></div></body></html>
with a rendered body that is CORRECT EXPECTED BEHAVIOR.
- Move outside directory and back to
quasar-projectdirectory - Add line
"dev-pwa": "quasar dev -m pwa",after"dev"to"$scripts"property underpackage.jsonfrom directoryquasar-project - Run
npm run dev-pwa - Reach
view-source:http://localhost:9200/and see the source look like following
<!DOCTYPE html>
<html>
<head>
<script type="module" src="/@vite/client"></script>
<script type="module">
import { inject } from "/@vite-plugin-checker-runtime";
inject({
overlayConfig: {},
base: "/",
});
</script>
<title>Quasar App</title>
...
</head>
<body>
<div id="q-app"></div><script type="module" src="/.quasar/client-entry.js"></script>
</body>
</html>
with a NO rendered body that is CORRECT EXPECTED BEHAVIOR.
-
- Add line
/src-pwaafter/src-cordovaproperty under.eslintignorefrom directoryquasar-project
- Add line
- Run
npm run dev-ssr - Reach
view-source:http://localhost:9150/and see the source look like following
<!DOCTYPE html>
<html lang=en-US dir=ltr>
<head>
<script type="module" src="/@vite/client"></script>
<script type="module">
import { inject } from "/@vite-plugin-checker-runtime";
inject({
overlayConfig: {},
base: "/",
});
</script>
<script>window.__INITIAL_STATE__={};document.currentScript.remove()</script>
<title>Quasar App</title>
...
</head>
<body class="desktop no-touch body--light" data-server-rendered>
<div id="q-app"><div class="q-layout q-layout--standard" style="min-height:0px;" tabindex="-1">...</div></div><script type="module" src="/.quasar/client-entry.js"></script>
</body>
</html>
with a rendered body that is CORRECT EXPECTED BEHAVIOR.
- Run
npm run build-ssr - Move inside directory
dist/ssr - Run
node index.js - Reach
view-source:http://localhost:3000/and see the source look like following
<!DOCTYPE html><html><head><title>Quasar App</title>...</head><body><div id=q-app></div></body></html>
with a NO rendered body that is NOT EXPECTED BEHAVIOR.
Edited answer:
It seems to be linked to the service-worker mechanism itself. If your service-worker not run
then you will see the SSR render code from server under view-source:
But if the service-worker run
The view-source: feature will so you an empty ssr response from server. This behavior not depend on dev or build command but depend on the activation or not of service-worker.
Original answer:
It seems it’s a bug with Chrome view-source: feature.
If I use a wget http://localhost:3000/ then I read the index.html file downloaded cat index.html I effectively see the correct rendered code inside the downloaded file.
From Firefox, the view-source: feature show the correct rendered code if you use the reload button front of URL search bar (but if you just reach it, the render is not present and I correctly not know why).