Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:ffit:3-jahr:cicd:learningunits:lu10:a [2026/04/28 15:21] – apeter
+++ de:modul:ffit:3-jahr:cicd:learningunits:lu10:a [2026/05/21 09:26] (aktuell) – apeter
@@ Zeile 6: / Zeile 6: @@
   * Applikation, um Webinhalte (HTML, CSS, JS) darzustellen
 </WRAP> | <WRAP> **Webserver**
-  * Liefert Inhalte über HTTP(S) an den Browser
+  * Nimmt HTTP(S)-Requests entgegen und liefert Antworten zurück an den Browser
   * Die Inhalte können statisch oder dynamisch sein
 </WRAP> |
@@ Zeile 18: / Zeile 18: @@
 | <WRAP> **Statische Webseite**
-  * Besteht bereits aus Dateien, die vom Browser interpretiert werden kann (HTML, CSS, JS)
+  * Besteht aus fertigen Dateien (HTML, CSS, JS), die direkt ausgeliefert werden
 </WRAP> | <WRAP> **Dynamische Webseite**
   * Inhalte werden abhängig vom Request zur Laufzeit erzeugt (.php-> .html, ...)
 </WRAP> |
+==== SSR vs. Entkoppelte Frontend/Backend-Architektur ====
+In modernen Webprojekten wird häufig eine klare Trennung von Frontend und Backend umgesetzt:
+Frontend: z. B. mit Angular, React oder Vanilla JS
+Backend: REST- oder GraphQL-API (z. B. in Node.js, Java, Python)
+Diese Architektur bietet klare Vorteile:
+  * Lose Kopplung (Frontend und Backend unabhängig entwickelbar)
+  * Austauschbarkeit (z. B. Frontend-Technologie wechseln)
+  * Einfache Deployments (statische Dateien + API)
+  * Gute Skalierbarkeit
 ==== Static vs dynamic hosting ====
-^ Static hosting ^ Dynamic hosting ^
+Ob etwas statisch deploybar ist, hängt nicht von den Features ab, sondern davon, ob der Server zur Laufzeit am Rendering beteiligt ist.
-| | |
+Es ist also eine Architekturfrage, ob man Server-Side-Rendering (SSR) einsetzt oder nicht.
+Salopp gesagt, können die meisten Webapplikationen in ein statisches Frontend und ein (allfälliges) dynamisches Backend aufgeteilt werden.
+Statische Webseiten sind möglich bei
+  * Vanilla / Plain Html und JS
+  * Angular
+  * React
+  * Vite
+  * Astro (default)
+Ausnahmen sind
+  * PHP
+      * .php
+  * Next.js mit API/SSR
+      * getServerSideProps
+      * Routing (route.js, route.ts, "/api/*")
+      * NextResponse
+      * cookies()
+      * headers()
+  * Express mit Templates
+      * .ejs
+      * .pug
+      * .hbs
 ==== Next.js ====
+''next.config.js''
 <code javascript>
 const nextConfig = {
@@ Zeile 37: / Zeile 76: @@
 module.exports = nextConfig;
 </code>
+Nach dem erfolgreichen Ausführen von folgendem Befehl, sind die fertigen Dateien unter ''/out'' verfügbar.
 <code bash>
 npm run build
+</code>
+<code bash>
+npx serve out
+</code>
+Mögliche Fehler:
+  * „Route Handlers are not supported with output: export“
+  * „Dynamic server usage“
+==== Vite ====
+Sofern Das Projekt auf der AWS-Umgebung deployed wird, muss der Root-Pfad der Applikation neu gesetzt werden.
+vite.config.js
+<code javascript>
+// vite.config.js
+export default defineConfig({
+  base: './',
+  ...
+})
 </code>