Connecting Front-End to Back-End

In web development, rendering is the process of translating code into a visual and interactive website.

The response body sent from back-end to the front-end include HTML documents, formatted data, and static assets such as Javascript files, stylesheets, and images.

The three methods for rendering a web app are client-side rendering, server-side rendering, and hybrid rendering.

Hybrid rendering seeks to combine the advantages of client-side and server-side rendering. There are various methods of hybrid rendering an app, but generally, static core content is generated on the server, while interactive elements are dynamically generated in the browser as the user navigates the site.

In client-side rendering, a web page’s content is generated by the browser, as it is requested.

A primary advantage of client-side rendering is that websites function quickly after the initial page load. Since content is dynamically generated by the browser, the client doesn’t need to make round-trip calls to the server to deliver content as the user navigates the site, making the browsing experience feel faster.

Because search engines face challenges with crawling and indexing dynamic content, poor search engine optimization (SEO) is a significant disadvantage of client-side rendering. Another shortcoming of client-side rendered web apps is that the quality of user experience can vary widely based on the user’s device and network connection, factors outside of the developer’s control.

With server-side rendering, all of the content for a given view is generated on the server, then sent to the browser to be rendered. In the browser, JavaScript is loaded to enhance the page’s interactivity.

With server-side rendering, since content is ready to render when it is sent from the server, visual elements of the page load quickly in the browser. Search engines have an easier time indexing static content, so server-side rendering also offers optimal SEO performance.

Server-side rendering is not ideal for web apps that have rich interactions. Large JavaScript files can take a while to load, delaying the time it takes for the page to be interactable. In worst case scenarios, users will be able to see the page’s content, but might find that they can’t interact with it, potentially leading to a frustrating user experience.