⚪Rendering Patterns

Describes basic rendering patterns

Server-Side Rendering (SSR)

Server-side rendering (SSR) is a technique used in web development where the server generates and sends the complete HTML of a web page to the client's browser, instead of relying on the client to dynamically render the page using JavaScript. This allows the page to be displayed and interacted with immediately, without the need for additional client-side processing. SSR is typically used in cases where the client's browser may not be able to handle JavaScript, or where the page needs to be indexed by search engines.

Client-Side Rendering (CSR)

Client-side rendering refers to the process of generating and displaying content on a web page or application on the client's device (typically a browser) rather than on the server. This means that the majority of the work is done by the client's device, including the processing of data and the rendering of the final HTML, CSS, and JavaScript. This approach allows for faster load times and a more responsive user experience, as the client's device can handle the majority of the work without needing to communicate with the server for every action.

Hydration or Rehydration

Hydration or rehydration in web development refers to the process of converting a static HTML web page, which may be delivered through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements. This technique allows for a fast initial display of useful data to the user, as the HTML is pre-rendered on a server. However, there may be a delay before the page is fully interactive, as the client-side JavaScript needs to be executed and event handlers attached.

Hybrid rendering

This approach combines both server-side and client-side rendering. The server generates the initial HTML structure and sends it to the browser, and then the JavaScript on the client side updates the content and layout dynamically.

Progressive enhancement

This approach focuses on providing a basic experience for all users, and then using JavaScript to enhance the experience for users with capable browsers.

Serverless rendering

This approach uses JavaScript to fetch the data from an API and render the content on the client side. This approach is commonly used for web applications that need to scale quickly and handle a large amount of traffic.