ISLAND ARCHITECTURE

As a developers we should always find ways to gather knowledge about new techniques and technologies to improve our code quality and optimize our application for fast and better performance. It is very important for us to know how we can structure our code base soo that managing and maintenance of application becomes easy. Industrial level projects requires a well structured codebase soo that if any new developer begin working on that project not face difficulty to reuse the components that were already exist.

A concept of Atomic design that guide us how to structure our code. In addition to that , Today I am going to let you know about another concept that may become cheery on the cake for Atomic design.

ISLAND ARCHITCTURE

It aims to reduce the volume of JavaScript shipped to the client-side. This concept basically focus on necessary volume of JavaScript to be shipped to the client-side that are used in the interactivity with dynamic components and the static region remain as it is. This will reduce the load on the server . Hence optimizes the application and improve the performance.

Loading and processing excess JavaScript can hurt performance. However, some degree of interactivity and JavaScript is often required. The SSR ( Server Side Rendering ) is required to build the application. Its core principle is to ship the necessary JavaScript to rehydrate the components on the client-side. Rehydration is the process of regenerating the state of UI components on the client-side after the server renders it. The static region of the page are purely non-interactive and do not need hydration. But Dynamic components needs rehydration after rendered from the server.

Most pages are a combination of static and dynamic components. For example;

• Blog posts, news articles, and organization home pages contain text and images with interactive components like social media embeds and chat.

Static component is stateless, does not trigger any events, so it does not need rehydration after rendering. Dynamic content (buttons, filters, search bar) trigger events. The DOM has to be regenerated on the client-side . This regeneration, rehydration, and event handling functions contribute to the JavaScript sent to the client.

There is a process called Progressive Hydration , it basically follows a priority first approach. In this , the HTML is rendered from the server and the rehydration of key components occurs first and other after that asynchronously. The performance issue in one component will not affect the other.

Island Architecture, it renders the static HTML from the server first and render script required only for the interactive components.

Thank You for reading this article..........

If you find this useful then share it in your community soo that more people get to know about this amazing technique.