CODEWITHSUNDEEP
angulargithub-pagesserver-side-renderingstatic-site-generationangular18
Wesley
Wesley

Reputation: 427

Confusion about SSG and SSR in Angular 18

I'm currently running a small Angular 13 application on GitHub Pages and I want to update it to Angular 18 to use the new features. Additionally, I'm thinking of moving to SSG, to improve the user experience and continue hosting my application on GitHub Pages.

To understand the available options, I created a new application from scratch using Angular 18 and selected the option to add support for SSR. However, I couldn't find anything specifically related to SSG in the process.

From my understanding, SSG should generate static files on build time (like HTML, JavaScript, and CSS), allowing me to continue using GitHub Pages. However, after selecting support for SSR during the ng new process, my new scratch application includes some server-related files (presumably for SSR).

I can't find in the Angular documentation any deep info specifically about SSG or how to disable the server functionality of SSR. The only docs that I found is this: https://angular.dev/guide/prerendering#

Am I misunderstanding the concepts of SSG? Or is a server required to use SSG in Angular 18?

Any guidance or clarification would be greatly appreciated!

Upvotes: 6

Views: 6332

Answers (1)

Uttam Ughareja
Uttam Ughareja

Reputation: 1385

When you add SSR to the project it will enable both SSR and SSG by default. you can use both or can be used individually by changing the settings as shown bellow

SSR: its server side rendering on the fly as new request comes in, it will require node server when you deploy the project.

Suitable for dynamic content, for example a product price that may very every day or by ip location

SSR only config : set prerender to false

{
  "architect": {
    "build": {
      "options": {
        "server": "src/main.server.ts",
        "prerender": false,
        "ssr": {
          "entry": "server.ts"
        }
      }
    }
  }
}

SSG: its same SSR, server side rendering but it happens in advance when you build the project. this will take the exact same path and process as SSR when prerendering (server side/build time) content on the fly, for example calling api.

So SSG can do everything that SSR can (at build time, the limitation) and needs node server only during build time and then you can deploy the build as a static content to any server (without node).

Suitable for static and dynamic content that doesn't change a lot over time. if it changes then you need to rebuild and deploy everything again.

By default SSG, it will prerender all routes that doesn't require any dynamic parameter. however, you can prerender all dynamic routes as well during thee build time see here

As shown in the link above, you can create a file 'prerender-routes.txt' and list all of your routes that you want to prerender during the build process

If you have a bigger list of dynamic routes then it will take time to build the project.

If your content is changing frequently then it needs automation to build and deploy angular project when your data is changed.

SSG only config : set ssr to false

{
  "architect": {
    "build": {
      "options": {
        "server": "src/main.server.ts",
        "prerender": {
          "routesFile": "prerender-routes.txt"
          "discoverRoutes": false /*the default value is true, if you set it false, it will not prerender all parameter less routes automatically*/
        },
        "ssr": false
      }
    }
  }
}

Upvotes: 13

Related Questions