Disable SSR while serving application locally in Angular 17

Question

I'm using Nx with Angular. I've run the @nx/application - setup-ssr generator which created all the necessary files for SSR. Before it used to add separate executors for serving an application with SSR such as serve-ssr, but no new executors were added to project.json as seen here:

{
  "name": "public",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "app",
  "sourceRoot": "apps/public/src",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/public",
        "index": "apps/public/src/index.html",
        "browser": "apps/public/src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "apps/public/tsconfig.app.json",
        "assets": [
          {
            "glob": "**/*",
            "input": "assets",
            "output": "assets"
          },
          "apps/public/src/favicon.ico",
          "apps/public/src/assets"
        ],
        "styles": ["apps/public/src/styles.scss"],
        "stylePreprocessorOptions": {
          "includePaths": ["styles", "libs/stylekit/src/lib"]
        },
        "scripts": [],
        "server": "apps/public/src/main.server.ts",
        "prerender": true,
        "ssr": {
          "entry": "apps/public/server.ts"
        }
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "buildTarget": "public:build:production"
        },
        "development": {
          "buildTarget": "public:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "buildTarget": "public:build"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/public/**/*.ts", "apps/public/**/*.html"]
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/public/jest.config.ts"
      }
    },
    "serve-static": {
      "executor": "@nx/web:file-server",
      "options": {
        "buildTarget": "public:build"
      }
    }
  }
}

Which means that SSR is enabled by default whenever you serve the app now since v17, which is horrendous because for every change you make now the app takes 10+ seconds to reload despite using Vite for the development server.

I've been reading through the new (and old) SSR docs as well as trying to find Github issues mentioning this but it says nothing about disabling or enabling SSR while serving the app, or allowing you to serve the app using a separate executor.

I'm really confused regarding this as it feels like a huge step backwards. How do I disable SSR in development?

Answer 1

---Update Angular 19---

The default install creates the following in angular.json build/options

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

To disable SSR change to:

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

Follow that pattern in the different environments you may or may not wish to enable/disable SSR for

Answer 2

If you want to just disable server side rendering and disable standalone mode in order to merge component use

ng new your-project-name --no-standalone --routing --ssr=false

example my project name is todo-app

ng new todo-app --no-standalone --routing --ssr=false

Answer 3

SSR is enabled whenever "ssr" or "prerender" are truthy your config.

The solution for you would be to set it to false in the development configuration :

        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true,
          "ssr": false, // here
          "prerender": false // and here
        }