что такое статическая веб страница
Статические и динамические сайты сегодня: какие лучше и почему
Казалось бы, статические сайты некоторое время назад ушли в прошлое и простые в разработке динамические заменили их уже навсегда. Но с появлением разных генераторов статических сайтов и специальных фреймворков споры о том, какой тип сайтов оптимальнее, разгорелись с новой силой. Сначала мы рассмотрим различия статических и динамических страниц, а затем — их достоинства и недостатки, чтобы понять, за каким типом сайтов будущее.
Статические сайты состоят из неизменяемых страниц. Это значит, что сайт имеет один и тот же внешний вид, а также одно и то же наполнение для всех посетителей. При запросе такого сайта в браузере сервер сразу предоставляет готовый HTML-документ в исходном виде, в котором он и был создан. Кроме HTML, в коде таких страниц используется разве что CSS и JavaScript, что обеспечивает их легкость и быструю загрузку.
Чаще всего статическими бывают сайты с минимальным количеством страниц или с контентом, который не нужно регулярно обновлять, а именно сайты-визитки, каталоги продукции, справочники технической документации. Однако с помощью сторонних инструментов существует возможность добавить на такие страницы отдельные динамические элементы (комментарии, личный кабинет для пользователей, поиск).
Динамические сайты, в свою очередь, имеют изменяемые страницы, адаптирующиеся под конкретного пользователя. Такие страницы не размещены на сервере в готовом виде, а собираются заново по каждому новому запросу. Сначала сервер находит нужный документ и отправляет его интерпретатору, который выполняет код из HTML-документа и сверяется с файлами и базой данных. После этого документ возвращается на сервер и затем отображается в браузере. Для интерпретации страниц на серверной стороне используются языки программирования Java, PHP, ASP и другие.
Самыми яркими примерами динамических сайтов являются страницы, созданные на основе систем управления контентом (CMS). Среди них чаще всего встречаются интернет-магазины, а также форумы, страницы с отзывами и другие ресурсы с возможностью размещения контента посетителями.
Разобравшись в специфике статических и динамических сайтов, переходим к сравнению этих двух типов страниц по нескольким критериям, чтобы увидеть, какой тип имеет больше преимуществ.
Разработка и размещение на хостинге
Статические сайты с их необходимостью прописывать код для каждой отдельной страницы во многом проигрывают динамическим, которые можно легко создать из готовых шаблонов и элементов. И если создание динамического сайта на базе какой-либо простой CMS может не составить труда даже школьнику, то разработать статический ресурс без знаний программирования или без помощи специалистов уже не получится.
Что касается вопроса хостинга, то здесь иметь дело со статичным сайтом будет проще, так как он нетребователен к ресурсам и не нуждается в подключении дополнительных услуг, в отличие от динамического. Соответственно размещение динамических сайтов в интернете в среднем стоит дороже, чем статических. К тому же перенос статического ресурса на другой хостинг происходит быстрее и без особых проблем.
Администрирование и развитие
Изначально вносить изменения в динамический сайт было легче, чем в статический. Раньше администраторам статических сайтов для обновления сайта ничего не оставалось, кроме как править код. А если нужно было произвести одно и то же обновление на нескольких страницах, то приходилось менять код каждой страницы отдельно. По этой причине со временем популярность динамических сайтов с возможностью редактировать проект через простые панели прямо в браузере существенно возросла. Однако появление генераторов статических сайтов изменило положение дел и теперь администрировать такого рода страницы стало проще.
Тем не менее, статические сайты по-прежнему немного сложнее развивать и обновлять, чем динамические. Последние предлагают практически безграничные возможности для развития проекта, которые достигаются благодаря подключению расширений, плагинов и другого ПО. Но использование дополнительного программного обеспечения нередко ещё больше замедляет и без того небыструю загрузку таких сайтов, что статическим страницам не свойственно.
Устойчивость к атакам и взлому
Высокая устойчивость ко взлому — едва ли не главное преимущество статических сайтов. С этой точки зрения динамические сайты гораздо уязвимее, так как большинство CMS, на основе которых они создаются, представляют собой системы с открытым кодом, что облегчает хакерам поиск способов вмешиваться в их работу. Также статические ресурсы с лёгкостью выдерживают DDOS-атаки, в то время как динамические быстро могут выйти из строя при резком увеличении числа запросов — и кэширование от этого не всегда спасает.
Продвижение и SEO
Так как статические сайты без использования генераторов обновлять сложнее, то и для поисковых систем они могут быть менее привлекательными. В топах выдачи сейчас чаще оказываются регулярно обновляемые ресурсы со свежим контентом, среди которых больше динамических сайтов. К тому же в связи с этим проводить рекламные кампании с динамическими страницами в целом легче, однако с резким наплывом посетителей при успешном продвижении лучше справится именно статический сайт.
В последние годы статические сайты вновь начали набирать популярность и оттеснять более громоздкие динамические ресурсы. Продолжится ли эта тенденция в будущем? Неудивительно, если так и будет, ведь позитивных сторон у статических сайтов не меньше, чем у динамических. Но всё же выбор конкретного типа сайта будет зависеть от особенностей вашего проекта и от целей вашего выхода в онлайн, поэтому решение за вами.
Веб-разработка: основы статического сайта
Мы поговорим о базовых вещах, не заостряя внимания на реализации статических веб-технологий.
В самом общем смысле веб-сайт практически ничем не отличается от нативного приложения (например, Android/iOS-приложения). Разница между ними заключается в том, что функционирование веб-сайта ограничено возможностями веб-браузера. Он не может работать в системе клиента, как приложение, потому что отображается внутри веб-браузера. Иными словами, веб-сайт — это то, что понимает только веб-браузер.
Существует две основные части веб-разработки: интерфейсная (на стороне клиента) и серверная (на стороне сервера). Сначала поговорим о первой.
Веб-интерфейс
Веб-сайт — это набор веб-страниц, которые представляют собой простые HTML-файлы. Когда вы отправляете запрос на сервер веб-сайта, браузер получает в ответ массу данных. И в ней всегда будет то, без чего никак не обойтись, — это HTML.
Каждая веб-страница представляет собой отдельный HTML-файл. Всякий раз, когда мы переходим на другой маршрут, браузер делает новый запрос, чтобы получить HTML-файл для новой страницы. Например, если вы перейдете с /home (Домашней страницы) по маршруту /about-me (Обо мне), он отправит еще один запрос на сервер, чтобы получить HTML-файл для страницы /about-me.
Лучший способ проверить это — обратить внимание на индикатор загрузки в вашем браузере. Если он показывает, что сайт загружается, вы действительно отправили запрос на сервер и браузер ждет ответа.
HTML расшифровывается как HyperText Markup Language (Язык разметки гипертекста), где HyperText означает текст, содержащий ссылки на какой-либо другой текст. По сути, именно благодаря гипертексту, вы переходите с одной веб-страницы на другую.
Вам нравится, как выглядит эта кнопка? (Кликните “Run Pen” для предварительного просмотра)
Скорее всего, нет! А как насчет этой?
Первая — это обычная кнопка HTML со стилями по умолчанию. Вторая использует CSS для применения пользовательских стилей. Ниже приведен пример кода для второй кнопки:
CSS расшифровывается как Cascading Style Sheets (Каскадные таблицы стилей). Полное название этих таблиц объясняет их принцип действия. Стили применяются сверху вниз в том порядке, в котором они определены, подобно каскадному водопаду. Любой повторяющийся стиль переопределяет свои предыдущие соответствующие значения, как в следующем примере:
JavaScript
Для современного веб-сайта недостаточно только HTML и CSS. Например, как вы убедились ранее, нажатие на красивую кнопку не производит никакого эффекта. Но на самом деле эта кнопка предназначена для того, чтобы вызывать определенное действие. Теперь нажмите на кнопку ниже и посмотрите, что произойдет.
Вы догадались — это JavaScript! 😄 Язык, который добавляет функциональности демонстрационным элементам. Так же, как HTML и CSS, JavaScript является клиентским языком; это означает, что он интерпретируется и выполняется веб-браузером. Он не может работать изначально вне веб-браузера, в отличие от C++, Java, Python и других часто используемых серверных языков.
Мы можем использовать эту переменную по мере необходимости. Но в JavaScript мы хотим работать не только с этими переменными, но и с элементами HTML, присутствующими на странице! Как же работать с HTML-элементами в JavaScript?
Вам наверняка приходилось слышать о таком понятии, как API (Application Programming Interface; по-русски: “программный интерфейс приложения”). Как следует из названия, API служит интерфейсом различным программным продуктам для обеспечения взаимодействия и обмена данными между ними.
При взаимодействии с HTML JavaScript требует DOM API, который расшифровывается как Document Object Model (объектная модель документа). Он предоставляет языку JavaScript HTML-документ в виде объектной модели. Корнем этого перевернутого древовидного объекта является сам документ. Каждый элемент в документе получает свой собственный узел, глубина которого зависит от количества содержащихся в нем дочерних элементов.
Поэтому, чтобы выбрать “Fancy Button” в JavaScript с помощью DOM API, я должен сделать следующее:
Вместо того, чтобы присваивать обычное значение какой-либо переменной, мне нужно присвоить ей элемент DOM. Затем я могу рассматривать эту переменную как фактический элемент на странице. Следующая инструкция реализует часть этого “клика” по кнопке.
Таким образом, HTML, CSS и JavaScript формируют основу интерфейса современного веб-сайта. Это открывает перед нами несколько возможностей:
Но, как вы можете догадаться, все это совершенно бесполезно, пока мы можем только видеть веб-страницы. Вот почему нам нужно перейти к следующему разделу. 😛
Веб-сервер
Веб-сервер необходим для того, чтобы обслуживать наши веб-страницы по всему миру. Для этой задачи у нас есть множество серверных языков, таких как Java, PHP, Ruby, Python, C++ и т.д. Я упоминал ранее, что JavaScript — это клиентский язык, потому что он не может быть запущен вне веб-браузера и действовать как веб-серверный. Теперь я готов признать: это не совсем так! 😅
Знакомьтесь: Node.js
Node.js — это среда выполнения JavaScript. Среда выполнения сочетает в себе различные инструменты и технологии, которые обеспечивают условия, подходящие для запуска определенной программы или приложения.
Ваш веб-браузер также обеспечивает среду выполнения для JavaScript, которая предоставляет различные API для основного движка JavaScript, в том числе:
Однако основной частью среды выполнения JavaScript является движок JavaScript.
Google Chrome и другие веб-браузеры, работающие на базе Chromium, используют для запуска JavaScript движок Google V8, написанный на C++. Интересно, что Node.js применяет тот же движок. Но вместо предоставления таких интерфейсов, как DOM API и ему подобных, он использует другие инструменты. Они обеспечивают доступ к операционной системе, файловой системе, компьютерной сети и т. д. Это позволяет использовать JavaScript в качестве серверного языка.
В настоящее время Node.js — популярный выбор среди серверных языков. Главное преимущество для тех, кто работает с интерфейсной частью, заключается в отсутствии необходимости изучать другой язык, чтобы настроить сервер! Все готово, если вы достаточно хорошо знаете JavaScript.
Работа сервера
Сервер всегда находится в состоянии рабочей готовности (если не крашнулся! 🙄), принимая запросы и отправляя соответствующие ответы клиентам. Тип ответа сервера зависит от метода (вида) пользовательского запроса. Ниже приведены два наиболее широко известных метода запроса, используемых по протоколу HTTP:
Мы не станем уделять внимание реализации того, как сервер обрабатывает запросы и ответы в Node.js: вам, как новичку, будет сложно в этом разобраться. Вот псевдокод для выполнения подобной работы:
Базы данных
Возможно, у вас уже есть представление о том, что такое база данных. Это своеобразное хранилище данных с определенным способом организации и работы с данными. Распространенным понятием, относящимся к базам данных (вы наверняка с ним сталкивались), является CRUD. Эта аббревиатура означает: создание (Create), чтение (Read), обновление (Update) и удаление (Delete). Перечисленные четыре операции являются самыми важными из тех, которые выполняет база данных.
Среди множества типов баз данных, выделяют две основные категории: реляционные и нереляционные. Иногда их также называют SQL (Structured Query Language; по-русски: “язык структурированных запросов”) и NoSQL соответственно. Рассмотрим каждую из них:
Выбор базы данных зависит от типа данных, которые вы собираетесь хранить. Рекомендуется изучить различные варианты, прежде чем сделать выбор, чтобы получить оптимальную производительность.
Серверные API
Вы когда-нибудь задумывались, как приложение погоды в вашем мобильном телефоне собирает такое количество метеоинформации? А как Google maps определяет местоположение? А откуда небольшое приложение для стран отдыха получает столько данных?
Все это делается с помощью API. Серверный API похож на веб-сервер, но, вместо обслуживания веб-приложения, он передает данные другим приложениям, чтобы они могли их использовать. Приложение для стран отдыха использует Rest Countries API для получения данных обо всех странах. Посетив эту конечную точку, вы получите большой объем данных вместо html-страницы.
Конечную точку можно считать целевым пунктом назначения. Мы можем посетить его, чтобы получить данные или выполнить какое-либо другое действие. Например, приведенный выше API предлагает множество конечных точек для получения различных фрагментов данных. Чтобы понять, что я имею в виду, посетите следующие конечные точки, которые позволят вам получить данные только об отдельных странах.
В серверном API может быть любое количество конечных точек. Но при этом API должен соответствовать хорошо продуманной архитектуре, чтобы быть доступным и поддерживаемым в крупномасштабном проекте. Стандартный протокол для веб-API заключается в использовании архитектуры RESTful.
Подытожим сказанное к этому моменту:
Теперь перейдем к следующему разделу.
Хостинг-провайдеры и домены
Так называемый веб-сервер, о котором вы уже знаете, находится только в вашем локальном компьютере. Вы можете запустить его в фоновом режиме и открыть в браузере, например в локальном хостинге localhost:8000, чтобы зайти на свой веб-сайт. 8000 — это номер порта. Но если вы хотите, чтобы ваш сервер был доступен всему миру, вам следует разместить его не на своем компьютере, а где-то в другом месте. Для этого нужно развернуть ваше приложение у хостинг-провайдера, который будет запускать ваш сервер в режиме 24/7 на своих огромных машинах.
Там вам также понадобится доменное имя, чтобы люди могли получить доступ к вашему серверу в Интернете, потому что теперь до него нельзя добраться через локальный хостинг. Доменное имя — это часть URL-адреса *.com. Например, в URL-адресе моего веб-сайта https://blog.sapinder.dev доменное имя sapinder.dev, где dev — это домен верхнего уровня, такой же, как com, org и т. д. Вам также стоит знать, что blog — это поддомен.
Интересный факт: у вас может быть любое количество поддоменов, как только вы станете владельцем доменного имени. Кроме того, www тоже является поддоменом!
Помимо покупки доменного имени, вы также должны регулярно платить своим хостинг-провайдерам, потому что они управляют вашим сервером в режиме 24/7. Но большинство хостинг-провайдеров предлагают бесплатные услуги с ограниченными ресурсами, и вы можете обновлять свои аккаунты по мере роста своих требований. Бесплатные сервисы, предоставляющие бесплатные домены, — то, что нужно для новичков! Главное предостережение заключается в том, что такие домены заканчивается по умолчанию доменным именем провайдера. Например,*.herokuapp.com от Heroku, *.netlify.app от Netlify и так далее. Если вы хотите получить собственное доменное имя, чтобы придать проекту черты профессионализма, вам придется это имя купить.
Управление версиями
Поддержка кода также очень важна, поскольку это единственный способ выявить и исправить накопившиеся ошибки, а также добавить новые функции в приложение. Системы управления версиями (Version Control Systems, или VSC) позволяют отслеживать и добавлять изменения. Они способны даже осуществить полный возврат приложения к предыдущей версии! Настолько мощными могут быть эти системы.
Наиболее широко используемой VSC является Git. Вот несколько понятий, которые вы должны знать при использовании Git:
Удаленные репозитории
Какова вероятность того, что код вашего приложения, сохраненный в каком-либо месте вашей локальной системы, будет всегда в безопасности? Что делать, если он будет удален или к нему получит доступ кто-то посторонний? Вы поняли: вам нужно хранить его в Интернете, чтобы только вы могли получить к нему доступ в любое время и в любой системе. Если каким-то образом вы потеряете локальный репозиторий, то сможете клонировать его из вашего удаленного репозитория вместе со всей историей git!
Удаленные репозитории не всегда являются частными, но при этом остаются общедоступными. Они известны как проекты с открытым кодом, в которые может внести свой вклад любой желающий, потому что их исходный код (или просто код) доступен всем разработчикам сообщества. К примеру, Firefox, Node.js, VLC-плеер, Linux — это проекты с открытым исходным кодом, в которые может внести свой вклад любой желающий.
Среди облачных/удаленных платформ репозиториев можно выделить две наиболее популярные — Github и Gitlab, причем первая является ведущим решением. Это что-то вроде Facebook для разработчиков и программистов, которые демонстрируют свои проекты, а также поддерживают их.
Делаем неубиваемый сайт: статика и динамика
Немного об устройстве сайтов.
Это статья об устройстве сайтов и интернета. Она будет полезна тем, кто хочет заниматься веб-разработкой, строить сверхбыстрые сайты и неубиваемую инфраструктуру.
Что значит «зайти на сайт»
Когда вы заходите на сайт, на самом деле вы никуда не заходите. Вы делаете запрос на некий удалённый сервер, а он вам присылает в ответ документ. Документ прилетает в ваш браузер, браузер его анализирует и рисует вам веб-страничку. Вам кажется, что вы пришли в интернет, но на самом деле это кусочек интернета пришёл к вам.
Когда вы кликаете по ссылке, вам кажется, что вы переместились с одной страницы на другую. На самом деле вы отправили новый запрос на сервер, получили ответ, браузер снова нарисовал страницу. Вы никуда не переместились, вы лишь получили новый кусочек интернета.
Теперь вопрос — откуда появились эти кусочки интернета, которые вам прислали?
Статичные сайты
Изначально сайты в интернете хранились и отдавались так:
Если вам на сайте нужно было иметь 30 страниц, вам нужно было иметь 30 документов, которые физически будут лежать на сервере.
Например, вот так выглядят документы сайта, на котором мы пилим наши проектики — mihailmaximov.ru. В «корне» нам доступен только документ index.html — это главная страница. Ещё слева видны папки с проектами. Чтобы завести новый проект, мы делаем новую папку и складываем в неё нужные документы.
Что нам даёт статичный сайт (и в чём мешает)
✅ Сайт работает молниеносно — отдавать заранее заготовленные документы очень легко, с этим справится даже маломощный компьютер типа Arduino. А мощные веб-сервера — и подавно: странички будут прилетать мгновенно.
✅ Сайт очень трудно взломать: единственный способ навредить сайту — это получить прямой доступ в файловую систему сервера и вручную напакостить в каждом файле (или стереть их). Это не невозможно, но в современных реалиях довольно трудно.
✅ Сайт элементарно переносить: если сломался один сервер, просто копируете файлы из резервной копии на новый сервер, и сайт работает как раньше. Никакой дополнительной настройки, кроме перенаправления адреса для запросов. Никаких баз данных, версий движка и глобальных переменных.
✅ Дёшево хостить: услуга хостинга файлов — самая дешёвая из всех, потому что хранение и раздача файлов расходуют мало ресурсов.
❌ Сайт неудобно обновлять: чтобы обновить информацию на какой-то странице, нужно отредактировать нужный файл и загрузить его на сервер. Если нужно внести изменения в 30 страниц, эту операцию придётся повторить 30 раз. Например, если вы хотите добавить новый пункт меню.
❌ Сайт не подстраивается под пользователя: статичный сайт может только выдавать вам заранее заготовленную информацию. Если нужно сформировать корзину покупок или поискать что-то конкретно под ваш запрос, статики недостаточно. Исключение — скрипты, которые можно выполнить прямо в браузере.
👉 Статичные сайты идеальны для сайтов-визиток или сайтов-книг, где один раз написал информацию и она там долго лежит.
Динамические сайты
Чтобы обойти ограничения статичных сайтов, придумали такую схему:
Если в статичных сайтах сервер выполнял роль работника архива, то в динамических — это такой официант: он принимает у вас запрос, относит на кухню, даёт задание повару, а когда блюдо готово, приносит вам.
На самом сервере больше не хранятся как таковые документы — теперь они собираются под индивидуальный запрос из существующих заготовок.
Например, в базе данных лежит тысяча товаров, а вы просите показать 10 самых популярных. Не проблема: шеф-повар делает запрос в базу данных, получает ответ, собирает под вас страничку и отдаёт.
Когда сайт динамический, его фактические файлы никак не связаны с его содержимым. Например, на скриншоте — папка системы динамических сайтов WordPress. Каждый из 14 файлов — это, условно говоря, повар, который делает свою часть работы. Но эти 14 поваров вместе могут подать нам бесконечное количество динамических документов. То, что здесь 14 файлов, никак не связано с тем, сколько и каких страниц может выдать наш сайт.
Что даёт динамический сайт (и в чём мешает)
✅ Содержимое сайта можно адаптировать под пользователя: страницы заказов, личные кабинеты, результаты поиска, соцсети, форумы, комментарии — всё это динамические продукты. В статике реализовать всё это невозможно.
✅ Простое обновление и дополнение: при желании разработчик может сделать удобный интерфейс добавления материалов на сайт — как в тех же соцсетях. Вам не нужно загружать файлик в «Фейсбук» или VK.com, вы просто набираете текст прямо в браузере.
✅ Интеграции: сайт может сам обращаться к базам данных, спрашивать данные у других сервисов, на лету подгружать ваши данные из разных источников.
❌ Сайт работает медленнее: сборка страниц на лету требует больше времени, чем отдача документа. Счёт идёт на десятые доли секунды, но когда у тебя очень много пользователей, это может быть проблемой.
❌ Есть пространство для взлома: хакер может завернуть в свой запрос какой-нибудь вредоносный код (в духе «повар, приготовь мне торт с ключами от твоей квартиры»). Если специально не предусматривать такие атаки, можно получить дыру в безопасности.
❌ Непросто обслуживать и переносить. Динамические сайты требуют установки на сервер особенного сборочного софта (например, PHP или Python). Этот софт должен быть определённой версии, с определённым набором модулей. Их нужно правильно между собой увязать. Это не так просто, как скопировать файлики и перекинуть на другой сервер.
Гибридный вариант: кеширование
Допустим, нам нужно совместить плюсы двух подходов. Мы хотим, чтобы сайт был предельно быстрый и взломостойкий, но при этом его было легко обновлять. На этот случай придумали кеширование.
Кэширование похоже на отдел кулинарии в супермаркете: повара заранее наготовили салатов и нажарили курицы, а мы берём эту еду с прилавка. С одной стороны, не нужно ждать, что повар приготовит курицу конкретно под нас. С другой стороны, эта курица может быть не самой свежей.
Кэширование работает похожим образом: берётся движок сайта, на его основе генерируется куча документов. И дальше эта куча ведёт себя как статичный сайт. Когда это может быть полезно:
Что дальше
На основе идеи кеширования придумали технологию генерации статичных сайтов. Это когда у вас есть куча исходного текста (например, инструкция от сложной системы). Вы говорите: «Оформи мне эту кучу текста по такому-то шаблону». Специальный генератор оформляет эту кучу, а вы получаете пачку статичных документов, которые работают как молниеносный статичный сайт.
В следующем выпуске поговорим про такие генераторы статических сайтов.