The Art of Web Rendering: An overview
Web rendering patterns have evolved a lot over the years, from server-side rendering to client-side rendering to hybrid approaches. But along the way, things have also become unnecessarily complex, with bloated frameworks, heavy dependencies, and fragile code. That's why some developers are going back to the roots of web development, using simple and elegant solutions like htmx but there's still a lot of work that needs to be done. But In this blog post, we'll discuss different rendering techniques provided to us by powerful and popular frameworks such as NextJS, Svelte, Astro, etc.
But why do we need these patterns?
There are many things to keep in mind while building a great project. Things such as build times, uptime, server costs, rollbacks, scalability, etc. And choosing the right pattern is crucial for a good user experience. when we optimize our web app we usually optimize for core web vitals. let's discuss them briefly:-
- Largest Contentful Paint (LCP): This metric tells you how fast your page loads the largest visible content. You want to keep it under 2.5 seconds for a good user experience.
- First Input Delay (FID): This metric tells you how responsive your page is to user interactions. You want to keep it under 100 milliseconds for a smooth and snappy experience.
- Cumulative Layout Shift (CLS): This metric tells you how stable your page layout is during loading. You want to keep it under 0.1 for a visually pleasing and predictable experience.
Other vital metrics are not considered a part of user experience but are used to quantify the technical factors, lag time, etc. you can read more about them here.
Static Rendering
In Static rendering, you generate the HTML content for each page at build time, instead of at request time. This way, you can serve the pages faster and more reliably from a CDN or a simple server. Static rendering is perfect for pages that have static content, such as blog posts, product pages, or contact information. There are different types of static renderings, such as prerendering, which creates a static HTML file for each route, or static site generation (SSG), which creates a static HTML file for each possible data source. There are types of static rendering such as client-side fetch using a library like swr. incremental static regeneration (isr), on-demand isr with the help of nextjs. which can be useful for static sites which need dynamic data.
Client Side Rendering
In Client-side rendering, you create dynamic and interactive web pages. Instead of generating the HTML on the server and sending it to the browser, client-side rendering uses JavaScript to build the HTML elements in the browser. This way, you can update the page without reloading it, and provide a faster and smoother user experience. Client-side rendering is great for web applications that need to handle a lot of user interactions and data changes.
Server Side Rendering
Server-side rendering (SSR) is a technique that allows you to render web pages on the server instead of the browser. This can improve the performance, SEO, and user experience of the web applications. SSR works by sending a fully rendered HTML page to the browser, which can then be enhanced by client-side JavaScript. SSR can also reduce the amount of data transferred to the browser, the time and resources needed to parse and execute JavaScript code, as well as enable features like streaming.
One of the latest innovations in SSR is React Server Components, which are a new type of component that can run only on the server. They can access data sources directly, without using APIs or GraphQL, and they can render UI components that are sent to the client as HTML. This reduces the amount of JavaScript and data that the client has to download, making the app faster and more interactive.
Each pattern has its trade-offs. there is not one pattern that’s better than the others The best solution might be a mixture of some of these techniques. using the right rendering technique can help you create a great user experience.