تحياتي لجميع المهنيين ومحبي بناء الموقع! أوجه انتباهكم إلى ترجمة مقال "Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation" لمالكولم لينغ.
غالبًا ما يستخدم مقدمو البرامج هذه المصطلحات لوصف تطبيقاتهم. ومع ذلك ، بالنسبة للأشخاص الأقل دراية بتقنيات الويب ، فإن هذه المفاهيم غالبًا ما تكون مضللة. إذا كنت تجد صعوبة في فهم الاختلافات بين تقديم على العميل ، وجعل على جانب الملقم و توليد مواقع ثابتة - وهذه المادة هي لك!
تقديم جانب العميل
أصبح العرض من جانب العميل شائعًا مع ظهور تقنية تطبيق الصفحة الواحدة (سبا). يتم استخدام هذا الأسلوب في العديد من أطر عمل JavaScript ، على سبيل المثال AngularJS و ReactJS و Backbone.JS وما إلى ذلك. في التطبيقات التي ينشئها العميل ، يرسل الخادم ملفات JS و HTML ثابت إلى جانب العميل. يقوم العميل بعد ذلك بإجراء مكالمات API كافية للحصول على البيانات الأولية ، ثم يتم تقديم التطبيق.
<!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
في رأيي ، يقدم NextJS مزيجًا من أفضل الطريقتين ، مما يسمح لنا بإنشاء تطبيقات مزج تستخدم كلاً من العرض من جانب الخادم وإنشاء موقع ثابت. يقدم NextJS ما يسميه إطار العمل التحسين التلقائي الثابت للصفحات التي يعرفها بأنها ثابتة. يسمح لك هذا بإنشاء تطبيقات مركبة تحتوي على كل من الصفحات المعروضة على الخادم والإحصاءات المُنشأة.