#javascript #terminology
#javascript #терминология
Вопрос:
В настоящее время я создаю проект, который является создателем опроса. Я создал Rest API на серверной части с помощью pure Node.js , и я также работаю над интерфейсом. Очевидно, что визуализируемые страницы должны отображаться в зависимости от того, зарегистрирован пользователь или нет, Текущего опроса и т. Д. Обычно я использую Express.js и интегрируйте движок шаблонов, такой как Pug. Однако этот проект был разработан так, чтобы быть как можно менее зависимым, поэтому никаких движков шаблонов. Вместо этого я просто отправляю «статические» HTML-файлы клиенту, когда пользователь отправляет запрос. Затем во внешнем интерфейсе я использую строки шаблонов для «заполнения» HTML следующим образом:
document.querySelector('cta').insertAdjacentHTML('beforeend', `<div class="login" style=${isLoggedIn? "display: none;" : ""}`); // etc.
Это заставило меня задуматься, действительно ли я создаю динамический веб-сайт. Технически, я «динамически» генерирую HTML?
Но, похоже, есть противоречивые сообщения из определения Википедии и курса Udemy, оба из которых, похоже, говорят, что динамические веб-сайты создаются на стороне сервера следующим образом:
When user hits request:
Backend builds template --> compiled to html --> file served to user
То, как я это делаю, выглядит так:
Html file served --> JavaScript generates html
Здесь очень важна терминология — мой веб-сайт динамический или статический?
Комментарии:
1. Вы используете JS для извлечения динамических данных. Это похоже на одностраничное приложение. Для этого также существуют специальные фреймворки и библиотеки, такие как react, vue, angular. VanillaJS, подобные вашему примеру, тоже хороши, но кодите умно, иначе вы будете работать медленно в долгосрочной перспективе
Ответ №1:
TLDR: это гибридная страница. Если вы не заботитесь о SEO, может быть излишним беспокоиться о таких вещах, просто делайте так, как вам удобно.
Итак, ваш способ мышления верен, если вы предоставляете клиентам страницу, содержимое которой никогда не меняется на стороне клиента — это статическая страница. Вы можете показывать / скрывать существующие предварительно отображаемые элементы (например, изменение style атрибута из display: none; ). Любые манипуляции с теневым DOM или добавление HTML-элементов во время выполнения переводят страницу из «статической» в динамическую или гибридную страницу.
Далее, если вы переходите на новую страницу на своем веб-сайте и видите, что браузер извлекает новый .html файл для отображения новой страницы, это отметка для статической страницы. Но, если содержимое выбранной страницы впоследствии изменяется скриптом вашего веб-сайта на стороне клиента, страница больше не может называться «статической», она больше похожа на гибридную или динамическую страницу. Повторный рендеринг одной и той же страницы касается одностраничных приложений, все страницы которых являются чисто динамическими страницами.
Основной момент, о котором мы заботимся, является ли это статической страницей, динамической страницей или гибридной страницей, — это оптимизация SEO. Веб-сканеры анализируют содержимое вашей страницы, чтобы определить, о чем ваша страница, Чтобы позже показать ее в Google, Bing и т. Д. Сканеры могут (и в основном будут) анализировать ваш динамический контент немного неожиданным для вас образом, поэтому часть вашей целевой аудитории рискует никогда не увидеть вашу страницу. Таким образом, если вам нужно, чтобы поисковые роботы анализировали вашу страницу как «интернет-магазин игрушек», вы должны получать все рекламные и описательные материалы с сервера и никогда не изменять их впоследствии. Если вы создаете что-то вроде личного кабинета пользователя, вы можете не беспокоиться о таких вещах и просто генерировать содержимое на стороне клиента.
Комментарии:
1. @expressjs123 кроме того, еще немного о различиях статических и динамических страниц:
2. вы можете учитывать размер страницы. Для SPA это обычный материал, если единственная страница занимает до 5 МБ и более. Некоторые приложения не заботятся об этом, если страница предназначена для «сильных» ПК или является игровой страницей и т. Д. Но если это интернет-магазин, ваша страница должна занимать как можно меньше ресурсов, поэтому большинство интернет-магазинов представляют собой гибридные веб-сайты. Существует небольшое количество чисто статических веб-сайтов; Википедия — самый популярный пример статического веб-сайта. Вы можете попытаться проанализировать, насколько быстро он обслуживается.
Ответ №2:
Пока он работает без JS, я бы сказал, что это статический веб-сайт с прогрессивным улучшением, поскольку страницы не генерируются сервером при каждом запросе, а затем JS (если включен) используется для предоставления дополнительных несущественных функций или функциональности.
Ответ №3:
Статический веб-сайт содержит веб-страницы с фиксированным содержимым. Каждая страница закодирована в HTML и отображает одну и ту же информацию для каждого посетителя. Статические сайты — это самый простой тип веб-сайтов, и их проще всего создавать. В отличие от динамических веб-сайтов, они не требуют никакого веб-программирования или проектирования баз данных. Статический сайт можно создать, просто создав несколько HTML-страниц и опубликовав их на веб-сервере.
Итак, на мой взгляд, простой html без какого-либо интерфейса, любое серверное поколение — это статический веб-сайт, то, что вы описываете, — это динамический веб-сайт. Итак, это что-то очень простое, считайте это сгенерированным pdf, вы не можете его изменить, чтобы изменить его, вам нужно будет перейти к файлу, отредактировать его, сохранить, а затем опубликовать для конечных пользователей
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My static website</title>
</head>
<body>
<p> Static means no process </p>
</body>
</html>