Rendering patterns for Web Apps

Andrés Bedoya

Software Engineer

Disclaimer

The code that I am going to show you is only code for theoretical purposes, I am not sure that it will work.

Rendering Patterns - History (?)

# PRESENTING CODE

Web rendering patterns emerged in response to the challenges of building more interactive and dynamic web applications. As web applications became more complex, there was a need for a more efficient and scalable way of handling the rendering and updating of the user interface in the browser.

 

The first web rendering approach was Server-Side Rendering (SSR), in which the server constructs the entire web page on the server side and sends it to the user's browser.

 

However, with the growing popularity of Single-Page Applications (SPAs), a new rendering approach called Client-Side Rendering (CSR) was developed.

80s

Static HTML files that were generated on the server and sent directly to the user's browser (SSR)

90s

With JavaScript, it was possible to generate and manipulate content on the client-side, without having to send requests to the server for every user action (CSR)

2000s

SSR + CSR = UR.
The goal of Universal Rendering was to offer the best of both worlds: a fast initial load with the ability to dynamically interact with the user

2020 (?)

- Static Rendering (SR)

- Incremental Static Generation (ISG)

 

JAMStack (?)

> 2010

AJAX emerged as a popular technique for creating more interactive web pages. With AJAX, it became possible to update parts of a web page without reloading the entire page

> 2022

- React Server Components (RSC)

- Resumability

- Selective Hydration

- Islands Architecture

 

Importance of Rendering Patterns

# PRESENTING CODE

Importance of Rendering Patterns

# PRESENTING CODE

Importance of Rendering Patterns

# PRESENTING CODE

Server-Side Rendering (SSR)

# PRESENTING CODE

Pros:

  • Improves SEO
  • Improves load speed
  • Improves bandwidth efficiency
  • Improves accessibility

Cons:

  • Higher complexity
  • Increased server workload
  • Lower interactivity
  • Higher initial response time

Client-Side Rendering (CSR)

# PRESENTING CODE

Pros:

  • High interactivity
  • Reduced server load
  • Modular development

Cons:

  • SEO limitations
  • Initial load time
  • Accessibility limitations
  • Security concerns

Hybrid Patterns

# PRESENTING CODE

Universal Rendering is a technique in which the same application code runs on both the server and client, which allows for the generation of complete HTML content on the server to be sent to the client. This way, the content is immediately visible to the user and improves the page loading experience.

Server-Side Rendering with Client-Side Hydration involves generating HTML on the server and transferring it to the client, but instead of having all the application code on the server and client, only a reduced version of HTML and JavaScript is sent to the client.

Hybrid Patterns

# PRESENTING CODE

Pros (UR):

  • Improves initial page load speed
  • Can improve user experience
  • Improves application accessibility
  • Can improve application performance efficiency

Cons (UR):

  • Can be more difficult to implement than other rendering approaches.
  • May require more powerful server infrastructure to generate and send the full content to the client.
  • May be more difficult to debug and maintain due to the additional code complexity.

Pros (Server-Side Rendering with Client-Side Hydration):

  • Can improve initial page load speed
  • Can improve application performance efficiency
  • May be easier to implement and maintain than Universal Rendering

Cons (Server-Side Rendering with Client-Side Hydration):

  • May require a higher number of requests to the server to load additional content on the page
  • There may be an additional wait time to load additional content on the page after the initial HTML has loaded.
  • May be less accessible to users who use screen readers and other assistive devices complexity.

Static Rendering - Static Site Generation (SSG)

# PRESENTING CODE

Pros:

  • Better performance
  • Enhanced security
  • Lower cost and maintenance

 

Cons:

  • Limited functionality
  • Difficulty updating content
  • Difficulty scaling

Incremental Static Generation (iSSG)

# PRESENTING CODE

The Incremental Static Generation (iSSG) pattern was introduced as an upgrade to SSG, to help solve the dynamic data problem and help static sites scale for large amounts of frequently changing data. iSSG allows you to update existing pages and add new ones by pre-rendering a subset of pages in the background even while fresh requests for pages are coming in.

Incremental Static Regeneration (ISR)

Pros:

  • Dynamic data
  • Speed
  • Availability
  • Ease of Distribution

React Server Components (RSC)

# PRESENTING CODE

React Server Components allows the server and the client (browser) to collaborate in rendering your React application. Consider the typical React element tree that is rendered for your page, which is usually composed of different React components rendering more React components. RSC makes it possible for some components in this tree to be rendered by the server, and some components to be rendered by the browser 🤯

React Server Components (RSC)

# PRESENTING CODE

There are certain advantages that rendering on the server has over the browser:

  • The server has more direct access to your data sources — be they your databases, GraphQL endpoints, or the file system. The server can directly fetch the data you need without hopping through some public API endpoint, and it is usually more closely colocated with your data sources, so it can fetch the data more quickly than a browser can.
  • The server can cheaply make use of “heavy” code modules, like an npm package for rendering markdown to html, because the server doesn’t need to download these dependencies every time they’re used — unlike the browser, which must download all used code as javascript bundles.

Islands Architecture

# PRESENTING CODE

The islands architecture encourages small, focused chunks of interactivity within server-rendered web pages. The output of islands is progressively enhanced HTML, with more specificity around how the enhancement occurs. Rather than a single application being in control of full-page rendering, there are multiple entry points. The script for these "islands" of interactivity can be delivered and hydrated independently, allowing the rest of the page to be just static HTML.

Pros:

  • Performance
  • SEO
  • Prioritizes important content
  • Accessibility
  • Component-based

Resumability

# PRESENTING CODE

Resumability is a way for a framework to recover its state without re-executing the application components on the client. This is done by serializing not just the application state but also the framework state during HTML pre-rendering. By serializing the component boundaries, event listeners, and reactivity graph, a resumable framework can continue executing where the server left off. The client can resume the execution where the server left off and therefore save itself the cost of re-executing the component tree (Hydration) in order to become interactive. Combine this with fine-grain-reactivity, and the framework, most of the time, does not have to download the components

Streaming Server-Side Rendering

Selective Hydration

Dynamic Rendering

Partial Hydration

Trisomorphic Rendering

Progressive Hydration

 

# PRESENTING CODE

Links

Thanks!

no questions? thanks again (:

Rendering patters for web apps

By Andrés BG

Rendering patters for web apps

  • 77