Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:ffit:3-jahr:cicd:learningunits:lu10:a [2026/04/28 15:39] – apeter
+++ de:modul:ffit:3-jahr:cicd:learningunits:lu10:a [2026/05/21 09:26] (aktuell) – apeter
@@ Zeile 22: / Zeile 22: @@
   * 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 ====
-Ob etwas statisch deploybar ist, hängt nicht von den Features ab, sondern davon, ob der Server zur Laufzeit am Rendering beteiligt ist (Architekturfrage).
+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
-  * Next.js mit getServerSideProps → braucht Node-Server
+      * .php
-  * Express mit Templates (EJS, Pug)
+  * 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 41: / 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>