What Is Rendering?
Rendering is the multi-step process a web browser uses to convert raw code into a visible page. When you type a URL and press enter, the browser requests the HTML document from a server. It then parses that HTML to build the Document Object Model (DOM), a structured tree of every element on the page. Simultaneously, it processes CSS to build the CSS Object Model (CSSOM), which defines the visual styling of each element. Combining these two trees creates what is called the Render Tree, which the browser uses to calculate the exact position and size of each element on screen before finally drawing, or "painting", the pixels.
This process happens in fractions of a second on fast connections and modern devices. However, certain resources can interrupt or slow this pipeline. The most common culprit is render-blocking resources. When the browser encounters a <link> tag for an external CSS file or a <script> tag without the async or defer attribute, it must pause the rendering pipeline, download the file, and process it before continuing. On South African mobile networks, where latency can be higher than in Europe or the US, these delays are particularly noticeable and damaging to user experience.
There are also two distinct paradigms for where rendering happens. In server-side rendering (SSR), the web server builds the full HTML document and sends it to the browser already complete. The browser can display content almost immediately. In client-side rendering (CSR), the server sends a mostly empty HTML shell and a large JavaScript bundle. The browser must download and execute the JavaScript before building the page. Frameworks like React and Vue often use CSR by default, which can result in poor performance metrics and indexability issues if not handled carefully.
Render In Practice
A Durban-based online retailer rebuilt their product pages using a client-side rendering framework without server-side rendering support. While the finished pages looked excellent, Google's crawler was seeing blank pages or incomplete content because it was not executing the JavaScript during indexing. Product pages were not appearing in Google Shopping results and organic visibility dropped significantly after the rebuild.
The fix involved switching to a hybrid approach using static site generation for product listing pages and server-side rendering for dynamic pages like cart and account sections. After the change, Googlebot immediately crawled and indexed the full page content, and organic impressions recovered within six weeks. For South African e-commerce businesses investing in SEO and web design, understanding how your chosen framework handles rendering is not optional. It is a foundational technical decision that shapes everything from page speed scores to organic revenue.
How rendering affects SEO
Rendering is the process of turning a page's code into the visual page a user, or a search engine, actually sees. It matters for SEO because content that only appears after JavaScript runs must be rendered before a crawler can index it. Google can render JavaScript, but in a second pass that can be delayed and is resource-intensive, so content dependent on it may be discovered later or, if a script fails, missed. Other crawlers, including some AI crawlers, render JavaScript less reliably or not at all. The safe approach is to ensure important content and links are present in the initial HTML, so every crawler can read them without executing scripts, because content a crawler cannot render, it cannot index or cite.
Client-side versus server-side rendering
Where rendering happens shapes both speed and crawlability. Client-side rendering builds the page in the visitor's browser using JavaScript, which can make an app feel responsive but leaves the initial HTML sparse, so crawlers and slow devices may see little until scripts run. Server-side rendering builds the page on the server and sends complete HTML, so content is present immediately for both users and crawlers, at some cost in server work. Static generation pre-builds pages ahead of time for the fastest, most crawlable result. For content that needs to rank and be cited, server-side rendering or static generation is the safer choice, since it guarantees the content is in the HTML every crawler reads, without depending on JavaScript execution.
FAQ
What is render-blocking and why does it slow down websites?
Render-blocking occurs when the browser must pause rendering the visible page while it downloads and processes a CSS or JavaScript file. Large external stylesheets and synchronous scripts loaded in the head are common causes. Deferring non-critical JavaScript and inlining above-the-fold CSS are standard fixes that improve page speed and Core Web Vitals scores.
What is the difference between client-side and server-side rendering?
Server-side rendering (SSR) builds the full HTML on the server before sending it to the browser, so content is visible immediately on load. Client-side rendering (CSR) sends a minimal HTML shell and builds the page in the browser using JavaScript. SSR is generally better for SEO because search engine crawlers see complete content without needing to execute JavaScript.
What is render-blocking?
Resources, typically certain scripts and stylesheets, that the browser must download and process before it can display the page, delaying when content appears. Deferring or optimising render-blocking resources lets the main content render sooner, improving loading metrics such as Largest Contentful Paint.
Why does server-side rendering help SEO?
Because it sends complete HTML with the content already in it, so crawlers see the content immediately without needing to execute JavaScript. Client-side rendering leaves the initial HTML sparse, risking content being indexed late or missed, especially by crawlers that render JavaScript poorly.