Join the Nature Wishlist Discord to get help, share your projects, and discuss JavaScript.
⚙️ ⏐ Rendering Patterns
1. Introduction

Rendering Patterns

Rendering content on the web can be done in many ways. The decision how and where to fetch and render content is key to the performance of an application.

The available frameworks and libraries can be used to implement different rendering patterns like Client-Side Rendering, Static Rendering, Incremental Static Regeneration, Progressive Rendering, Server-Side Rendering and many more. Understanding the tradeoffs and use cases for these patterns can drastically help the performance of your application, resulting in a great user and developer experience.


Web Vitals

To measure how well our website performs, we can use a set of useful measurements called Web Vitals. A subset of these measurements - the Core Web Vitals - is usually used to determine the performance of a page, and can affect your website's SEO.

TTFB

Time To First Byte

Time it takes for a client to receive the first byte of page content

FCP

First Contentful Paint

Time it takes the browser to render the first piece of content after navigation

LCP

Largest Contentful Paint

Time it takes to load and render the page's main content

TTI

Time To Interactive

Time from when the page starts loading to when it's reliably responding to user input quickly

CLS

Cumulative Layout Shift

Measures visual stability to avoid unexpected layout shift

FIP

First Input Delay

Time from when the user interacts with the page to the time when the event handlers are able to run


The following terms will be useful when covering the different rendering techniques:

  • Compiling: Converting JavaScript into native machine code - Execution time: The time it takes to execute the previously fetched, parsed, and compiled data - Hydration: Attaching handlers to a DOM node whose HTML contents were server-rendered, making the component interactive - Idle: The browser's state when it's not performing any action - Loading time: The time it takes to fetch the data from the server - Main thread: The thread on which the browser executes all the JavaScript, performs layout, reflows, and garbage collection - Parsing: Converting an HTML source into DOM nodes, and generating an AST - Processing: Parsing, compiling, and executing the previously fetched data - Processing time: The time it takes to parse and compile the previously fetched data