Client-Side Scalability
Overview
In contemporary web applications, much of the data processing and rendering is done on the client side. With the increased load on the client, it’s essential to optimize the performance and scalability of the client-side functionality. In brief, client-side scalability concerns how well the code running in the user’s browser can handle increased complexity and larger amounts of data — much of this relates to trying to minimize the amount of data sent to the client and the amount of processing done on the client, while still providing a good user experience.
This part is organized as follows:
- Performance and Profiling recaps Core Web Vitals, discusses k6 browser in more detail, showcases creating actionable insights on page performance with Lighthouse, and briefly outlines how to profile application performance.
- Rendering Techniques discusses the benefits and downsides of server-side rendering, client-side rendering, static site generation, and hybrid rendering, also demonstrating each with simplified code examples.
- Asset Management and Optimization discusses ways to further optimize assets, including lazy loading, code splitting, minification, and compression.
- Getting Started with Astro introduces Astro, a framework that combines static site generation with hybrid rendering, showcasing how to create components and pages with Astro.
- Astro Routes and Rendering demonstrates how to use dynamic routes to create statically generated pages and how to add an adapter for server-side rendering to render pages on-demand.
- Astro and Svelte discusses adding Svelte to an Astro project, briefly discussing islands architecture, and showcases how to use Astro directives to control UI framework component hydration.
- Overarching Project continues with the overarching project.
Finally, at the end of the part, there is a recap and feedback chapter that briefly summarizes the part and asks for feedback on the part.