What is SSR and why we need it on SPA?
Updated: Aug 8, 2021
What is Server Side Rendering.
So what is Server Side Rendering? first let us see a typical Single Page Application (Angular) when being rendered in the client browser.
We can see above that the HTML page being sent by angular is not fully rendered, we can see an <app-root> tag where the bootstrapped modules and components of our application will be rendered to complete the content of the page thus all the needed html content is not processed completely as it is delivered to the client.
So why is this an issue on Single Page Applications?
Honestly we have internet providers in the market which offers a high speed internet and this would not be a big issue at all as all content will be loaded and set to the client browser seamlessly but what if a user with slow connection or a device that is not very powerful but the we are targeting the what if part, if the user with a slow connection will try to access the app, they might encounter a long time loading in the application having the app trying to load and process other resources.
Ways in solving issues on rendering
Before we full discuss the power of server side rendering, I will discuss other method in order to solve the issues mentioned.
A. Make key pages Static
we can generate our important pages like index or about page such that this will be the target of search engines to be indexed.
B. Generate the HTML pages upon building
The Concept of Server Side Rendering
Why is SSR becoming popular today, so what is the advantage of SSR to other solution provided above, mainly SSR allows us to process HTML pages in the server but in a more dynamic way, the content is not known at build time, the apps are called isomorphic or universal.
Client Side vs Server Side Rendering
Let us compare how client side and server side rendering works
Application of Server Side Rendering in Angular
So we have discussed a lot about Server Side rendering, what are the advantages, how it works and why is this an issue on single page applications, now let us apply SSR on Angular framework.
We dont have to do SSR for angular from scratch, thanks to Angular Core Team, they have provided Angular Universal which activates the power of SSR for the framework.
1. let us create an angular project using angular-cli
Note* make sure you have the latest Angular-CLI npm i --g @angular/cli
ng new <project-name>
2. execute the command on your root project ng add @nguniversal/express-engine
and after this...
actually thats it! we just added all the Universal setup and Node server with that single command and we can see that a server files for Nodejs has been added in our application.
But let us test if the universal really works
Running the Angular Universal App
we can see in our package.json that angular universal has added scripts to run our angular universal.
we can use the npm run dev:ssrcommand for testing in development and the npm run build:ssr for building the angular universal application. lets build our application and run npm run serve:ssr and we will try to inspect the returned HTML page.
We can see that the generated html is not the plain app-root tag, but all the contents of the elements is also rendered in the client side, this means that the server has pre rendered all resouces in the HTML file so the user can view the page immediately.
Dynamic SSR and Static Pre-rendering
So we have installed and run our Angular Universal successfully but we noticed in our package.json that there is a another command named pre-render. what does this do? the previous thing we did was a Dynamic SSR and the pre-render command refers to Static Pre-rendering, so what's the difference between the two?
Dynamic SSR allows a live node server on our angular app that when we change a route it will dynamically generate and serialize the application
Static Pre-rendering is the ability to pre-render routes and create static file and choosing which to send to the client browser.
So the big question is what to use?
We can use static pre-rendering when our pages is mainly static, it means that it is not that dynamic , it doesn't change that much and no dynamic and often updated are on the application.
On the other hand, we can use dynamic ssr if our application is holding data that is updated from time to time basis like a e commerce page or Facebook feeds.