Min handleliste
- egg
- melk
Kartlegging av web rendering
Av Gaute Meek Olsen
Men nå har det blitt så mange begreper
- SPA
- MPA
- SSG
- SSR
- CSR
- Hydration
- Resumability
- Islands
- Progressive enhancement
- Partial hydration
- Edge rendering
- ...
Kartlegging av web rendering
Av Gaute Meek Olsen
1
Men nå har det blitt så mange begreper
- SPA
- MPA
- SSG
- SSR
- CSR
- Hydration
- Resumability
- Islands
- Progressive enhancement
- Partial hydration
- Edge rendering
- ...
2
Eksempel - handleliste
3
SSR - Server Side Rendering
Tenk:
4
5
GET
6
Min handleliste
- melk
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
</ul>GET
html
7
Min handleliste
- melk
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
</ul>GET
html
POST
8
Min handleliste
- melk
- egg
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
<li>egg</li>
</ul>GET
html
POST
html
9
Ulempe
- Må innom serveren hver gang
10
SSR + jQuery
Tenk:og
11
12
GET
13
Min handleliste
- melk
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
</ul>
<script src="jquery-app.js"></script>GET
html
14
Min handleliste
- melk
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
</ul>
<script src="jquery-app.js"></script>GET
html
GET
15
Min handleliste
- melk
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
</ul>$('form').submit(() => {
$('ul').append($('input').val())
$.post('/backend', { add: $('input').val() })
})GET
html
GET
js
16
Min handleliste
- melk
- egg
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
<li>egg</li>
</ul>$('form').submit(() => {
$('ul').append($('input').val())
$.post('/backend', { add: $('input').val() })
})GET
html
GET
js
17
Min handleliste
- melk
- egg
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
<li>egg</li>
</ul>$('form').submit(() => {
$('ul').append($('input').val())
$.post('/backend', { add: $('input').val() })
})GET
html
GET
js
POST
18
Ulempe
- Utviklere må skrive visningslogikk i to ganger i to ulike språk
19
CSR - Client Side Rendering
Tenk:
20
21
GET
22
<div id="root"></div>
<script src="app.js"></script>GET
html
23
<div id="root"></div>
<script src="app.js"></script>GET
html
GET
24
<div id="root"></div>import App from './myApp.js'
framework.mount(App, '#root')GET
html
GET
js
25
Min handleliste
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<div class="spinner"></div>form.onsubmit(() => framework.updateStateAndDom())GET
html
GET
js
GET
26
Min handleliste
- melk
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
</ul>form.onsubmit(() => framework.updateStateAndDom())GET
html
GET
js
GET
json
27
Min handleliste
- melk
- egg
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
<li>melk</li>
<li>egg</li>
</ul>form.onsubmit(() => framework.updateStateAndDom())GET
html
GET
js
GET
json
POST
28
Ulempe
- Data fetching starter først etter rendering
29
MPA - Multiple Page Application
Tenk:
30
Min handleliste
- melk
31
Min handleliste
- melk
GET
32
GET
oppskrifter.html
33
GET
oppskrifter.html
GET
34
Min handleliste
- melk
GET
oppskrifter.html
GET
handle.html
35
Ulempe
- Hver navigasjon må laste nytt innhold
36
SPA - Single Page Application
Tenk: + +
37
Min handleliste
- melk
38
Ulemper
- Laster inn mer innhold ved første visning (som kanskje ikke trengs)
39
SSG - Static Site Generation
Tenk:
40
npm run build41
42
43
GET
44
Min handleliste
<h1>Min handleliste</h1>
<form>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
</form>
<ul>
</ul>GET
html
45
Ulempe
- All data må være tilgjengelig når det bygges
46
Hydration
47
SSR/SSG + Hydration
48
Min handleliste
- melk
<h1>Min handleliste</h1>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
<ul>
<li>melk</li>
</ul>
<script src="app.js"></script>GET
html
49
Min handleliste
- melk
<h1>Min handleliste</h1>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
<ul>
<li>melk</li>
</ul>
<script src="app.js"></script>GET
html
GET
50
Min handleliste
- melk
<h1>Min handleliste</h1>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
<ul>
<li>melk</li>
</ul>import App from './myApp.js'
framework.hydrate(App)GET
html
GET
js
51
Min handleliste
- melk
<h1>Min handleliste</h1>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
<ul>
<li>melk</li>
</ul>button.onclick(() => framework.updateStateAndDom())GET
html
GET
js
52
Min handleliste
- melk
- egg
<h1>Min handleliste</h1>
<label for="add">Legg til</label>
<input type="text" id="add">
<button>Lagre</button>
<ul>
<li>melk</li>
<li>egg</li>
</ul>button.onclick(() => framework.updateStateAndDom())GET
html
GET
js
POST
53
Ulempe
- Ikke intereaktiv før hydration er ferdig
54
Partial Hydration
55
56
Islands
57
58
59
Resumability
Tenk:
60
61
GET
62
Min handleliste
- melk
<h1>Min handleliste</h1>
<label for="add">Legg til</label>
<input type="text" id="add">
<button
on:click="app_shopping_button_onclick_jasd1"
>
Lagre
</button>
<ul>
<li>melk</li>
</ul>GET
html
63
Min handleliste
- melk
<h1>Min handleliste</h1>
<label for="add">Legg til</label>
<input type="text" id="add">
<button
on:click="app_shopping_button_onclick_jasd1"
>
Lagre
</button>
<ul>
<li>melk</li>
</ul>GET
html
GET
64
Min handleliste
- melk
- egg
<h1>Min handleliste</h1>
<label for="add">Legg til</label>
<input type="text" id="add">
<button
on:click="app_shopping_button_onclick_jasd1"
>
Lagre
</button>
<ul>
<li>melk</li>
<li>egg</li>
</ul>const add = () => framework.update(framework.getInput())GET
html
GET
js
65
Ulempe
- Ikke modent enda
66
Men hva skal vi velge?
- Det kommer an på
- Hva skal du lage?
67
To ord om CSR + SPA
- God utvikleropplevelse
- Dårlig SEO - Search Engine Optimization?
- Klienten må laste inn mye kode?
2.5 kB
- react 2.5 kB
68
To ord om SSR
- Hvordan løser vi infrastrukturen?
69
70
71
Edge Rendering
72
73
Konklusjon?
- Ting er sjeldent bare en ting
- F.eks. en app kan være SSR/SSG hydrated over til en CSR SPA
74
Initiell last
SSR/SSG
Videre interaktivitet
CSR og SPA
DX
75