Greetings to all professionals and fans of site building! I bring to your attention the translation of the article "Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation" by Malcolm Laing.
Frontenders often use these terms to describe their applications. However, for people less familiar with web technologies, these concepts are often misleading. If you find it difficult to understand the differences between rendering on the client , the rendering on the server side and the generation of static sites - this article is for you!
Client side rendering
Client-side rendering became popular with the rise of Single Page Application (Spa) technology. This approach is used in many JavaScript frameworks, for example AngularJS, ReactJS, Backbone.JS, etc. In client-generated applications, the server sends JS files and static HTML to the client side. The client then makes enough API calls to get the raw data, and then the application is rendered.
<!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>, HTML — . HTML JS, , noscript. HTML JS, div ID root React-.
-
, . CDN . . -
. - , .
- SEO
. Google , , JS, . , . - UX
. , . -
API . , , .
HTML . API . , , , .
— . . , NextJS, , . , , .
-
, , . API, HTML . -
React . , , NextJS.
, HTML- . API HTML- . , -, API HTML, HTML-.
, . HTML- . , .
Gatsby NextJS — , React. Hugo — .
-
HTML- , , , , . ( : ). -
HTML-, CDN .
-
. , - . , , , . , .
— NextJS
In my opinion, NextJS offers a combination of the best of both approaches, allowing us to create mashups that use both server-side rendering and static site creation. NextJS offers what the framework calls automatic static optimization for those pages it defines as static. This allows you to create mashups containing both server-rendered pages and generated statics.