When building a web application, there are a million things to consider to ensure that you are providing your client with a high performing and user friendly content, as well as creating a product that is scalable,
Well, here I present you with the 1,000,001th consideration: what rendering strategy is best for what you are creating?
What is rendering?
Rendering in web development is the process of converting your source code in the interactive pages that are presented to the user.
.....
First Contentful Paint is a way of measuring how long it takes for your site to show any meaningful content to the user. 'Meaningful' could be content like text or images. The is a critical metric that lets the user know that the site is actively loading and working. With a score range of Good (1.8 seconds) to Poor (3 seconds), a poor FCP could be caused by slow serve responses, render blocking resources or heavy page loads
SSR: Server Side Rendering
In server side rendering, the HTML for the page is fully generated in the server before being sent to the browser. This provides the user with a fast initial download and a Good FCP. The browser downloads the Javascript after the HTML to make the page interactive. SSR is best for Ecommerce pages, news sites and highly dynamic, data critical public pages. This type of rendering is also SEO-friendly, because the words are quickly on the page. A downside of SSR is the server load. The server has to gather data and render the HTML on every request. For more dynamic webpages, the client side rendering technique might fare e bit better
CSR: Client Side Rendering
In client side rendering, the server sends a mostly blank HTML document to the browser first. This is to serve as a placeholder for content that will load later. With the method, there is much less of a strain on the server because the browser does most of the heavy lifting. The browser executes the Javascript, gathers the API date and builds the page content. Unfortunately this can result in a slower page load and poor SEO
SSG: Static Site Generation
In static site generation, the HTML page is fully pre built and deployed. The pre built files are cached on a Content Delivery Network (CDN) until they are requested by the server and served instantly to the user. This type of rendering is best for content that rarely changes, like blogs or documentation websites. One of the biggest tradeoffs of SSG is that updated the content may require rebuilding and redeploying the whole site.
Top comments (0)