Web applications come in many different forms and use various rendering patterns to display content to the user. These patterns dictate how the application is built, how it is served to users, and how it interacts with the browser. In this blog post, we will explore some of the most common rendering patterns used in web development, including static websites, single-page applications, server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR), hydration, partial hydration, islands, streaming SSR, and resumability.

Static Websites

Static websites are the most basic type of web application. They consist of HTML, CSS, and JavaScript files that are pre-rendered and served directly to the user's browser. This means that every page on the website is a separate file, and each time a user requests a page, the server simply serves that file. Static websites are fast and lightweight, but they lack interactivity and dynamic content.

Single-Page Websites

Single-page applications (SPAs) are the opposite of static websites. Instead of serving a new HTML file for each page, a single HTML file is loaded when the user first visits the website. All subsequent interactions with the website are handled by JavaScript code that updates the DOM (Document Object Model) directly. This means that the page never reloads, and the user can navigate between different sections of the website without the need for a new HTTP request. SPAs are highly interactive and can provide a seamless user experience, but they can also be slow to load and difficult to optimize for search engines.

Server-Side Rendering (SSR)

Server-side rendering (SSR) is a technique that allows the server to generate HTML for a web page dynamically. This means that instead of serving a pre-rendered HTML file, the server generates the HTML on the fly in response to a user's request. SSR allows for more dynamic content than static websites, but it is not as interactive as SPAs. SSR is often used in combination with SPAs to provide a faster initial load time and better search engine optimization.

Static Site Generation (SSG)

Static site generation (SSG) is a technique that pre-renders all of the pages on a website before they are served to the user. This is similar to static websites, but SSG allows for more dynamic content by using templating engines and data sources to generate the pages. SSG is faster than SSR because all of the pages are pre-generated, but it still lacks the interactivity of SPAs. Websites built using this technique often called as JAMStack sites.

Incremental Static Regeneration (ISR)

Incremental static regeneration (ISR) is a hybrid of SSG and SSR that allows for dynamic content to be added to pre-generated pages. With ISR, the server generates the HTML for each page initially, but then updates the page periodically with new data when the cache is invalidated. This means that users can see new content without having to wait for the entire page to reload. ISR is a good compromise between the speed of SSG and the interactivity of SSR.

Hydration

Hydration is the process of converting a pre-rendered HTML page into a fully interactive SPA. When a user first visits a website that uses SSR or SSG, the server sends a pre-rendered HTML file. This file contains all of the necessary HTML, CSS, and JavaScript to render the page on the client side. However, this page is not fully interactive until the JavaScript code is executed. Hydration is the process of executing the JavaScript code to convert the pre-rendered HTML into a fully interactive SPA. The problem with any framework that uses hydration is that on the initial page load the app might feel like it's frozen while the Javascript is still executing to take over the rendering process. To solve this problem we have partial hydration.

Partial Hydration

Partial hydration is a technique that allows for only part of a page to be hydrated. This means that instead of hydrating the entire page, only the parts that require interactivity are hydrated. This can be more efficient than hydrating the entire page, especially for large pages that require a lot of JavaScript code to be executed. Partial hydration can also improve the performance of SPAs by reducing the amount of code that needs to be executed on each interaction.

Islands

Islands are independent parts of a web application that can be rendered separately and then combined together on the client side. This allows for more efficient rendering, as only the parts of the page that have changed need to be re-rendered. Islands can be used in conjunction with SSR or SSG to provide a more interactive experience without sacrificing performance.

Streaming SSR

Streaming SSR is a technique that allows the server to send HTML to the client as soon as it is available, instead of waiting for the entire page to be generated. This can improve the perceived speed of the website, as users can see content as soon as it is available. Streaming SSR can also improve the performance of websites on slow or unreliable networks. This technique is supported in Next.js 13 with the app directory.

Resumability

What if there is a way we could get rid of hydration altogether because it seems like the source of a lot of problems? Well, that's where resumability comes in which is a new rendering paradigm being pioneered by the Qwik framework. It takes an interesting approach where a website and all of its data even things like JavaScript event listeners are serialized into HTML then the actual JavaScript code is broken into tons of tiny chunks that means the initial page load is always static HTML no hydration is needed any JavaScript required for interactivity is lazy loaded in the background.

Conclusion

In conclusion, web applications come in many different forms, each with its own advantages and disadvantages. Choosing the right rendering pattern for a web application requires consideration of factors such as performance, interactivity, and search engine optimization. By understanding the different rendering patterns available, developers can create web applications that provide a fast, responsive, and enjoyable user experience.