Understanding
the web

Server side rendering

Server

Client

Server

Client

www.mysite.com

Server

Client

www.mysite.com

render
view

Server

Client

www.mysite.com

html

render
view

Server

Client

www.mysite.com

html

render
view

css

...

js

Server

Client

www.mysite.com

html

render
view

display
rendered
view

css

...

js

Server

Client

www.mysite.com

html

render
view

display
rendered
view

css

...

js

css

...

js

Server

Client

www.mysite.com

html

render
view

display
rendered
view

css

css

...

js

...

js

load async
content in
view

www.mysite.com

           Home       About

    Welcome to my site

www.mysite.com

           Home       About

    Welcome to my site

click!

www.mysite.com/about

           Home       About

    About

www.mysite.com/about

Single Page Application

Server

Client

www.mysite.com

html

serve
static html

Server

Client

www.mysite.com

html

serve
static html

css

...

js

Server

Client

www.mysite.com

html

serve
static html

css

...

js

css

...

js

display
initial
view

Server

Client

www.mysite.com

html

serve
static html

css

...

js

css

...

js

load JS & build view

display
initial
view

Server

Client

www.mysite.com

html

serve
static html

rendered
view

css

...

js

css

...

js

load JS & build view

display
initial
view

www.mysite.com

           Home       About

    Welcome to my SPA site

click!

           Home       About

    About

www.mysite.com/about