UI Rendering on the Web

One of the core decisions we must make as web developers, that affects how our application architecture is where to implement UI logic and rendering in our application.
The various rendering techniques used today for building web apps include static & server rendering, client-side rendering, prerendering and rehydration.
In a traditional web application, the majority of the UI rendering logic would exist on the server. Static and Server Rendering involves generating the HTML for each URL of your page. The difference is that the HTML for static rendering is generated once at the time of creation, while server rendering dynamically generates the HTML on-demand as the client makes a request.
As browser applications become more interactive and complex, view logic is pushed to the front-end, this way it is able to render a complete-looking page on the client side.
Today to create very fast web apps, most devs result in building single-page applications (SPA), where the server returns a single HTML page containing a JS file which then handles the entire UI rendering logic on the client-side, including routing to new pages.
But there are challenges with the SPA model, the popular ones are SEO and speed of initial load. To solve this, the Prerendering technique which runs the SPA at build time to capture its initial states as HTML is used.
In other cases, we may need to combine client-side and server rendering using the rehydration technique and this combination is often referred to as SSR or Universal Rendering. The rehydration technique can also be split into various kinds.
As Laravel artisans we use the PHP language, PHP is one of the language choices for building traditional web applications in which application logic and UI rendering logic reside in a server-side application, by default PHP uses the server rendering technique.
For this talk, we want to look at how we can accomplish the various rendering techniques in developing a Laravel PHP application using tools like Vue, React, Inertia, Livewire e.t.c and also discuss their benefits, bottlenecks and tradeoffs, which will help us to decide the best way to architecture our apps.

Transcript

1. UI Rendering on the Web Wisdom Ebong
2. About Me... Hey there, I’m Wisdom. I’m a software engineer from Uyo, Nigeria. I am a fan of technology, entrepreneurship, and innovation. Twitter - @wisdomeabong Github - @webong
3. Intro One of the core decisions we must make as web developers, that affects how our application architecture is where to implement UI logic and rendering in our application. In order to better understand the architectures we’re choosing from when we make this decision, we need to have a solid understanding of each approach and consistent terminology to use when speaking about them.
4. The differences between these approaches help illustrate the trade-offs of rendering on the web through the lens of performance.
5. What is Web Performance Web performance involves measuring the actual and perceived speeds of an application, optimizing where possible, and then monitoring the performance, to ensure that what you've optimized stays optimized. Web performance includes both objective measurements like time to load, frames per second, and time to interactive, and subjective experiences of how long it felt like it took the content to load.
6. Common Performance Terminology • TTFB: Time to First Byte — seen as the time between clicking a link and the first bit of content coming in. • FP: First Paint — the first time any pixel gets becomes visible to the user. • FCP: First Contentful Paint — the time when requested content (article body, etc) becomes visible. • TTI: Time To Interactive — the time at which a page becomes interactive (events wired up, etc).
7. xx% Lighthouse report after the Time-to-Interactive optimizations were made on Netflix Home Page. [Source]
8. Common Rendering Techniques • S&SR: Static and Server Rendering — rendering a HTML from the server to the browser on each URL visit. • CSR: Client-Side Rendering — rendering an app in a browser, generally using the DOM. • SSR: Server-Side Rendering — rendering a client-side or universal app to HTML on the server. • Prerendering: running a client-side application at build time to capture its initial state as static HTML. • Rehydration: “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data.
9. Static rendering and server rendering both involve rendering HTML for each of your app's pages – but there's one major difference between them...
10. “The difference is that the HTML for static rendering is generated once at the time of creation, while server rendering dynamically generates the HTML on-demand as the client makes a request. ”
11. Static Rendering With static rendering, you’ll need to generate a single HTML file for every page that the user can access ahead of time. - Fast First Paint - Fast First Contentful Paint - Slow Time To Interactive
12. Static Sites for Laravel Developers - Blade templating just like laravel apps - Markdown for Content Driven Pages. Just make a new project directory and install Jigsaw using Composer $ composer require tightenco/jigsaw
14. Server Rendering Server rendering refers to the process of generating HTML on demand for each request - .
16. “We already have Laravel, So let’s build without breaking a sweat” - Na me talk am ohh
17. As browser applications become more interactive and complex, view logic is pushed to the front-end, this way it is able to render a complete-looking page on the client side.
18. Client Side Rendering Client-side rendering (CSR) means rendering pages directly in the browser using JavaScript. All logic, data fetching, templating and routing are handled on the client rather than the server.
19. Today to create very fast web apps, most devs result in building single-page applications (SPA), where the server returns a single HTML page containing a JS file which then handles the entire UI rendering logic on the client-side, including routing to new pages.
20. The primary downside to Client-Side Rendering is that the amount of JavaScript required tends to grow as an application grows. But there are challenges with the SPA model, the popular ones are SEO and speed of initial load.
21. To smooth the trade off between Static Rendering, Server Rendering and Client Side Rendering. What could be done? We combine either the Static Rendering and CSR or Server Rendering and CSR
22. PreRendering The “Pre-Rendering” technique which runs the SPA at build time to capture its initial states as HTML is used. Pre-Rendering combines the Static Rendering and Client Side Rendering Technique.
23. Rehydration Often referred to as Universal Rendering or simply “SSR”. This approach attempts to smooth over the trade-offs between Client-Side Rendering and Server Rendering by doing both.
24. Types of Rehydration Technique • Progressive Rehydration ( Streaming Server Rendering ) • Partial Rehydration
25. Progressive Rehydration Streaming server rendering allows you to send HTML in chunks that the browser can progressively render as it’s received. This can provide a fast First Paint and First Contentful Paint as markup arrives to users faster.
26. Partial Rehydration Partial rehydration has proven difficult to implement. This approach is an extension of the idea of progressive rehydration, where the individual pieces (components / views / trees) to be progressively rehydrated are analyzed and those with little interactivity or no reactivity are identified.
27. Rehydration Techniques in Laravel
28. Spatie Laravel Server Rendering • Render incoming HTML from the server (first meaningful paint) • Download scripts • Parse scripts • Run scripts • Retrieve data • Make the existing HTML interactive • Ready! (time to interactive)
29. InertiaJs Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
30. BigPipe Request parsing: web server parses and sanity checks the HTTP request. Data fetching: web server fetches data from storage tier. Markup generation: web server generates HTML markup for the response. Network transport: the response is transferred from web server to browser. CSS downloading: browser downloads CSS required by the page. DOM tree construction and CSS styling: browser constructs DOM tree of the document, and then applies CSS rules on it. JavaScript downloading: browser downloads JavaScript resources referenced by the page. JavaScript execution: browser executes JavaScript code of the page.
32. Considerations for Choosing a Rendering Technique - Why do I need a web app in the first place
34. Thank you.