Technology

Server-Side Rendering Explained: Why Your Website Needs It for Google

What server-side rendering is, how Google crawls and renders JavaScript websites, how SSR, pre-rendering and client-side rendering compare, how Angular handles it, and how to check whether your site needs it.

Diagram of a server building a complete HTML page and sending it to Googlebot and an Android phone, compared with an empty page built in the browser

Many modern business websites are built as JavaScript applications with frameworks such as Angular, React or Vue. They feel fast once loaded, but there is a catch: if the page is built entirely in the visitor's browser, the first thing a search engine or a slow phone receives is an almost empty HTML shell and a large bundle of scripts. Whether your services, prices and articles are seen depends on those scripts running successfully.

The short answer: server-side rendering (SSR) means the server builds the full HTML of each page before sending it. Visitors see content sooner, and search engines receive the text, links and metadata directly, without waiting for JavaScript. Google can render JavaScript, but its own documentation says server-side or pre-rendering is "still a great idea" because it makes a site faster for users and crawlers, and not all bots can run JavaScript. For a company website that depends on Google, SSR or pre-rendering is the safer default.

This guide explains how Google processes JavaScript pages, the rendering options, and what to ask your developer, in plain terms.

Key takeaways

  • Client-side rendering (CSR) builds the page in the browser; server-side rendering (SSR) builds it on the server; pre-rendering (SSG) builds it at deployment time.
  • Google crawls, then renders JavaScript pages in a queue, then indexes. The queue may take seconds or longer.
  • Google recommends server-side rendering, static rendering or hydration. It describes dynamic rendering as a workaround, not a long-term solution.
  • Not all bots run JavaScript, so SSR also helps other search engines, link previews and tools that read your pages.
  • Angular supports all three modes per route, with hydration to make server-rendered pages interactive.

How Google processes JavaScript pages

Google's JavaScript SEO basics describe three phases:

  1. Crawling. Googlebot fetches the URL and checks robots.txt.
  2. Rendering. Pages that return a 200 status are queued for rendering. A headless Chromium executes the JavaScript. Google notes that a page "may stay on this queue for a few seconds, but it can take longer than that."
  3. Indexing. Google uses the rendered HTML to index the content.

With client-side rendering, the useful content only exists after phase 2. If scripts fail, time out, depend on blocked resources or need a user action to load data, Google may index an incomplete page. With server-side rendering, the content is already in the HTML fetched in phase 1.

The rendering options compared

ModeWhere HTML is builtBest forWatch out for
Client-side rendering (CSR)In the visitor's browserDashboards, admin panels, pages behind loginEmpty initial HTML, slower first view on weak phones
Server-side rendering (SSR)On the server, per requestPages with changing content: articles, services, listingsNeeds a Node.js server and caching; code must run on server and browser
Pre-rendering / static (SSG)At build or deployment timePages that rarely change: home, about, landing pagesMust rebuild when content changes
Dynamic renderingSeparate version served to botsLegacy workaround onlyGoogle calls it a workaround, not a long-term solution

On dynamic rendering, Google's documentation is direct: it "was a workaround and not a long-term solution", and Google recommends "server-side rendering, static rendering, or hydration" instead.

Why SSR matters for an Egyptian business website

Speed on mid-range phones

StatCounter reports that 67.1% of web page views in Egypt were on mobile in August 2026, mostly on Android. With CSR, the phone must download, parse and run JavaScript before showing content, which is slow on modest processors. With SSR, the text and images appear as soon as the HTML arrives, and interactivity follows. This supports a good Largest Contentful Paint, one of Google's Core Web Vitals.

Other bots and link previews

When you share a service page on WhatsApp, LinkedIn or Facebook, their preview bots read the page's title, description and image from the HTML. Google itself notes that not all bots can run JavaScript. If your metadata is only set by scripts, previews can show a generic title or nothing at all. SSR puts the right metadata in the HTML for every page.

AI search features

Google's guidance for its AI features asks that important content be available in textual form and that pages follow JavaScript SEO best practices. Server-rendered HTML is the most direct way to make sure your text is there to be read.

How SSR works in Angular

Angular supports three rendering modes that can be set per route, according to the Angular SSR guide:

  • Server: renders the application on the server for each request, sending a fully populated HTML page.
  • Client: renders in the browser, the default Angular behaviour.
  • Prerender: generates static HTML files for routes at build time.

