I have a SSR angular APP and it takes up to 15 seconds to see content after entering an url in the browser. When it requests for index.html file request timing looks like this: Tmings for index.html request
Extra time sometimes allocates in "Queueing" sometimes in "Waiting TTFB" aproximately 15s . This time it was unfortunate 35s. In local environment it's 15s fixed.
I made some searching, read some posts and noticed it's related with Http requests made on server side during build time. When it doesn't reach to API there is no delay and loads within 1-5 seconds. If I do a single request (even for a small peace of data) the app build slows down to fixed 15 seconds. I made some console logging and though the problem is related with http requests, the requests don't take long.
console logging test - start - it's url enter time, response - inner api request accomplish time, done - build finish time
Notice that api response comes within 400ms but build is "done" just 15 seconds later. I think that it might be related with ngZone or something but I don't understand this thing at all.
This is my tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"target": "es2015",
"module": "es2015",
"types": [],
"lib": ["es2017", "dom"]
},
"exclude": ["test.ts", "**/*.spec.ts"]
}
and tsconfig.server.json
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"outDir": "../out-tsc/app-server",
"baseUrl": "."
},
"exclude": ["test.ts", "**/*.spec.ts"],
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
}
and these are mine dependecies:
"dependencies": {
"@angular-devkit/core": "^7.3.3",
"@angular/animations": "^7.2.7",
"@angular/cdk": "^6.0.0-rc.12",
"@angular/common": "^7.2.7",
"@angular/compiler": "^7.2.7",
"@angular/core": "^7.2.7",
"@angular/forms": "^7.2.7",
"@angular/http": "^7.2.7",
"@angular/platform-browser": "^7.2.7",
"@angular/platform-browser-dynamic": "^7.2.7",
"@angular/platform-server": "^7.2.7",
"@angular/pwa": "^0.10.7",
"@angular/router": "^7.2.7",
"@angular/service-worker": "^7.2.7",
"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome-free": "^5.7.2",
"@fortawesome/fontawesome-svg-core": "^1.2.15",
"@fortawesome/free-solid-svg-icons": "^5.7.2",
"@ng-bootstrap/ng-bootstrap": "^4.0.0",
"@ngrx/effects": "^7.3.0",
"@ngrx/store": "^7.3.0",
"@ngrx/store-devtools": "^7.3.0",
"@ngu/carousel": "^1.5.5",
"@nguniversal/express-engine": "0.0.0",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@ngx-pwa/offline": "^6.1.0",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1",
"@types/cors": "^2.8.4",
"@types/express": "^4.16.1",
"@types/hammerjs": "^2.0.36",
"@types/lodash": "^4.14.121",
"add-to-homescreen": "^3.2.6",
"ajv": "^6.9.2",
"ansi-styles": "^3.2.1",
"axios": "^0.19.2",
"bootstrap-css-only": "^4.3.1",
"bootswatch": "^4.3.1",
"core-js": "^2.6.5",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"hammer-timejs": "^1.1.0",
"hammerjs": "^2.0.8",
"http-proxy-middleware": "^0.18.0",
"js-sha1": "^0.6.0",
"lazysizes": "^5.2.0",
"lodash-es": "^4.17.15",
"mobile-detect": "^1.4.3",
"mock-browser": "^0.92.14",
"mock-location": "^0.2.0",
"mysql": "^2.17.1",
"ng2-nouislider": "^1.7.13",
"ngrx-store-localstorage": "^5.1.1",
"ngx-cookie-service": "^2.1.0",
"ngx-i18nsupport": "^0.17.1",
"ngx-infinite-scroll": "^6.0.1",
"ngx-owl-carousel-o": "^1.1.7",
"ngx-pinch-zoom": "^1.2.3",
"ngx-toastr": "^10.0.4",
"node-sass": "^4.12.0",
"nouislider": "^12.1.0",
"path": "^0.12.7",
"public-holidays": "^0.2.2",
"redis": "^2.8.0",
"redis-parser": "^3.0.0",
"request": "^2.88.0",
"rxjs": "6.4.0",
"rxjs-compat": "^6.4.0",
"webpack-cli": "^3.3.10",
"winston": "^3.2.1",
"xml2js": "^0.4.19",
"zone.js": "^0.8.29"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.8",
"@angular/cli": "^7.3.4",
"@angular/compiler-cli": "^7.2.7",
"@angular/language-service": "^7.2.7",
"@types/dotenv": "^8.2.0",
"@types/jasmine": "^2.8.16",
"@types/jasminewd2": "~2.0.2",
"@types/mysql": "^2.15.8",
"@types/node": "~6.0.60",
"@types/redis": "^2.8.0",
"codelyzer": "^4.0.1",
"husky": "^1.3.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-viewport": "^1.0.4",
"prettier": "1.15.3",
"pretty-quick": "^1.10.0",
"protractor": "^5.4.2",
"puppeteer": "^1.16.0",
"ts-loader": "^5.2.0",
"ts-node": "^4.1.0",
"tslint": "~5.9.1",
"typescript": "3.2.4",
"webpack-bundle-analyzer": "^3.6.0"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
