Slow TTFB with Angular Universal and Express - node.js

Question

I'm posting this as a self-answered question because I didn't find anything that helped on the web when I was debugging this issue.
For some reason, the SSR version of my Angular 7 application consistently has a TTFB of around 5 seconds. I'm using the standard setup for Angular Universal using Express with a few modifications like so:
// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '#angular/platform-server';
import { enableProdMode } from '#angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import { provideModuleMap } from '#nguniversal/module-map-ngfactory-loader';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const compression = require('compression');
const app = express();
app.use(compression());
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const domino = require('domino');
const template = readFileSync(join(DIST_FOLDER , 'browser', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['Node'] = win.Node;
global['navigator'] = win.navigator;
global['Event'] = win.Event;
global['KeyboardEvent'] = win.Event;
global['MouseEvent'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['document'] = win.document;
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
app.engine('html', (_, options, callback) => {
renderModuleFactory(AppServerModuleNgFactory, {
// Our index.html
document: template,
url: options.req.url,
// DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => {
callback(null, html);
});
});
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));
// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
I've tried caching the pages on the server and removing the non-standard Domino stuff to make it just like the tutorial, but nothing changes the TTFB. That leads me to believe there is something in the application code that could be slowing it down. Any ideas?

Answer 1

When thinking about it more, I remembered that I had added a 5 second delay on pre-loading modules so that users who bounce from the application don't end up having to download all of the lazy loaded bundles. The code was like so:
import { PreloadingStrategy } from "#angular/router";
import { Route } from "#angular/router";
import { RouterModule } from "#angular/router";
import { Routes } from "#angular/router";
import { NgModule } from "#angular/core";
import { Observable, timer } from "rxjs";
import { of } from 'rxjs/internal/observable/of';
import { flatMap } from "rxjs/internal/operators";
export class PreloadPublicModules implements PreloadingStrategy {
preload(route : Route, load : Function) : Observable<any> {
const loadRoute = (delay) => delay ? timer(5000).pipe(flatMap(_ => load())) : load();
return route.data && route.data.preload ? loadRoute(5000) : of(null);
}
}
const routes : Routes = [
{ path: '', loadChildren: "app/public/home/home.module#HomeModule", data: { preload: true } },
{ path: 'about', loadChildren: "app/public/about/about.module#AboutModule", data: { preload: true } },
{ path: 'contact', loadChildren: "app/public/contact/contact.module#ContactModule", data: { preload: true } },
{ path: 'dashboard', loadChildren: "app/internal/dashboard/dashboard.module#DashboardModule", data: { preload: false } },
];
#NgModule({
imports : [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadPublicModules }) ],
exports : [ RouterModule ],
providers : [ PreloadPublicModules ]
})
export class AppRoutingModule { }
Removing that delay fixed the issue for the SSR portion; it no longer has the 5s TTFB. The PreloadPublicModules function is now:
export class PreloadPublicModules implements PreloadingStrategy {
preload(route : Route, load : Function) : Observable<any> {
return route.data && route.data.preload ? load() : of(null);
}
}