Rendering types

In this article we will learn different rendering types:

  • Client-side rendering.
  • Server-side rendering.
  • Pre-rendering

Client side rendering

The application rendered on the client side Like react,angular and vue and its follow this steps.

  • User request a website.
  • Server sends HTML files with JavaScript links.
  • Browser downloads HTML files.
  • Browser downloads CSS & JavaScript files.
  • Browser executes library or framework.
  • Finally browser load website.

Advantages

  • Fast rendering after initial loading.
  • Good for web apps that have a lot of logic and the big part when need authorization.
  • A lot of frameworks and advanced libraries supporting it.

Disadvantages

  • Low SEO
  • Initial loading may take some times.

Usage of CSR

  • If your application has a lot size of dynamic data.
  • If your application has a complex UI.
  • If your application focused on a bigger number of users.
  • If your application needs authorization to be accessed.
  • If your application does not have content used for SEO.

Server side rendering

Web page rendered on the server not on the browser. Its follow the following steps.

  • A user request a website.
  • Server creates ready HTML files.
  • Browser render HTML but its not interactive.
  • Browser download JavaScript files.
  • Browser executes JavaScript.
  • Website become fully interactive.

Advantages

  • Better for SEO.
  • Initial loading is faster.

Disadvantages

  • Lots of server requests.
  • Full page reloads.
  • Slow rendering when application has a lot of interactivity.

Usage

  • Number of users not large.
  • If the application more static data.
  • If UI is complex but with small amount of interactivity.

Pre-rendering

Is an intermediate solution between client and server rendering. The steps as the following:

  • User request a website.
  • Server sends HTML files with JavaScript.
  • Browser render the HTML files and download JavaScript files.
  • User see the static page not interactive.
  • User is redirected to the right file.
  • Website is fully interactive.

Advantages

  • Better SEO.
  • Less requests.
  • Better user experience for the first loading.

Disadvantages

  • Need to wait for interactivity till JavaScript loaded.
  • Needs to provide user-friendly UI-Design for the first loading if data is required.

Usage

  • If your UI contains content used for SEO.
  • If part of your application is available for users without authentication.
  • If you are not use SSR and you need to improve loading time and SEO.
  • If your application has a static content on the first page.

Subscribe to our Newsletter

Subscribe to tech-hour website to get all updates, new articles, new courses and projects. No spam ever. Unsubscribe at any time.