Server Side Rendering in Angular: The What, Why and How

Introduction

Hi devs! Nice to see you here. Today in this blog we will understand what is server-side rendering and how it is more beneficial than client-side rendering. Apart from this we will also understand the concept of hydration.

Server side rendering

Server side rendering is the process of rendering the HTML pages on the server. In simpler terms, instead of the browser, the server generates HTML pages and then sends it for the user. By default all the angular applications are rendered on the client side. In client side rendering, the angular app sends a blank page to the browser and then builds everything on the browser with javascript.

Advantages of SSR

• Faster rendering: Since the browser receives the full HTML page instead of building it, hence it is faster. It is good for users with slow internet.
• Better SEO: It is easier for search engine optimization engines to crawl the content of the application.
• Improved user experience: The browser can parse the fully rendered HTML page  and display it even before it downloads the application JavaScript. So user does not see any blank screens.

Difference between Server-side rendering and Client-side Rendering

Without SSR (client-side only):

• Your browser will mostly get an empty page.
• It will download Angular and javascript files.
• And then build your app and fills in the page which can take time.

With SSR

• The server will send a full HTML page with content already inside.
• The browser just have to show it.
• Then Angular hydrates the page to make it interactive and functional.

Let us first create the app using the command ng new appName. I will be using angular 17 for creating the app.

ng new YOUR_APP_NAME

When you enter this command, it will first ask you for css/scss. You can choose accordingly.

Next it will prompt you if you want you if you want to use server side rendering or not. Enter y for this case and it will create a new angular app with server-side rendering enabled.

Let us have a look at the code structure:

Here we see app.config.server.ts which contains the application config. Similar to what we have in app.config.ts having all the configurations that will be needed for the application.

Next we have main.server.ts. This file is similar to our main.ts where we bootstrap our application and provides the root component.

Lastly we have server.ts. It’s a Node.js + Express server that Loads your Angular app’s server-side bundle.

Next, we will buld the app using the command: 

ng build

When we build our app then the dist folder will contain two folders. One for client side rendering(browser folder) and another for server side rendering(server folder)

If you just want to generate the build for ssr, you can use this command:

ng build:ssr

Now that you have created the build, let us run the app to verify if ssr is working or not. Run your application with the command ng serve and check network tab.

In the first request you will be able to see the full page being passed as a response in the request. This tells us that we received the full page ready from the server only.
In addition to this, you can also check the console which will mention something like Angular hydrated components. And hydration is a part of ssr.

Hydration

Now we know that we will get the full ready page from the server. But there is one thing to note here that it will lack interactivity. Button click functionality or any event wont work. Because server just returned a HTML page without any angular logic.
Now what angular does, it just adds the interactivity logic – attaches its event handlers, bindings, and other interactive logic from your TypeScript code, without having to re-render the entire page from scratch.
This makes faster rendering.
This process of adding functionality to your rendered page is called hydration. It is handled automatically by angular from version 16.

Disadvantages of using SSR

• Limited Support for Some Browser APIs – Server-side code doesn’t run on a browser. So for APIs like window, document, or localStorage , isPlatformBrowser checks will be required
• Third party libraries – Some third-party libraries might not work properly with SSR as they rely on browser specific APIs.
• Complex Setup and Maintenance – SSR adds complexity to your Angular app.
• Harder Debugging – Errors can occur on both the client and server sides, making it harder to find issues.

Conclusion

Server-Side Rendering (SSR) in Angular offers significant benefits like improved SEO and faster initial page loads by delivering fully rendered HTML from the server. However, it’s important to weigh these advantages against the added complexity, increased server load, and potential limitations. With the introduction of hydration in modern Angular versions, SSR has become more seamless and efficient. Ultimately, the decision to use SSR should be based on your application’s specific needs—particularly around performance, SEO, and scalability. When used thoughtfully, SSR can greatly enhance the user experience and the visibility of your Angular applications.

Finally, for more such posts like this, please follow our LinkedIn page- FrontEnd Competency.