Server Side Rendering (SSR): Elevating Web Performance and SEO
If you have interacted with SEO for years, you may have already come across Server Side Rendering (SSR) as one of the concepts. Why opt for Server Side Rendering (SSR) instead of client-side rendering?
In this guide, I will introduce the concept of Server Side Rendering (SSR), its significance in modern web development, and differentiate between Server Side Rendering and Client Side Rendering. We will also introduce frameworks and libraries that support server-side rendering and how they do it.
What is Server Side Rendering (SSR)?
Server Side Rendering (SSR) is a web development technique where content on a web page is rendered on the server instead of the client’s browser.
For this to happen, the server generates a fully rendered HTML page that it sends to the client browser, which means that it is the server that does the heavy lifting. The browser receives a ready-to-display page, which speeds up the initial loading time.
How does Server-side Rendering Work?
Whenever a user requests a web page, the server puts together all the JavaScript, HTML, and CSS code needed and then sends a fully-formed page to the user’s browser.
As such, the browser doesn’t have to form a page from scratch, as it happens with client-side rendering. SSR leads to a fast initial load page and is also good for SEO.
Server-side rendering uses web frameworks like Vue.js and Gatsby.js behind the scenes to dynamically generate a fully functional HTML page.
These frameworks pull data from APIs or databases and then use components or templates to build functional HTML documents. Once the server is done with creating the page, it then sends it to the client browser without any further processing.
This is how server-side rendering works:
- The client sends an HTTP request: A user enters an address into the address bar on the browser. The browser establishes an HTTP connection and sends a request to the server.
- Data fetching: The server fetches data from APIs or the database.
- Pre-rendering: The server compiles all the required JavaScript components to static HTML and sends this HTML to the client browser.
- Page loads and renders: The client downloads and displays the HTML from the server.
- Hydration: The client finally downloads all JavaScript code to add interactivity to the HTML page.
Server Side Rendering vs. Client Side Rendering
Client-side rendering is the opposite of server-side rendering. Basically, the browser generates an HTML document that it displays to the users. These are the differences between these two approaches:
| Feature | Server-side Rendering (SSR) | Client-side Rendering (CSR) |
|---|---|---|
| Initial Load time | Fast initial load time | It can be slow as it relies on the client-side loading |
| User experience | Enhanced and improved user experience on the first visit | It can, at times, result in a slower user experience in the first interaction but increase on the subsequent visits |
| Accessibility | All the essential content is loaded with the initial HTML document rendered on the server | Accessibility can be an issue especially where users have disabled JavaScript |
| SEO performance | SSR ticks all the right boxes for SEO | Some search engines may find it hard to index some dynamically generated pages on the client side |
| Scalability | It is easy to scale high-traffic websites that employ server-side rendering | Developers have to come up with a well-thought approach to scale websites that practice client-side rendering |
| Security | It is easy to reduce server-side vulnerabilities when pages are loaded on the server. | Prone to attacks such as cross-site scripting (XSS) and other vulnerabilities associated with client-side rendering. |
Benefits of Server-Side Rendering for SEO
- Fast initial load time: How long it takes for a page to load is one of the factors that visitors to your website consider. SSR allows website users to see a fully loaded HTML page almost instantly. The instant loading reduces the time the user waits before interacting with a web page.
- Fast performance on slow devices/networks: The network the users are using to access your webpages might be slow, or they are using devices running on not-so-fast operating systems. Server-side rendering means that the user devices don’t have to run so much JavaScript, which increases their performance. Such networks or devices no longer need a lot of bandwidth or processing power to display the loaded HTML pages.
- Consistent user experience: SSR allows you to create a good first impression through the Time to First Paint (TTFP). Such users will perceive your website as first when HTML pages are loaded fast, courtesy of server-side rendering.
- Improved SEO: Search engines like Google, Bing, and YouTube consider a lot of things when they are ranking web pages. For instance, they will check user experience, how long people spend on your pages, and the loading speed. SSR improves all these areas, meaning your app will likely rank higher on search engines.
- Easy to handle dynamic content: Search engines love dynamic content. With SSR, developers can now handle dynamic content easily and also personalize/ tailor content based on user inputs and preferences.
- Scalability and caching: In SSR, the server does the initial loading, which reduces the amount of processing that the client should handle and makes it more scalable. SSR can also use server-level and content delivery network (CDN) caching to reduce server load and improve performance.
Server Side Rendering Frameworks and Tools
Some various tools and frameworks implement SSR. Some are designed only to support server-side rendering, while others are built to support client-side and server-side rendering. These are some of the most common you are likely to interact with within the web development world:
#1. Vue.js
Vue.js is a JavaScript framework for building user interfaces and is built on standard JavaScript, HTML, and CSS. With this framework, you can build simple and complex UIs using its component-based and declarative programming model.
Vue components, by default, produce and manipulate the Document Object Model (DOM) in the browser as the output. However, this framework also uses SSR to render such components into HTML strings on the server and send them directly to the browser. A server-rendered Vue app is considered ‘universal’ as most of the code runs on the server and the client.
#2. React.js
React is a JavaScript library for building user interfaces. This library uses a component-based programming model where you can split your application into small reusable components. React is also declarative, making the code easy to predict and debug.
React is designed to implement both client-side and server-side rendering by default. If you need to implement server-side rendering on a React app, you must set it up using a Node.js app framework like Express.js. You must also update your scripts in the package.json file to ensure the app ‘starts’ from the Express server.
#3. Gatsby
Gatsby is a React-based framework for building websites. This open-source framework is designed to help developers build fast web applications. Gatsby integrates with various content management systems like Drupal and WordPress, making it easy to fetch data.
You need a Node.js server to set up server-side rendering on Gatsby. SSR runs on the Gatsby Cloud, where every request is sent to a worker process in the getServerData function. All the data from the worker process is passed to the React component that returns an HTML document.
#4. Angular
Angular is a development platform built using TypeScript. This platform has a component-based framework that you can use to build web applications. You can use Angular to build small and enterprise-level applications.
Like React, Angular does not implement SSR by default. However, you can set up your Angular application to implement server-side rendering by combining it with Express.js, a node.js backend framework. Angular Universal allows you to render Angular components on the server and reduce initial load time.
How to Check if a Website uses SSR or CSR
If you are a developer or marketer, it is hard to determine if a website uses server or client-side rendering when you visit it. Luckily, you can inspect a website to determine the rendering approach it uses. We can inspect our website Geekflare to demonstrate. I will right-click on any page and then select ‘View page source’.
If you can see tags like <a>, <li>, and <ul>, then you are assured that they are running on the server side.
Limitations of Server-Side Rendering
- Increased code complexity: Implementing server-side rendering may call for additional configuration on the server side. Such an approach may lead to an increased code base on the server side, making it hard to maintain.
- Increased server load: Even though we have highlighted that SSR can improve load times, it can also be a performance bottleneck in times of high traffic. The server is responsible for rendering HTML content, which may, at times, overload the server or even lead to crashing.
Is Server-Side Rendering the same as server-side tagging?
No. Server-side rendering is a web development approach where the server sends a fully loaded HTML page to the browser. SSR is meant to increase the fast initial load time and improve SEO.
Client-side tagging is where all the analytics and tracking are done on the server side. When tags are handled on the server, the client’s browser no longer has to deal with such processes, boosting security and increasing performance. Learn about server-side tagging to understand it better.
Conclusion
Server-side rendering is a good choice for every web developer who wants to boost their app’s performance through increased load times and improved user experience.
On the other hand, if not well implemented, SSR can be challenging as it becomes hard to maintain the code. However, the benefits of SSR far outweigh the challenges, which is why many organizations are adopting it.
Next, you may also read about reasons to use server-side tagging over client-side tagging.
