Tune-up your default Angular SSR application

Photo by Hosea Georgeson on Unsplash

Creating a new Angular application with SSR (Server Side Rendering) configured is just like buying a new stock ‘racy’ car, you will got the fully functional vehicle with built-in race engine. But, what if we want to going for a bigger race? a stock vehicle would not be a nice choice for winning.

Must the same for an Angular application, you’re improving the engine, but need some little tune up. Why? Because it’s default configuration is not yet the best choice for a production release, there are some kinds of X-Factor need to be concerned such as Chunk sizes, Securities, also Performances. Because of that, there are some nodeJS packages/libraries that can be implemented on your Angular SSR application such as:

Compression

npm install compression

This official Middleware for nodeJS is compressing the main chunks/bundles with some supported codings such as gzip and deflate. This helps the application to boost the performance with smaller amount of chunk sizes.

//basic use of compression in Angular SSR
//server.ts
import * as express from 'express';
import * as compression from 'compression';
const app = express();
app.use(compression());

As you can see down here, an Angular application without a compression, the chunks size are quite large for a script that sized:

Then, if you’re using a gzip compression on, the chunks size are shrinking small, its about … less than the original.

CORS

npm install cors

CORS is an enhanced mechanism of JSONP that cannot only support GET method, but also POST method. Basically it handles multiple resource on multiple sites via HTTP GET & POST.

CORS principle (source: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

Although this can be handled on back-end side, this method will more useful on securing specific front-end banking application such as Internet Banking that restricts the request to only whitelisted urls.

//basic use of body-parser in Angular SSR
//server.ts
import * as express from 'express';
import * as bodyParser from 'body-parser';
const app = express();
app.use(cors());

Conclusion

If you build a User focused application, delivering with better performance is a must. Also security is a quiet mandatory for a server side rendering application, those essential middlewares will boost your application to the next level.

References

• CORS Cross-Origin Resource Sharing (CORS) by Developer Mozilla
• CORS by Express