A typical company site can prerender stable pages, render articles and service pages on the server, and keep the client portal as client-rendered behind a login. Angular then uses hydration: the browser reuses the server-rendered HTML and attaches interactivity, instead of rebuilding the page from scratch.

Common pitfalls when adding SSR

  • Browser-only code. Code that touches window, localStorage or the DOM must run only in the browser. Angular's documentation warns that some patterns cause hydration mismatches and layout shifts, which hurt Core Web Vitals.
  • Duplicate data requests. Without transfer state, the browser may re-request the same data the server already fetched.
  • Wrong status codes. A missing page should return 404 from the server, not a 200 page that says "not found".
  • Metadata per page. Titles, descriptions, canonical tags and hreflang must be set during server rendering for every route.
  • Caching. Cache rendered pages or data sensibly so the server stays fast under load.

How to check if your site needs SSR

  1. Open a key page, choose "View page source" (not the inspector) and search for a sentence from the page. If it is missing, the content is added by JavaScript.
  2. Use the URL Inspection tool in Google Search Console and view the crawled page and its HTML to see what Google rendered.
  3. Share the page link in a WhatsApp chat with yourself and see whether the preview shows the correct title and image.
  4. Check the Core Web Vitals report in Search Console for mobile Largest Contentful Paint problems.

If the source is nearly empty and previews are generic, SSR or pre-rendering should be on your list.

Moving an existing site from CSR to SSR

If your current site is client-rendered, you usually do not need to rebuild it. For Angular, React or Vue applications, SSR can often be added to the existing codebase. A careful migration looks like this:

  1. Audit the public routes. List the pages that must rank: home, services, articles, locations. Pages behind login can stay client-rendered.
  2. Fix browser-only code. Wrap code that uses the window, storage or DOM so it runs only in the browser.
  3. Move metadata to the server. Set titles, descriptions, canonical tags, hreflang and structured data during rendering.
  4. Return correct status codes for missing pages and redirects.
  5. Keep the same URLs. Rendering changes how pages are built, not where they live, so there should be no need for redirects.
  6. Test before launch with "View page source", the URL Inspection tool and real Android phones, then watch Search Console for indexing and Core Web Vitals changes over the following weeks.

When client-side rendering is fine

Not every screen needs SSR. Admin panels, dashboards, ERP screens and client portals behind a login are not meant to appear in search, so client-side rendering is perfectly suitable there.

Questions to ask your developer

  • Which pages are server-rendered, which are prerendered and which are client-only?
  • Do all public pages return complete HTML, with titles, descriptions and canonical tags, without JavaScript?
  • Do missing pages return a real 404 status?
  • How is hydration handled, and have you checked for layout shifts?
  • How are rendered pages cached, and what happens when content is updated?

For how SSR fits into the wider build decision, see our comparison of WordPress and custom-coded websites.

How Nilex helps

Nilex builds SEO business websites and web applications with Angular and server-side rendering on Node.js: public pages arrive as complete HTML with correct metadata and status codes, stable pages are prerendered, and private areas stay client-side behind authentication.

Frequently asked questions

What is server-side rendering in simple terms?

It means the server prepares the complete page, with its text and links, before sending it to the browser. The visitor and search engines receive a ready page instead of instructions to build it.

Can Google index JavaScript websites without SSR?

Yes, Google can render JavaScript, but rendering happens in a queue and depends on scripts working correctly. Google still recommends server-side or pre-rendering because it is faster and not all bots can run JavaScript.

What is the difference between SSR and static pre-rendering?

SSR builds the HTML on each request, which suits content that changes often. Pre-rendering builds HTML once at deployment, which suits pages that rarely change. Many sites use both.

Is dynamic rendering still acceptable?

Google describes dynamic rendering as a workaround and not a long-term solution, and recommends server-side rendering, static rendering or hydration instead.

Does a WordPress site need SSR?

Classic WordPress already generates HTML on the server with PHP, so it is server-rendered by nature. The question mainly applies to sites built as JavaScript applications.

Make sure Google sees what your customers see

If your website is a JavaScript application and your pages are not appearing as expected in Google, rendering may be the reason. Ask Nilex for a free technical SEO check of how your pages are rendered and indexed.

LET'S BUILD

YOUR VISION.
OUR TECHNOLOGY.

Tell us what your business needs. We'll build the system around it.

START A CONVERSATION →

or email us at info@nilexdigitalsystems.com