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.