SSG

Angular 17-től kezdődően (és Angular 18–19 alatt is) az SSG (Static Site Generation) a hivatalos Angular SSR rendszer részévé vált, és @angular/ssr csomagon keresztül érhető el.
Az Angular 19+ verzióban az SSG (Prerendering) már natívan támogatott, külön tool vagy plugin nélkül, és teljes mértékben integrált az angular.json build rendszerbe.

---

✅ Mit jelent az SSG Angular-ban?

SSG = Static Site Generation
Az Angular előre legenerálja az összes (vagy meghatározott) route-ot statikus HTML fájlokká a build időben, így:

• nincs szükség szerverre futás közben (ellentétben SSR-rel),
• villámgyors betöltést és jobb SEO-t biztosít,
• CDN-ről (pl. Netlify, Firebase, Vercel, stb.) tökéletesen kiszolgálható.

---

🧱 Hogyan működik Angular 19-ben?

1. @angular/ssr telepítés

ng add @angular/ssr

Ez létrehoz:

• server.ts (Node alapú SSR entrypoint)
• main.server.ts (Angular SSR bootstrap)
• beállítja a angular.json prerender és ssr konfigurációkat

---

2. Prerender (SSG) futtatása

Az Angular CLI így tudja legenerálni az oldalakat:

ng build && ng run your-project-name:prerender

vagy ha defaultProject be van állítva:

ng run :prerender

Ez legenerálja a dist/[project-name]/browser/ mappában a HTML fájlokat route-onként:

dist/
└── your-project/
    ├── browser/
    │   ├── index.html
    │   ├── about/index.html
    │   └── contact/index.html
    └── server/

---

3. Statikus útvonalak konfigurálása

Ha vannak dinamikus route-ok, például:

{ path: 'blog/:slug', component: BlogPageComponent }

akkor azt kézzel kell megadni az prerender.routes alatt (angular.json-ban), vagy külön routes.txt-ként.

"options": {
  "routes": [
    "/", 
    "/about", 
    "/contact", 
    "/blog/angular-ssg-in-19"
  ]
}

---

🔍 SSG és SSR különbség Angular 19-ben

Típus	SSR	SSG
Mikor generálja?	futásidőben (Node.js szerveren)	build időben
Sebesség	lassabb első betöltés	nagyon gyors
SEO	kiváló	kiváló
Komplexitás	kell backend	nem kell backend
Példa	dinamikus dashboard	marketing / landing page

---

🧠 Tipp: SSG + rehydration = CSR élmény

Angular automatikusan rehydrálja a statikus HTML-t, tehát a statikusan generált oldal interaktívvá válik JavaScript betöltés után.

---

Példa teljes parancssor

ng build
ng run data-landing:prerender

Ezután az index.html fájlok statikusan elérhetőek lesznek deployra.