To make a website SEO friendly we have to implement Server side rendering of the application in Angular.
I have read many of the articles on Server Side Rendering. While reading, I come to know about two types of rendering.
1. Static Server Side Rendering 2. Dynamic Server Side Rendering
But What does it mean? I am not getting this from the articles I have read. Still confused which one to choose for my application.
So I just want to know for which type of application/website we have to use Static and for which type of application/website we have to use Dynamic Server Side rendering?
As you say, there are two ways to render Angular apps on the server. Here is the difference, along with examples to illustrate their use.
Essentially this refers to the process of generating pre-rendered pages for your app that you can then host statically using a service such as Amazon S3. The fact that these files are static also means they'd be easy to serve out of a CDN. You simply build the files on your local machine or CI environment, then push to wherever your host is. Here's a short guide on Pre-rendering Angular Applications.
Ultimately each route you've defined in your Angular app results in an HTML file including any dynamically generated content that is displayed on load. This obviously plays well with search engines & crawlers. When a browser loads up one of your pages it gets an immediate pre-rendered response, then Angular kicks in with all the dynamic behaviour defined in your controllers, services etc.
Example:
You've built a marketing website showcasing some product. It has a fixed number of routes (home, about, contact). Upon building the app, you get 3 static HTML files, some Javascript, and whatever other assets are involved.
You may have guessed, this is particularly useful for when you have dynamic routes (e.g. /products/:productId). Using Angular Universal we can run an Express.js server in Node, which will dynamically render each page when requested by a client. This takes a little more time but is well worth it!
Example:
You've built a shop and every time you add a new product you want it to be available for Google and the likes to index. You also want it to display well in Open Graph preview renderers such as Facebook.