What problem does server-side rendering solve?

As single-page applications became increasing popular after their introduction, JavaScript developers found that single-page applications were not a great fit for several commonly used web technologies like caching and search engine crawlers. Single-page applications have to load an “application shell” before they can load any individual pages within the application. When your web browser loads the single-page application, the web browser only gets the application shell and none of the application’s content.

Search engine crawlers and caching tools only look at the data that is first loaded by the web page. When loading single-page applications (and some other JavaScript applications), the search engine crawler or caching tool only gets the application shell, which is not helpful for either purpose. The application shell does not have any helpful information or valuable content so the web application gets none of the benefit of caching or search engine crawling.

What is search engine crawling?

Search engine crawling is when search engines like Google, Bing, and DuckDuckGo analyze a web page to determine what kind of content the web page contains. This analysis is how search engines build up their records of what web pages have what content in order to help users find relevant answers for their searches. Search engine crawlers have historically struggled with understanding and analyzing the content in JavaScript web applications like single-page applications. If search engine crawlers cannot properly analyze a web page, that web page will not show up in the search results for users’ searches.

What is caching?

Caching is a strategy to improve web page loading performance by storing a copy of the finished final web page closer to the end user. All of the content that makes up a web page has to be generated at some point by a web server somewhere. Generating a web page can take anywhere from less than a second to several seconds depending on the complexity and amount of content on the web page. Busy web sites will store copies of their generated web pages to show visitors instead of generating every visited web page every time for every visitor. Serving cached copies of generated web pages can significantly speed up web page loading and reduce the strain visitors’ traffic places on the web site. Like search engine crawlers, caching technologies have struggled to make a meaningful difference to the performance of single-page applications because single-page applications do not have all of their content when the web page first loads. They load content after the page loads, which caching technology cannot capture. This means JavaScript web applications, and especially single-page applications, can have worse performance than applications built using older technologies or other architectures.

How does server-side rendering work?

Server-side rendering very broadly describes loading your JavaScript application before you send the application to visitors’ web browsers. This technique is similar in effect to generating your entire web page’s content before you send the web page data to your visitors’ web browsers.

In many cases, server-side rendering technologies will run your application behind the scenes, visit every single possible web page your application has, wait for each web page to load the same as it would for a web browser, and make a copy of all of the data for every single page. These cached copies are served to visitors who access your web application.

In other cases, server-side rendering technology will load the application shell before sending any data to visitors’ web browsers and will make the application shell go through the loading its data and generating the HTML, CSS, JavaScript and other dynamic data for the web pages being requested.

Overall, the end goal of server-side rendering is to generate the same HTML, CSS, JavaScript, and other data that you would see when a JavaScript web application has fully loaded before you send any data to the end user. If you can send the fully generated web application page to the user from the beginning, you can take advantage of caching, search engine crawling, and other beneficial technologies that assume you get each web page’s entire data when the web page first loads.