Rendering Strategies

🎨 A Brief History 💻

Overview

• What's the talk about? 🤔
• Why am I giving this presentation? 👨🏼‍🏫
• What do you know now? 🤷‍♂️
• What will we cover? 💡

Overview

• What's the talk about? 🤔
• • History of the web
  • Rendering strategies
  • Mobile apps?
• Why am I giving this presentation? 👨🏼‍🏫
• What do you know now? 🤷‍♂️
• What will we cover? 💡

Overview

• What's the talk about? 🤔
• Why am I giving this presentation? 👨🏼‍🏫
• • Industry is moving faster than ever
  • Recent innovations not widely understood
• What do you know now? 🤷‍♂️
• What will we cover? 💡

Overview

• What's the talk about? 🤔
• Why am I giving this presentation? 👨🏼‍🏫
• What do you know now? 🤷‍♂️
• • HTML, CSS and JS
  • Servers, clients and CDNs
  • Server and client side rendering (SSR & CSR)?
• What will we cover? 💡

Overview

• What's the talk about? 🤔
• Why am I giving this presentation? 👨🏼‍🏫
• What do you know now? 🤷‍♂️
• What will we cover? 💡
• • History of rendering for the web
  • Comparison of modern techniques
  • Possible future innovations

Timeline

Evolution of The Web

Timeline

Evolution of The Web

• WWW Invented 1989

Timeline

Evolution of The Web

• Server rendering (without hydration)
• Common Gateway Interface (1993)
• Use of C, Perl, Shell Script, etc

Timeline

Evolution of The Web

• JavaScript Created (1995)

Timeline

Evolution of The Web

• JQuery announced (2005)
• JQuery released (2006)
• First client side rendering framework

Timeline

Evolution of The Web

• CSR gains traction with rise of JQuery
• Knockout.js, Backbone.js, AngularJS (2010)

Timeline

Evolution of The Web

• Static site generators gain popularity
• Jekyll (2008)
• Hugo (2013)
• Gatsby (2015)

Timeline

Evolution of The Web

• React released (2013)
• First fully declarative UI library

Timeline

Evolution of The Web

• React v16 released (2017)
• Introduction of client side hydration

Timeline

Evolution of The Web

• React announces server components (2020)
• NextJS announces experimental RSC support (2021)

Timeline

Evolution of The Web

The Modern Web

• Client Side Rendering
• Server Side Rendering w/ hydration/li>
• Static Site Generation w/ hydration
• Server Components

Recap: Servers, Clients, CDNs

An Example UI

An Example UI

Static Content

An Example UI

Dynamic Content (Profile)

An Example UI

Dynamic Content (Article)

An Example UI

Dynamic Content (Comments)

An Example UI

Client Side Rendering

Static Site Generation

Server Side Rendering

Server Components

The Future?

🤷‍♂️

Resumability?

Resumability?

Server Components

for Mobile?

• React Native
• Possible use cases
  • Dyanmic content
  • Promotions / banners
  • Built with native components

Thank You! ❤️

Further Reading

• Articles
  • Vercel - Understanding React Server Components
  • Qwik - Resumability vs. Hydration
• Tools
  • Reveal.js (presentation framework)