Angular remove SSR from your project

Angular remove SSR from your project

You started a new project in Angular with Server-side Rendering because: "it's cool".
After few iterations you notice that there are multiple issues and there are not really benefits using SSR for your use case.

desperate developer

How to disable Angular SSR

In your `angular.json build->options you have something like:

"server": "src/main.server.ts",
"outputMode": "server",
"ssr": {
  "entry": "src/server.ts"
}

You have to set ssr and predendered to false, outputMode` to be set on static:

 "server": "src/main.server.ts",
    "outputMode": "static",
    "ssr": false,
    "prerender": false

After this change when you run ng build (for production) you will find your application in the browser folder again:

Is SSR really necessary?

In most of the uses cases in which we use Angular Server-Side Rendering is not necessary, it adds a lot of complexity without bringing many benefits.

To deploy SSR we need a NodeJs server, in case we are developing the backend with Java, it adds an extra layer.

The server needs to know all the path to pre-render the pages. When the web site has some dynamic feature this add a lot of works to list all the possible parameters.

A possible use case

I think SSR could be useful if we have a lot of existing Angular components and we want to build a static website using the same design and components.

Great! Next, complete checkout for full access to Fullstack developer's journey.
Welcome back! You've successfully signed in.
You've successfully subscribed to Fullstack developer's journey.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.