Client-Side vs Server-Side Rendering

Websites today are much more dynamic than ever before. JavaScript frameworks made it possible to display dynamic content directly from the browser. As a result, we have faster loading web pages, providing a smooth user experience.

Dynamic pages have different content for each user. Such pages are not placed on the server in the finished form but are collected anew for each new request. The server first finds the document and sends it to the interpreter, who executes the code from the HTML document and checks the files and database. The document is then returned to the server and displayed in the browser. Downloading pages like that takes more time than just static pages.

What’s more, when choosing the approach to rendering, you need to understand the difference between the possible options, so as not to lose performance.  Let’s compare and figure out what is the difference between the Client Side and the Server-Side Rendering

Server-Side Rendering Definition

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. Whenever the client navigates to a different page on the website, the server will do the work once more.

How does SSR work?

Server rendering takes place in four stages. Let’s say you entered the URL and went to the site:

1. The server gives the client a ready-to-render HTML response
2. The browser renders the received HTML and downloads the JS code. At this stage, the page is available for viewing
3. The browser executes JS code, and with it, code Vue/React
4. The page becomes interactive

 

 

SSR Advantages

• Better SEO and page positioning –  since the HTML is completely created on the server-side and web crawlers can more readily index the HTML pages
• Fast initial loading
• Faster Largest Contentful Paint (LCP)

SSR Disadvantages

• Frequent server requests
• Slower time-to-interactive
• Slow time to first byte (the time between clicking on the link and receiving the first fragment of content)

What is SEO?

SEO (Search Engine Optimization) is a process used to optimize the technical structure of your website, content relevance, and link popularity. This makes it easier to find pages, makes them more relevant and popular with your search, and raises your rank by search engines.

Developers consider the impact of SEO when choosing a strategy for rendering. SSR is often chosen to form a page with a «finished view», which search robots can easily interpret. Search robots can perform Javascript, but generally, their rendering mechanisms have limitations that are worth remembering.

Client-Side Rendering Definition

Client-side rendering(CSR) involves rendering pages directly in the browser using JavaScript. All logic, data retrieval, templating, and routing are handled on the client, not on the server.

How does CSR work?

With client rendering, the page is available after the code is executed. That’s why the user does not see the naked, not animated JS-page skeleton:

1. The Server sends a response to the client
2. Browser loads JS
3. The browser executes JS
4. The page is available and interactive

 

 

CSR Advantages

• Less load on the server
• Better UI
• Reduced server-side resource

CSR Disadvantages

• Slower initial load time
• Low SEO score (if not implemented correctly)
• Caching is not possible until the page is fully loaded

When to Use SSR & CSR

The main difference between CSR and SSR is where the page is rendered. SSR renders the page on the server-side and CSR renders the page on the client-side. The client-side dynamically manages the routing without refreshing the page each time the client requests another route.

Use SSR

• If you want to prioritize SEO, you’re usually building a blog site, and if you want everyone searching on Google to find your site
• When your website needs a faster initial load
• If the content on your website does not require a lot of user interaction

Use CSR

• The application has a very complex user interface with many pages/features
• If your website has a lot of interactions
• If SEO is not that important for you

JavaScript SSR Frameworks

When starting a project, the framework saves programmers the hassle of reinventing the wheel by performing common tasks from scratch. Instead, developers use pre-made templates and tools to get started quickly with projects, saving time and effort. In addition, you can focus on specific features, improving the quality of your final solution.

For a web application with React, better SEO score, easier social media optimization, and faster render, you should think about SSR and a framework like Next.js. Therefore, Next.js was built as an end-to-end server-side rendering framework based on React.

 

 

If you are building a SPA (single page application), and you don’t want to configure everything on the server’s side like i18n, router e.t.c. you should use Create React App.

Also, you can use Nuxt.js – it is a minimalist framework with outstanding documentation. Nuxt.js combines all the benefits of server-side rendered apps (SEO ease of use, faster launch, etc.) with Vue.js’ reactive component architecture.

 

By default, Vue.js uses Client-Side Rendering,  however, it is also possible to make SSR in Vue.js. Here I attach a link to official documentation if anyone wants to understand this in more detail.

Сheck  how we work for your potential future application on Nuxt.js.

Summarize

The decision on the method of rendering one-page applications is made on the basis of business requests. For some applications, SEO optimization is not critical. Their creators rely on the responsiveness of the interface, and the convenience of development.

Contact us for more information about web development. We look forward to working with you to achieve your business goals!