Able to explain the difference between server-side and client-side rendering

Question 1

Server-side rendering (SSR)

Answer 1

Server-side rendering (SSR) involves

• generating the complete HTML, CSS, and JavaScript code for a web page on the server
• and sending it as a complete page to the user’s browser.
• The browser then renders the page and executes any JavaScript code required for interactivity.

Question 2

Server-Side Rendering (SSR) pros and cons

Answer 2

Pros

• High level of SEO (Search Engine Optimization) search – the content of the pages get indexed more quickly than client-side type;
• Better initial load time – Since the server sends a complete HTML page to the browser, the page can be displayed faster than with CSR, which requires additional time for JavaScript code to execute and fetch content.
• Excellent static site.

Cons

• Less interactivity: Since the page is fully formed before being sent to the browser, there is limited interactivity without additional requests to the server.
• More server load: The server has to do more work to render the pages, which can result in slower response times and increased server load, especially with high traffic websites.

Question 3

Client-side rendering (CSR)

Answer 3

Client-side rendering (CSR), on the other hand, means that

• the web server sends only a basic HTML template to the browser, along with the necessary JavaScript and CSS files.
• The browser then downloads the additional content
  
  • and uses JavaScript to dynamically render the content
  • and update the DOM (Document Object Model, With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

) as needed.
- This approach allows for more interactive and dynamic web pages, but can also result in slower initial load times and decreased SEO (Search Engine Optimization) due to search engine bots not being able to easily parse JavaScript-generated content.

Question 4

Client-side rendering (CSR) pros and cons

Answer 4

Pros

■ Rich site interactions
■ Fast website loading after initial load
■ Great for web applications

Cons

■ Low SEO
■ Initial load might take more time
■ In most cases, requires external library