Pure SPA: disabled prerender + ssr to fix firestore caching

ortwic · Apr 4, 2024 · e8411a5 · e8411a5
1 parent a2d362d
commit e8411a5
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 119 deletions.
diff --git a/angular.json b/angular.json
@@ -40,11 +40,8 @@
               "src/styles/main.scss"
             ],
             "scripts": [],
-            "server": "src/main.server.ts",
-            "prerender": true,
-            "ssr": {
-              "entry": "server.ts"
-            }
+            "prerender": false,
+            "ssr": false
           },
           "configurations": {
             "production": {
@@ -67,13 +64,6 @@
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
-            },
-            "dev-spa": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "ssr": false,
-              "prerender": false
             }
           },
           "defaultConfiguration": "production"
@@ -86,9 +76,6 @@
             },
             "development": {
               "buildTarget": "why-app:build:development"
-            },
-            "dev-spa": {
-              "buildTarget": "why-app:build:dev-spa"
             }
           },
           "defaultConfiguration": "development"

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "ng serve -c dev-spa",
+    "dev": "ng serve -c development",
     "start": "ng serve -c development",
     "build": "ng build --aot --verbose",
     "watch": "ng build --watch -c development",

diff --git a/server.ts b/server.ts
diff --git a/src/app/app.config.server.ts b/src/app/app.config.server.ts
diff --git a/src/app/services/firestore.service.ts b/src/app/services/firestore.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, inject, isDevMode } from '@angular/core';
+import { inject, isDevMode } from '@angular/core';
 import {
     Firestore, 
     collection,
@@ -54,7 +54,10 @@ export class FirestoreService {
         const query = this.createQuery<T>(...constraints);
         return getDocs<T, DocumentData>(query).then((snapshot) => {
             const result: T[] = [];
-            snapshot.forEach((doc) => result.push(doc.data(snapshotOptions)));
+            snapshot.forEach((doc) => result.push({
+                id: doc.id,
+                ...doc.data(snapshotOptions)
+            }));
             return result;
         });
     }

diff --git a/src/app/services/user-data.service.ts b/src/app/services/user-data.service.ts
@@ -1,4 +1,5 @@
-import { Injectable, Signal, computed, signal } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Injectable, PLATFORM_ID, inject, signal } from '@angular/core';
 
 export const localKey = 'user-data';
 export const pageReadTime = '__page-read-in';
@@ -16,44 +17,58 @@ function startDownload(url: string, filename: string) {
     providedIn: 'root',
 })
 export class UserDataService<T = unknown> {
+    readonly platformId = inject(PLATFORM_ID);
     readonly userData = signal(this.load());
 
     private load(): Record<string, Record<string, T>> {
-      const data = localStorage.getItem(localKey);
-      if (data) {
-          try {
-              return JSON.parse(data);
-          } catch (e) {
-              console.error(e);
-          }
-      }
-      return {};
+        if (isPlatformBrowser(this.platformId)) {
+            const data = localStorage.getItem(localKey);
+            if (data) {
+                try {
+                    return JSON.parse(data);
+                } catch (e) {
+                    console.error(e);
+                }
+            }
+        }
+        return {};
     }
 
     getEntry(id: number | string): Record<string, T> {
         return this.userData()[id] ?? {};
     }
 
     save(id: number | string, data: Record<string, T>) {
-        this.userData.update(obj => ({ 
-            ...obj, 
-            [id]: {
-                ...obj[id],
-                ...data
-            }
-        }));
-        localStorage.setItem(localKey, JSON.stringify(this.userData()));
+        if (isPlatformBrowser(this.platformId)) {
+            this.userData.update((obj) => ({
+                ...obj,
+                [id]: {
+                    ...obj[id],
+                    ...data,
+                },
+            }));
+            localStorage.setItem(localKey, JSON.stringify(this.userData()));
+        } else {
+            console.warn(`Cannot save ${id} in server`);
+        }
     }
 
     clear() {
-        this.userData.set({});
-        localStorage.removeItem(localKey);
+        if (isPlatformBrowser(this.platformId)) {
+            this.userData.set({});
+            localStorage.removeItem(localKey);
+        }
     }
 
     download() {
-        const json = JSON.stringify(this.userData());
-        const blob = new Blob([json], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        startDownload(url, 'user-data.json');
+        const data = this.userData();
+        if (data) {
+            const json = JSON.stringify(data);
+            const blob = new Blob([json], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            startDownload(url, 'user-data.json');
+        } else {
+            console.info('No data to download');
+        }
     }
 }
diff --git a/src/main.server.ts b/src/main.server.ts
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -8,9 +8,7 @@
     ]
   },
   "files": [
-    "src/main.ts",
-    "src/main.server.ts",
-    "server.ts"
+    "src/main.ts"
   ],
   "include": [
     "src/**/*.d.ts"