What is Server Side Rendering.
Javascript Frameworks nowadays have changed the game not on just on the side of development but on how to display applications in browser but let's talk about the first technologies before Single page applications came into our world.
Before the rise of applications fully developed and generated by Javascript, we have several server side languages like Java and PHP that returns HTML pages in the HTTP call making it a static HTML content file where the things that needs to be processed is already done in the server.
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.
Speed connection is not the only issue on SPA, we are also solving the limitations of search engines, the power of search engine like google has limits, the ability to render Javascript sites before indexing it is very limited having the chances to get to top search is reduced.
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 HTML pages we need is already generated upon building the application, the HTML will be saved and will be served along the response allowing all sites accessible event Javascript is disabled in the browser, the major downside it is not available for querying any data from API as all content are now generate at build process.
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
As we can see on the flow above, on the first state of Server side rendering, the HTML Page is already loaded and the user will not wait for the page to load, having other things like downloading Javascript files and the framework happpen behind the scenes. we might encounter a longer time to wait before certain parts of the application to be interactive but the major here advantage is the shorter time loading for the HTML pages.
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.
To start:
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.