المواقع الثابتة مقابل الديناميكية: مقارنة شاملة – techsyncer

عندما يفكر العديد من الأشخاص في موقع ويب، فإن مفهوم المواقع الثابتة مقابل المواقع الديناميكية لا يأتي أبدًا في الاعتبار. بعد كل شيء، يظهر الموقع فقط، أليس كذلك؟ من الناحية الفنية نعم، ولكن هناك الكثير يحدث خلف الكواليس.

بالنسبة لشخص يخطط لإنشاء موقع ويب أو نقله، من المهم معرفة هاتين النوعين من المواقع الثابتة والديناميكية. النوع من الموقع الذي تختاره سيؤثر على كيفية إدارة وتحديث المطورين للموقع وتكاليف التشغيل والصيانة المحتملة.

في هذا المقال، ستتعرف على الاختلافات بين المواقع الثابتة والمواقع الديناميكية. ستتعرف على كيفية إنشاء المطورين للمواقع الثابتة والديناميكية، وكيفية عرضها على المتصفح والعديد من المقارنات المفيدة الأخرى.

ما هي المواقع الثابتة والديناميكية؟

كما يوحي الاسم، فإن عناصر المواقع الثابتة ثابتة أو مُرمَمَة. محتويات الموقع الثابت لا تتغير بغض النظر عن المتصفح الذي تستخدمه.

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

معظم المواقع الثابتة طابعها الإعلامي. لنأخذ مدونات الأفراد كمثال، حيث يكون الهدف هو عرض المعلومات للقراء. في مدونة شخصية، يتصفح المستخدمون عادة محتويات الموقع فقط.

على العكس من ذلك ، تتجاوز المواقع الديناميكية الكود الخاص بالعميل. في نهاية المطاف ، تعتمد المواقع الديناميكية على لغة HTML و CSS ، تمامًا مثل المواقع الثابتة. ولكن ، لكي تكون المواقع الديناميكية قابلة للتشغيل ، فإنها تتطلب لغات الخادم مثل PHP ، ASP.net ، أو JavaScript لإنشاء رمز HTML بشكل دينامي.

المواقع الديناميكية تستخدم مصطلح CRUD, وهو اختصار لـ إنشاء ، قراءة ، تحديث ، حذف. يمثل CRUD العمليات التي يتم تنفيذها ضد قاعدة بيانات. وإذا كنت تخمن أن المواقع الديناميكية تستخدم قواعد البيانات ، فأنت على حق!

اختلافات عرض الموقع

كيف يقدم خوادم الويب المواقع الثابتة والديناميكية لمستعرضات القراء؟

المواقع الثابتة تقدم الرمز بالضبط على خادم الويب

تذكر أن المواقع الثابتة تحتوي على وثائق HTML التي تم ترميزها بشكل صلب مع ملفات CSS و JS اختيارية. أي رمز تقوم بتحميله على خادم الويب هو الرمز الذي سيتم تقديمه للمستخدمين الذين يتصفحون موقعك.

على سبيل المثال ، فيما يلي مثال على مشروع موقع ويب ثابت في Visual Studio Code يحتوي على ثلاثة ملفات. صفحة البداية لهذا الموقع الثابت تعرض فقط رأسًا وزرًا.

عند النقر فوق الزر في هذه الصفحة البسيطة ، سيتم الكشف عن كلمة.

Static Website Project in Visual Studio Code

فيما يلي هو الكود الخاص بملف index.html. هذا يعتبر صفحة البداية للموقع الثابت.

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

الكود التالي هو لملف style.css. يحدد هذا الملف CSS النمط الذي يظهر به عناصر صفحة البداية في المستعرض.

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

أخيرًا ، الكود التالي هو الكود الخاص بملف button.js والذي يحتوي على كود JavaScript الذي سيقوم المستعرض بتشغيله عندما ينقر القارئ على الزر.

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

لنفترض أن الموقع الثابت موجود الآن ، يمكنك أن ترى في الديمو أدناه كيف ستبدو. ثم ، إذا فتحت مصدر الصفحة ، يجب أن ترى أن كود الصفحة هو بالضبط نفس كود ملف index.html.

