Projekt: Benutzeroberfläche (CSR)

Client Side Rendering (CSR) bezeichnet den Prozess, bei dem Inhalte einer Webseite direkt im Browser des Benutzers gerendert werden, anstatt auf dem Server. Das bedeutet, dass die Anwendung zunächst eine leere oder minimale HTML-Struktur lädt und dann JavaScript verwendet, um den Rest der Inhalte dynamisch zu generieren und zu aktualisieren. CSR bietet eine verbesserte Benutzererfahrung, da es weniger Serveranfragen und schnellere Reaktionszeiten ermöglicht. Allerdings kann dies auch die Performance beeinträchtigen und die Suchmaschinenoptimierung (SEO) erschweren, wenn sie nicht richtig umgesetzt wird.

Auftrag

Benutzeroberfläche hier herunterladen.
Füge die Dateien unter src/main/resources/static/csr ein.
Öffne im Browser die Adresse http://localhost:8080/csr/index.html. (Achtung: index.html ist wichtig, da Tomcat nicht automatisch von / darauf weiterleitet.)
Korrigiere alle Links im HTML.
Korrigiere alle URL Konstanten im JavaScript.
Suche, ob allenfalls weitere Anpassungen notwendig sind.

Beispiele

Um mit JavaScript auf eine REST-API zuzugreifen, gibt es verschiedene Möglichkeiten. Eine der gängigsten Methoden ist die Verwendung der fetch-API. Hier ist ein Beispiel, wie man ohne zusätzliche Libraries eine GET-Anfrage an eine REST-API sendet:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fehler beim Abrufen der Daten:', error));

Und hier ein Beispiel für eine POST-Anfrage:

const data = {
  key1: 'value1',
  key2: 'value2',
};

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data)})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fehler beim Senden der Daten:', error));

Java

Hier noch ein Beispiel mit Java:

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class RestClientExample {
    public static void main(String[] args) {
        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
                .uri(URI.create("https://api.example.com/data"))
                .GET()
                .build();

        client.sendAsync(request, HttpResponse.BodyHandlers.ofString())
                .thenApply(HttpResponse::body)
                .thenAccept(System.out::println)
                .join();
    }
}

PHP

Mit PHP könnte ein HTTP-API Zugriff wie folgt erfolgen:

$url = "https://api.example.com/data";
$ch = curl_init($url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);

if ($response === false) {
    echo "Fehler: " . curl_error($ch);
} else {
    echo $response;
}

curl_close($ch);

Weitere Hilfsmittel

Obwohl die fetch-API in vielen Situationen ausreichend ist, gibt es zusätzliche Libraries (in JavaScript) wie react-query, swc oder axios, die erweiterte Funktionen und eine einfachere Handhabung bieten. Diese Libraries sind besonders nützlich, wenn man komplexe Anwendungen entwickelt oder spezielle Anforderungen hat, die über die grundlegenden Funktionen der fetch-API hinausgehen.

Lösungsvorschlag

Herunterladen