Rework Tooling, Deploy & SSR

[BioPhoton]

Problem

The SSR part is flaky ATM. A couple of resulted problems where:

• PR's that broke SSR where released (router configuration, zone-less config, standalone component)
• SSR and file hosting is tricky to automate for Preview branches (because of the Firebase hosting constrains)
• Platform problems due to access rights, versions, wrong payment configuration on Firebase project
• Inconsistency of Prerender runtime vs SSR runtime resulting in broken prerender pages

This impacts the score significantly also in the CrUX report.

Solution

Due to this reasons I suggest a list of possible improve up for evaluation:

Tooling

• Nx setup
  • separated projects
  • refactored tooling
  • using only --affected lint,test,build in the CI
  • using only --affected deploy in the CI
  • user-flows over the nx-plugin
  • firebase
    • better serve and build
    • separated universal and firebase cloud function

Code structure

• File and folder structure is off from the rest of the src files (functions folder, server.ts outside of projects, main.ts and main.server.ts are very different in content, etc.) a better file organization is needed
• Move specific SSR decisions into tokens if it makes sense for them to be part of DI and not component/service.
• All SSR decisions that are related to files (e.g. zone.js) should be done with target configurations and the ng build process (ng build-ssr movies --configuration ssr)
• firebase functionsand hosting should life in the functions folder

Documentation

• Better docs on how to develop, build etc
  • Development should be served with npm run start:ssr:dev locally to validate changes to Browser and Server versions
• Documentation of the included pieces of the SSR + SSG

Testing

• Setup integration tests for the build process. Statically check the output HTML from the build process.
• Detailed Server Timing => POSTPONED
• Setup e2e tests that run against the app
  • Ensure the tests passes without JS executed
• Preview branch of the firebase cloud function
• Preview branch of the cloudflare edge worker
• live hosting of the firebase cloud function
• live hosting of the cloudflare edge worker => POSTPONED
• Setup e2e tests that checks the "src switch bug" from ngSrc

Improvements

• Render less pages of the infinite scroll content if possible
• Post optimize for the LCP. PoC here Lcp experiment #133
• Fix HTTP transfer state. Bug: API calls are processed by the client even though responses are cached in TransferState #119
  options so far:
  • custom Zone (fix zone stable) fix: custom zone #139
  • or zone full SSR setup zone-full SSR
    to reduce TBT
• implement time based HTTP caching to avoid over fetching and benefit from HTTP transfer state feat: add time based caching for http get requests #138
• enable ISG ISR doesn't work for angular movies because of zoneless #132
• fix chunking of initial rendering related to RxA render strategies. refactor: update universal to 16 #157
  • [x] this is visible flicker on SSR to client hydration

Next suggested steps

• start with hot fixes to get score first (we want to see CrUX early)
• evaluate effort and prioritize items