![]() Integrations for the big three (Angular, React and Vue) are available, among others ( Fig. The interesting thing is that these islands can be written using almost any current JavaScript technology. In Figure 5, only the box at the bottom is an interactive island.ĭepending on the settings you choose, Astro won’t hydrate individual islands until they are scrolled into the visible area, for instance. The idea behind this is a page has interactive islands embedded in static content areas. Progressive Hydration with Island ArchitectureĪstro offers support for progressive and partial hydration with its Island Architecture. If you can identify these areas, the hydration effort is reduced even further. Examples include navigation bars, footers, or content areas in articles. These may be parts that the user doesn’t use, or parts that are static by design. Some parts of the page may not need to be hydrated at all. Therefore, the currently visible page area can quickly become interactive ( Fig. The idea behind this is that the page hydrates individual areas gradually and progressively. Today, it’s better known as Progressive Hydration. However, with the frameworks of the time, implementing this method wasn’t readily possible. In 2016, the well-received article “When everything’s important, nothing is!” already highlighted the problem discussed in the last section, and proposed “Progressive Booting” as a solution. ![]() Learn more Partial and Progressive Hydration as a solution There’s a period of time between FMP and TTI where the application looks interactive, but it isn’t. Another reason for this is that the initial HTML is now larger. So that the JavaScript bundles don’t have to reload data that was previously used in the server-side rendering, the server tucks it away in an invisible area of the page, such as in a script tag.Īlthough the FMP happens earlier with SSR, it takes longer to get to Time to Interactive (TTI), especially since the page has to wait for the bundles to load. However, to make the page interactive, it still has to load individual JavaScript bundles. The First Meaningful Paint (FMP) happens earlier. Now, the delivered HTML already contains all the information that makes up the page in question. Figure 2 illustrates the difference with client-side rendering of SPAs. That’s why portals based on SPA frameworks usually use server-side rendering (SSR). Search engines can still handle HTML better than JavaScript. Every millisecond counts when keeping bounce rates low. But in public portals, where conversion is the primary concern, it’s a different story. There, it’s more a matter of the application behaving smoothly after startup. As Figure 1 shows, this means that quite a bit of time elapses before the First Meaningful Paint (FMP).Īn initial delay of a few seconds may not matter for business applications. However, because an SPA needs to load JavaScript bundles and data at startup, client-side rendering also delays the program launch. This improves response times and increases the user experience enormously. Single Page Applications move all rendering to the client side, i.e. In this article, I will present Astro using a simple application. For more flexible scenarios, Astro can also be instructed to render the requested pages on the server side for each individual request. For this, it uses data retrieved via HTTP and islands. It generates a static website by default. What’s special about Astro is that the interactive areas (also called islands) can be written with established frameworks like Angular, React, or Vue.Īdditionally, Astro provides for two modes of operation. A good example of this are product pages with a lot of content and some interactive areas. The same applies to code that is initially used for just server-side rendering.Īstro is a new framework that implements these strategies for content-driven websites. The parts that the user doesn’t interact with don’t even need to be loaded at all. Therefore, it’s important to pre-render as much as possible on the server and load JavaScript bundles as late as we can. Working without JavaScript isn’t an option. Unfortunately, the flood of JavaScript bundles referencing modern web solutions throws a spanner in the works. Performance is one of the most important architectural criteria, especially for public web solutions.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |