%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper,headsepline,footsepline]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
%\usepackage[automark]{scrpage2} DEPRECATED
\usepackage[automark]{scrlayer-scrpage}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

%Hyperlinks
\usepackage{multicol}

%Bilder
\usepackage{graphicx}


%Kopfzeile
\ihead{Webentwicklung}
\chead{}
\ohead{https://kohnlehome.de/html/web-architekturen.pdf}
%\setheadsepline{0.5pt} DEPRECATED

%Fußzeile
%\setfootsepline{0.5pt} DEPRECATED
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
	\LARGE % Schriftgröße
	\bfseries % Fettdruck
	\sffamily % Serifenlose Schrift
	Architekturen von Webanwendungen
\end{center}

\section*{SSG: Static Site Generation}
\includegraphics[width=0.6\textwidth]{ssg.png}
\begin{enumerate}
	\item Browser schickt HTTP-Request: \texttt{GET /index.html}
	\item Server schickt HTML-Datei: \texttt{index.html}
\end{enumerate}

\section*{SSR: Server Side Rendering}
\includegraphics[width=0.6\textwidth]{ssr.png}
\begin{enumerate}
	\item Browser schickt HTTP-Request: \texttt{GET /index.php}
	\item Programmiersprache wertet Request aus
	\item Programmiersprache macht Datenbankabfrage
	\item Datenbank schickt Daten
	\item Programmiersprache rendert HTML-Code
	\item Webserver schickt HTML-Datei index.php an Browser
\end{enumerate}

\section*{CSR: Client Side Rendering}
\includegraphics[width=0.6\textwidth]{csr.png}
\begin{enumerate}
	\item Browser schickt HTTP-Request: \texttt{GET /index.html}
	\item Server schickt HTML-Datei und JavaScript: \texttt{index.html}
	\item JavaScript schickt HTTP-Request an REST-API: \texttt{GET daten}
	\item REST-API macht Anfrage an Datenbank
	\item Datenbank schickt Daten
	\item REST-API schickt Daten an Browser: \texttt{\{ "daten": [...]\}}
	\item JavaScript rendert HTML-Code
\end{enumerate}

\end{document}
