How to integrate Firebase Admin with Angular 19 SSR for server-side data fetching?

Question:

I'm working on an Angular 19 application with Firebase and trying to implement Server-Side Rendering (SSR) where Firebase requests are resolved on the server side instead of the client side.

Current Setup: Angular 19 with @angular/ssr Client-side Firebase integration working properly

Goal: I want to fetch data from Firebase during server-side rendering so that:

The initial HTML contains the actual data (not loading states) Better SEO as search engines can see the real content Faster perceived loading times

Here are my packages

"dependencies": {
"@angular/animations": "^19.2.5",
"@angular/common": "^19.2.5",
"@angular/compiler": "^19.2.5",
"@angular/core": "^19.2.5",
"@angular/fire": "^19.0.0",
"@angular/forms": "^19.2.5",
"@angular/platform-browser": "^19.2.5",
"@angular/platform-browser-dynamic": "^19.2.5",
"@angular/platform-server": "^19.2.5",
"@angular/router": "^19.2.5",
"@angular/ssr": "^19.2.6",
"@nguniversal/express-engine": "^7.0.2",
"@ngx-translate/core": "^16.0.4",
"@ngx-translate/http-loader": "^16.0.1",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"express": "^4.18.2",
"firebase": "^11.6.0",
"ngx-quill": "^27.0.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.2.6",
"@angular/cli": "^19.2.6",
"@angular/compiler-cli": "^19.2.5",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"jasmine-core": "~5.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.7.2"
}


What's the recommended architecture for integrating Firebase with Angular 19 SSR?

Continue reading...