In terms of our server-side application, we can no longer deploy it as a static website. We need to run it using Node.js on the server. Let's create a local.js file in the root directory, which will serve our application using server.js in the dist directory:

const port = process.env.PORT || 8080;

const server = require('./dist/server');

server.app.listen(port, () => {
    console.log("Listening on: http://localhost:"+port);
});

Next, we need to export the app variable in our server.ts file and comment out our app.listen call since we are listening to it in the local.js file:

...
export const app = express();

...
// app.listen(PORT, () => {
// console.log(`Node Express server listening on  
   http://localhost:${PORT}`);
// });

Since we are exporting server.ts, we need to update the output in our webpack.server.config.js file in order to output the bundle as the commonjs2 libraryTarget:

...
module.exports = {
    ...
    output: {
        libraryTarget: 'commonjs2',
        ...
    }
    ...
}

{
    ...
    "scripts": {
        "start": "node local.js",
        ...
        "now-build": "true",
        "now": "now deploy --public && now alias"
    },
    "now": {
        "name": "<your-app-name>",
        "alias": [ "<your-app-name>.now.sh" ],
        "files": [
            "dist",
            "package.json",
            "local.js"
        ]
    },
    ...
}

Now, we can build our application and deploy it on ZEIT Now using the following command:

> npm run build:ssr && npm run now

After the preceding command completes, open the alias that you configured in the browser.

Now, we can run the audit of our application and compare it with our benchmark:

We can see that our First Contentful Paint metric has considerably improved from 1.9 seconds to just 0.8 seconds. However, we can also see that Time to Interactive has increased from 2 seconds to 2.2 seconds, which can be explained because of the increase of JavaScript in our bundle. Here, the user can see that the page loaded in 0.8 seconds, but cannot interact with the web page until after 2.2 seconds. The Angular team provides a PrebootModule, which, if included, can track all the events on the page until the page becomes interactive and then replay all the events after the page becomes interactive. This way, you can trick users into thinking the application is interactive when, in reality, it's not.

Now that we've got a 100% performance score in Lighthouse, we need to figure out how we can optimize our application for search engines.