Frontend developers often use these terms to describe their web applications. However, to developers less familiar with web applications, these terms are often confused. If you are confused about the differences between Client-Side Rendering, Server-Side Rendering, and Static-Site Generation, then this article is for you!
Client-Side Rendering
Client-side rendering was made popular with the advent of the Single Page Application (or SPA). JavaScript Frameworks like AngularJS, ReactJS, BackBone.JS and many more use this approach. With Client-Side-Rendered Applications, the server sends static HTML and JavaScript files to the client. Then the client makes any API calls necessary to get initial data, and then it renders the application.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
As we can see in the above gist, the static HTML sent by the server is an empty page. If you opened this HTML without JavaScript, it would be a blank screen with a noscript warning. When the client receives the HTML and loads the JavaScript, it will render the react application into the div with the id root.
#javascript #reactjs #nextjs #programming #react #react native