Server-side Rendering using KoaJS and Angular UniversalAshok VishwakarmaBlockedUnblockFollowFollowingMar 2Server-side rendering using KoaJS and Angular UniversalWhy server-side rendering?Our web applications become SPA (Single-page Apps) as we have started using front-end frameworks like Angular, React, Vue and etc.
Which simply names there is literally only one single HTML page which is served initially to the client (Browser) and the other views are generated on the client via JavaScript.
The other required resources like data, images and etc.
are still being handled by request-response cycle via the browser.
There are huge benefits to develop web applications as a SPA but there are some tradeoffs and the most important one is the ability for web crawlers to crawl your web application.
Most of the web crawlers don’t parse the JavaScript and while crawling your web application they only get that single HTML document which has nothing significant for them to rank your page.
The SSR (Server-side Rendering) is the process to bridge the gap.
Angular UniversalA normal Angular application executes in the browser, rendering pages in the DOM in response to user actions.
Angular Universal generates static application pages on the server through a process called server-side rendering (SSR).
When Universal is integrated with your app, it can generate and serve those pages in response to requests from browsers.
It can also pre-generate pages as HTML files that you serve later.
Which simply means that you can run your Angular application not only the browser but on the server as well and help your web application to facilitate for web crawlers, improved performance for low-end devices such as mobile by showing the first page as quickly as possible.
But the official Angular Universal does not support SSR using KoaJS out of the box and in this post, I’ll be guiding that how you can do that with very minimal changes in your existing Angular application.
DependenciesBefore you get started with Angular Universal in your existing Angular application you must install some dependencies.
koaKoaJS server for nodekoa-staticKoa static file serving middleware@angular/platform-serverThe core Angular module for the server to enable SSR (Server-side rendering)@nguniversal/module-map-ngfactory-loaderThis is a NgFactory Loader which uses a map of modules instead of resolving modules lazily.
This is useful when executing in node because lazy loading serves no purpose.
ts-loaderThis is the typescript loader for webpack.
webpack-node-externalsEasily exclude node modules in Webpackwebpack-cliThis is the command-line interface for webpack.
Run the below commands to install all at oncenpm install –save koa koa-static @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader webpack-node-externals webpack-cliThere are some required changes into your existing Angular application to support SSR using Angular Universal are mentioned here, make sure you have done that before moving to the next steps.
You can skip the Step 4: Set up a server to run Universal bundlesCreating your KoaJS serverThe example you have seen in the official guide (Step 4: Set up a server to run Universal bundles) is for ExpressJS but we’ll be doing the same thing with KoaJS server.
Create a universal.
ts — a middleware for KoaJS serverCreate a server.
ts file in your root where you have your package.
json and initiate your KoaJS server.
Create webpack.
server.
config.
js file in your root, you have your package.
json/webpack.
server.
config.
jsconst path = require('path');const nodeExternals = require('webpack-node-externals');module.
exports = { target: 'node', externals: [nodeExternals()], devtool: 'source-map', module: { rules: [{ test: /.
ts?$/, loader: 'ts-loader', exclude: /node_modules/ }], }, resolve: { extensions: ['.
tsx', '.
ts', '.
js'] }, output: { filename: 'server.
js', path: path.
resolve(__dirname, 'dist', 'server') }};Creating setup scripts in package.
json"scripts": { "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server", "serve:ssr": "node dist/server.
js", "build:client-and-server-bundles": "ng build –prod && ng run my-project:server:production", "webpack:server": "webpack –config webpack.
server.
config.
js –progress –colors", .
}To read more about Angular Universal visit the below linkAngularAngular is a platform for building mobile and desktop web applications.
Join the community of millions of developers…angular.
ioPlease share with your friends and don't forget to clap :).