Salam untuk semua profesional dan penggemar pembuatan situs! Saya menyampaikan kepada Anda terjemahan dari artikel "Rendering Sisi-Klien vs Rendering Sisi Server vs Generasi Situs Statis" oleh Malcolm Laing.
Para frontender sering menggunakan istilah ini untuk mendeskripsikan aplikasinya. Namun, bagi orang yang kurang paham dengan teknologi web, konsep ini sering kali menyesatkan. Jika Anda merasa sulit untuk memahami perbedaan antara rendering di klien , rendering di sisi server, dan pembuatan situs statis - artikel ini cocok untuk Anda!
Render sisi klien
Perenderan sisi klien menjadi populer dengan munculnya teknologi Aplikasi Halaman Tunggal (Spa). Pendekatan ini digunakan dalam banyak kerangka kerja JavaScript, misalnya AngularJS, ReactJS, Backbone.JS, dll. Dalam aplikasi yang dibuat klien, server mengirimkan file JS dan HTML statis ke sisi klien. Klien kemudian membuat panggilan API yang cukup untuk mendapatkan data mentah, dan kemudian aplikasi dirender.
<!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
Menurut pendapat saya, NextJS menawarkan kombinasi yang terbaik dari kedua pendekatan tersebut, memungkinkan kita membuat mashup yang menggunakan rendering sisi server dan pembuatan situs statis. NextJS menawarkan apa yang disebut kerangka kerja sebagai pengoptimalan statis otomatis untuk halaman yang didefinisikannya sebagai statis. Ini memungkinkan Anda membuat mashup yang berisi halaman yang dirender server dan statika yang dihasilkan.