System Design — CSR vs SSR vs SSG

What is Rendering?

Rendering a webpage is the process of turning HTML, CSS, and JavaScript code into an interactive page that website visitors expect to see when clicking on a link.

How does rendering impact the Website?

1. Driving traffic

“If bots can’t crawl it, they can’t index it, and that means your site won’t appear in search results.”

The first page of search engine results can capture as much as 92% of web traffic. SEO rankings take into account not only the quality and relevance of content, but factors like speed, security, mobile friendliness, and most importantly, crawlability.

2. User interaction

Device type, user location, Internet connection, and network conditions all play a role in user-experienced speed, resulting in metrics that can vary significantly from user to user. The speed can be broken into subcategories, which determine what type of content users can view and the time it takes to render this content:

• TTFB: Time to First Byte — seen as the time between clicking a link and the first bit of content coming in.
• FP: First Paint — the first time any pixel gets becomes visible to the user.