Switch to Angular SSR - Add Document Titles & Open Graph Meta Data

[GODrums]

Research PR for Angular SSR

Deployment: https://pr127.hephaestus.felixdietrich.com/

Performance Test Results

Lighthouse report on localhost

CSR with npm run serve --prod on develop-branch:
hephaestus_lighthouse_csr.pdf
hephaestus_about_lighthouse_csr.pdf
SSR with npm run build && npm run serve:ssr:webapp on PR-branch:
hephaestus_lighthouse_ssr.pdf
hephaestus_about_lighthouse_ssr.pdf

Google's PageSpeedInsights (PSI) Test on Coolify

Metrics: Performance - Accessibility - Best Practices - SEO

Rendering	Mobile	Desktop	Source
CSR on /	36 - 88 - 100 - 83	77 - 92 - 100 - 83	link
SSR on /	71 - 94 - 75 - 92	73 - 98 - 74 - 92	link
CSR on /about	75 - 88 - 100 - 83	100 - 93 - 100 - 83	link
SSR on /about	95 - 95 - 75 - 92	99 - 100 - 74 - 92	link

Explanation:
Performance values on Desktop devices is pretty similar both CSR and SSR. The largest difference can be seen on mobile devices, where the performance massively improves with SSR. This can be explained by the reduced First Contentful Paint (2.0s with CSR vs. 0.9s with SSR at /) and Largest Contentful Paint (3.5s with CSR vs. 0.9s with SSR on /) and the avoidance of the page layout shift for the leaderboard on SSR.
The difference in "Best Practices" stems from CORS errors produced by Keycloak due to the difference in top-level domains.
The improvement in SEO can be attributed to the added meta-tags, which are part of the SSR-branch.

Motivation

Server-Side Rendering (SSR) is a popular alternative to Client-Side Rendering (CSR), mostly attributed with overall improved performance and offers unique features like dynamic SEO. It works by (pre-)rendering content on the server, usually generating static HTML, before sending it to the client. This leads to substantially less transfered data and JS execution on the target device. The largest performance improvements can typically be seen on mobile devices or with low-bandwidth connections. See the Angular docs: https://angular.dev/guide/ssr

Page meta data is considered a really important factor for SEO and allows for a in-line previews when using links on social media (for example Slack).

Description

This PR adds SSR to the Angular webapp. SSR is realized by an Angular Express server, which has been automatically generated by ng add @angular/ssr.
This PR also adds page-aware document titles and all the required open graph meta tags for seamless link previews on all social media platforms.

Screenshots (if applicable)

Checklist

General

• PR title is clear and descriptive
• PR description explains the purpose and changes
• Code follows project coding standards
• Self-review of the code has been done
• Changes have been tested locally
• Screenshots have been attached (if applicable)
• Documentation has been updated (if applicable)

Client (if applicable)

• UI changes look good on all screen sizes and browsers
• No console errors or warnings
• User experience and accessibility have been tested
• Added Storybook stories for new components
• Components follow design system guidelines (if applicable)

Server (if applicable)

• Code is performant and follows best practices
• No security vulnerabilities introduced
• Proper error handling has been implemented
• Added tests for new functionality
• Changes have been tested in different environments (if applicable)