Статические и динамические веб-сайты: Комплексное сравнение – 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, содержащего только один файл JavaScript.

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? Это названия самых популярных систем управления контентом или CMS.

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.

Динамические веб-сайты обычно подключаются к CMS. Фактически, при покупке пакета веб-хостинга в него уже включены конструкторы сайтов и CMS, которые можно развернуть одним щелчком мыши (или несколькими). Вероятно, CMS – причина того, что динамические веб-сайты являются популярным выбором.

Статические веб-сайты также могут быть настроены для использования CMS. Например, Netlify поддерживает интеграцию со статическими генераторами сайтов, такими как Jekyll, Hugo и NextJS. Однако настройка интеграции CMS с этими платформами обычно требует больше работы по сравнению с динамическими веб-сайтами.

Когда использовать статический веб-сайт и когда динамический веб-сайт

Если вы задаетесь вопросом, когда будет дан ответ на вечный вопрос, “Какой из них лучше?”, то вы, вероятно, будете ждать долго. Вероятно, не будет однозначного победителя. Что лучше – динамический или статический веб-сайт, зависит от ваших требований.

При выборе типа веб-сайта следует учесть много факторов. Ниже приведены только некоторые из них.

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.

Если вы только планируете создать новый веб-сайт, ваш выбор в значительной степени будет зависеть от его цели. Например, веб-сайты электронной коммерции и набора персонала могут быть лучше в виде динамических. В то время как блог или портфолио веб-сайт будет считаться достаточным в виде статического веб-сайта.

Статические веб-сайты – это то, с чего все началось и, вероятно, никогда не исчезнет. Особенно с учетом того, что статические генераторы сайтов становятся все более популярными. Динамические веб-сайты будут только улучшаться по мере дальнейшего развития.

Дополнительная информация

Если вас интересует более подробное изучение статических и динамических веб-сайтов, обязательно ознакомьтесь с другими публикациями ATA.

Как разместить статический веб-сайт Azure, поддерживаемый Cloudflare