Server-Side Rendering

Server-Side Rendering Definition

Server-side rendering refers to an application’s ability to display the web-page on the server rather than rendering it in the browser. When a website’s JavaScript is rendered on the website’s server, a fully rendered page is sent to the client and the client’s JavaScript bundle engages and enables the Single Page Application framework to operate.

Server side rendering flow chart diagram
Image from Krusche Company

FAQs

What is Server-Side Rendering?

Server-side rendering (SSR) is an application’s ability to convert HTML files on the server into a fully rendered HTML page for the client. The web browser submits a request for information from the server, which instantly responds by sending a fully rendered page to the client. Search engines can crawl and index content prior to delivery, which is beneficial for Search Engine Optimization purposes.

Popular examples of server-side rendering JavaScript frameworks include: Angular server side rendering, ejs server side rendering, server side rendering Express, Gatsby server side rendering, Google server side rendering, NestJS server side rendering, Next server side rendering, Nuxt server side rendering, React server side rendering, and Vue server side rendering.

What are the Benefits of Server-Side Rendering?

Some server-side rendering advantages include:

  • A server-side rendered application enables pages to load faster, improving the user experience.
  • When rendering server-side, search engines can easily index and crawl content because the content can be rendered before the page is loaded, which is ideal for SEO. 
  • Webpages are correctly indexed because web browsers prioritize web pages with faster load times.
  • Rendering server-side helps efficiently load webpages for users with slow internet connection or outdated devices.

What are the Risks of Server-Side Rendering?

Server-side rendering disadvantages may include:

  • Rendering server-side can be costly and resource-intensive as it is not the default for JavaScript websites, and the server takes on the full burden of rendering content for users and bots.
  • While rendering static HTML server-side is efficient, rendering bigger, more complex applications server-side can increase load times due to the bottleneck.
  • Server-side rendering may not be compatible with third-party JavaScript code. 
  • Rendering server-side may be ideal for static site generation, but frequent server requests and full page reloads can result in overall slower page rendering in more complex applications. 

Server-Side Rendering vs Client-Side Rendering

In client-server rendering, rather than receiving all of the content from the HTML document, content is rendered in the browser using the client-side JavaScript library. The browser does not make a new request to the server when a new page is loaded. Search engine rankings may be negatively impacted as the content is not rendered until the page is loaded on the browser, however, website rendering tends to be faster in client-side rendered app. In considering server side vs client side rendering, the developer will assess factors such as the scale of the project, the complexity of the application, the number of users, and user experience priorities.

Does HEAVY.AI Offer a Server-Side Rendering Solution?

HEAVY.AI leverages server-side GPUs and modern graphics APIs to instantly render interactive charts and geospatial visualizations. HEAVY.AI developed technology for in-situ rendering of on-GPU query results to accelerate the visual rendering of grain-level data, which  distinguishes HEAVY.AI from other technologies that execute queries quickly but transfer the results to the client for rendering, which slows overall performance. 

HEAVY.AI Render leverages server-side rendering, GPU buffer caching, modern graphics APIs, and an interface based on Vega Visualization Grammar to provide interactive visualizations of high-cardinality data at any scale. Render enables an immersive data exploration experience by creating and sending lightweight PNG images to the web browser, avoiding large data volume transfers. HEAVY.AI’s zero-latency pointmap visualization avoids any slowdowns associated with transferring high cardinality data over the network to the client.