Every web developer wants to make their website load as fast as possible, slow websites end up losing users and thus business. Rendering patterns that suits an e-commerce platform may not be suitable for a news publishing website.
Rendering patterns focus on how to give pages to the user. Should we create the pages and store them on build time and serve when requested, or create a page only when the user requests for it, or a mix of both? All patterns have some advantages and disadvantages, we are going to discuss the two most famous ones in this article, Server Side Rendering and Client Side Rendering. (We can compare different patterns according to standard web metrics – TTFB, FCP, LCP, TTI )
Some of the more famous rendering patterns used today :
- Client Side Rendering – Pages generated on the client browser
- Server Side Rendering – Pages generated by the server at client request
- Static Site Generation – All pages are generated and stored at build time
What happens in Server Side Rendering?
When a user requests a page, the browser sends a request to the server. The server generates the requested page (HTML + data) and serves it to the client. The javascript bundle (without any rendering logic) is also downloaded from the server by the browser and executed.
SSR is considered best for sites with user-specific content. They are also considered better for SEO. They give faster content display though without interactivity, so the user screen is not empty. TTFB (time to the first byte) is slower for SSR, and the load on the server is high. Also takes longer to create interactivity.
What happens in Client Side Rendering?
In client-side rendering, the server sends a bare HTML file and JavaScript code (with rendering logic). The js code executes on the browser, performs data fetching, and routing, and paints the DOM. The server is only accessed at the initial request and for data fetching.
CSR is considered best for sites with highly dynamic content. TTFB (time to the first byte) is fast for them, though they do not display anything yet. The load on the server is considerably low because of the rendering logic shift to the browser. They display entire content with interactivity. The LCP (largest content paint) is higher for CSR.
