26 - SSR, SPAs and PWAs/ClipID:9498 previous clip next clip

The automatic subtitles generated using Whisper Open AI in this video player (and in the Multistream video player) are provided for convenience and accessibility purposes. However, please note that accuracy and interpretation may vary. For more information, please refer to the FAQs (Paragraph 14).
Recording date 2018-09-13

Via

Free

Language

English

Organisational Unit

Regionales Rechenzentrum Erlangen (RRZE)

Producer

Externe Einrichtungen

Outline:

SSR recap – what is it, how does it work?

* send pre-rendered vs. empty document
* improving perceived performance
* Giving non-JS clients something they can work with (e.g. Twitter Cards etc.)

Typical problems

* jQuery obviously not available
* => problems with SSR mostly caused by bad patterns (e.g. jQuery)
* Relying on `localStorage`/`sessionStorage` => move to cookie

Disabling interaction on the pre-rendered document

* Simple case is to disable complete document => result often not great
* Better:
* selectively disable elements that require app to run
* Render them in a loading state (signals the user “this is still setting up”)
* Some elements are functional without a running app already
* Some things can be moved to CSS

Advanced patterns

* Lazy load in the client, bundle everything in SSR as bundle size does not matter much there (e.g. translations)
* Push data in the sandbox (e.g. translations, model data etc.)
* Render differently in SSR/client (e.g. inline SVG in SSR, use image tag in browser)
* Never require SSR to work (fallback to serving non-SSR on SSR errors)

how does this relate to PWAs

* Works well together:
* App frame is fine but app frame + SSR is better
* This can be combined – render app frame first, then put in SSR once available, while app still loads

Whether SSR worth it depends on case though

Coming up next
28-05-unterseite_wke-2018-01.png

Up next

More clips in this category "Friedrich-Alexander-Universität Erlangen-Nürnberg Zentralbereich"

2025-01-28
IdM-login
protected  
2025-01-28
IdM-login / Studon
protected  
2025-01-27
IdM-login
protected  
2025-01-27
IdM-login / Studon
protected