ملاحظة: تم اختبار مثال الموقع الثابت هذا باستخدام ملحق HTTP Server / HTML Preview في برنامج Visual Studio Code.

كما يمكن رؤيته من العرض التوضيحي أعلاه، حتى إذا تفاعل المستخدم مع الصفحة عن طريق النقر على زر، فإن الشيفرة الأساسية لا تتغير أبدًا. هذه هي سلوكية موقع ويب ثابت؛ يتعامل المتصفح مع كل شيء.

قراءة المواقع الديناميكية لقاعدة بيانات أولاً

على عكس الموقع الثابت، يستخدم الموقع الديناميكي معالجة على الجانب الخادم لإنشاء الشيفرة. هذا يعني أن الشيفرة الأساسية وراء الصفحة قد تتغير في أي وقت، اعتمادًا على التصميم.

على سبيل المثال، فيما يلي مشروع موقع ويب ديناميكي باستخدام Node.js يحتوي على ملف واحد فقط من الجافا سكريبت.

Dynamic Website Project in Visual Studio Code

يتم عرض الشيفرة لملف dynamicsite.js أدناه. هذا الشيفرة هو نص سيرفري يعرض وقت الكمبيوتر الحالي في كل مرة يتم فيها تحميل الصفحة.

// dynamicsite.js
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

يوضح العرض التوضيحي أدناه كيف يتم عرض الموقع الديناميكي. تتغير الشيفرة الأساسية لـ HTML في كل مرة يتم فيها تحديث الصفحة.

ملاحظة: تم اختبار هذا المثال للموقع الديناميكي باستخدام Node.js.

هذا هو مثال أساسي عن كيفية سلوك الموقع الديناميكي تحت الغطاء.

المواقع الثابتة مقابل المواقع الديناميكية: كيف يتم إدارة المحتوى؟

الآن تعرف كيف يتم عرض وتقديم المواقع الثابتة والديناميكية. ماذا عن إضافة أو تحديث أو حذف المحتوى؟ فلنفترض أن لديك موقع ويب شخصي ثابت، كيف يمكنك إضافة مشاركات جديدة؟ إذا كان لديك موقع تجارة إلكترونية ديناميكي، كيف تضيف منتجات جديدة في الكتالوج الخاص بك؟

نوع الموقع الذي تحدده يحدد كيفية إدارة محتوى الموقع الخاص بك. فيما يلي الخيارات النموذجية لإدارة المحتوى.

تشفير الصفحات الثابتة

عندما يكون هناك حاجة لتحديث الموقع أو محتوياته ، فإن القيام بذلك ينطوي تقريبًا دائمًا على تغييرات في الرمز. أقدم طريقة وربما الأساسية هي التشفير الصلب. تنطوي هذه الطريقة على تحرير رمز الموقع باستخدام أي محرر نصوص.

قد تكون هذه الطريقة الأكثر مللًا وتستغرق وقتًا طويلاً لأنه يجب تشفير كل جانب من جوانب الموقع يدويًا. ولكن ، يوفر هذا أيضًا للمواقع الثابتة مرونة في التصميم لأن كل صفحة يمكن أن تكون مختلفة.

يمكن لبعض المواقع ذات التصميم البسيط والوظيفة الاستفادة من كتابة محتواها في تنسيق Markdown. ثم تحويل تلك المستندات إلى HTML ، وبالتالي إنتاج صفحات ويب يمكن تحميلها على خادم الويب.

على سبيل المثال ، يحتوي الموقع الثابت أدناه على ثلاث صفحات ؛ index.html ، page1.html ، و page2.html. على الرغم من أن هذه الملفات جزء من موقع ويب ثابت واحد ، إلا أنه تم كتابتها بتصميمات أو ثيمات مختلفة.

Example of a static website with different page themes

مولدات المواقع الثابتة

بدلاً من كتابة الرمز يدويًا ، توفر مولدات المواقع الثابتة القدرة على إنشاء موقع ويب ثابت بالكامل إما من البداية أو من قوالب جاهزة. يتم كتابة المشاركات أو الصفحات الجديدة عادةً بتنسيق Markdown ، وتتم إنشاء ملفات HTML أثناء عملية بناء الموقع.

يمكن تحميل الملفات الناتجة بعد ذلك على خادم ويب لإحضار الموقع إلى الحياة. في بعض مولدات المواقع الثابتة ، من الممكن أيضًا كتابة المحتوى بتنسيقات أخرى مثل HTML و JSON.

فيما يلي قائمة ببعض أشهر مولّدي مواقع الويب الثابتة التي يمكنك استكشافها.

. تم إنشاء الموقع العيني أدناه باستخدام Jekyll دون الحاجة إلى كتابة سطر واحد من الشفرة.

نظام إدارة المحتوى (CMS)

. بحلول الآن، لقد سمعت عن WordPress. ماذا عن Drupal، Joomla، و Netlify؟ هذه هي أسماء أنظمة إدارة المحتوى الأكثر شهرة.

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

عادةً ما يتصل المواقع الديناميكية بنظام إدارة المحتوى. في الواقع، عند شراء حزمة استضافة ويب، فإنها تشمل بالفعل منشئي مواقع وأنظمة إدارة محتوى يمكن تنفيذها بنقرة واحدة (أو بعدة نقرات) من الماوس. يعتبر نظام إدارة المحتوى ربما السبب في أن المواقع الديناميكية هي الاختيار الشائع.

يمكن تكوين المواقع الثابتة لاستخدام أنظمة إدارة المحتوى أيضًا. على سبيل المثال ، يوفر Netlify دعمًا لتكامل مع مولدات المواقع الثابتة مثل Jekyll و Hugo و NextJS. على الرغم من أن إعداد تكامل نظام إدارة المحتوى مع هذه المنصات يتطلب عادة المزيد من العمل مقارنةً بالمواقع الديناميكية.

متى يجب استخدام موقع ويب ثابت مقابل موقع ويب ديناميكي

إذا كنت تتساءل عندما سيتم الإجابة على السؤال القديم ، “أي واحد أفضل؟”، يمكنك الانتظار. ربما لن يكون هناك فائز تحديد. ما إذا كان موقع ويب ديناميكيًا أو ثابتًا أفضل يعتمد على متطلباتك.

هناك الكثير للنظر فيه عند اختيار نوع الموقع. فيما يلي بعض العوامل التي يجب النظر فيها.

Factor	Static Website	Dynamic Website
Cost	Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages.	Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management	To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites.	Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility	Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp.	There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security	Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.	Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity	Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators.	Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery	Only files are being backed up. If the website crashes, files can be restored to recover a static website.	There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
	Static vs Dynamic Website

استنتاج

إذا كان لديك بالفعل موقع ويب ، فربما تعرف بالفعل ما إذا كان لديك موقع ثابت أم ديناميكي. إذا لم يكن الأمر كذلك ، فعليك أن تكون قد تعلمت في هذه المقالة كيفية التمييز بين هاتين النوعين.

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

إذا كنت تخطط فقط لبناء موقع ويب جديد ، فاختيارك سيعتمد إلى حد كبير على الغرض منه. على سبيل المثال ، قد يكون من المفضل استخدام مواقع ويب ديناميكية للتجارة الإلكترونية والتوظيف. بينما ستجد المدونة أو موقع البورتفوليو أن المواقع الثابتة تكفي.

المواقع الثابتة هي حيث بدأت كل شيء وربما لن تختفي أبدًا. خاصة الآن أن مولدات المواقع الثابتة تكتسب شعبية أكثر. ستستمر المواقع الديناميكية في التحسن تحسنًا مستمرًا.

قراءة إضافية

تأكد من الاطلاع على هذه المقالات الأخرى إذا كنت مهتمًا بمعرفة المزيد عن المواقع الثابتة والديناميكية.

كيفية استضافة موقع ويب ثابت على Azure مدعوم بواسطة Cloudflare