Создание DOM-элементов из строк обеспечивает:
Динамическое создание контента – можно добавлять новые элементы на страницу без перезагрузки.
Гибкость – можно легко генерировать HTML на основе данных, полученных от пользователя или с сервера.
Шаблонизацию – поскольку упрощает создание повторяющихся структур HTML.
Управление интерфейсом – помогает создавать интерактивные элементы, которые реагируют на действия пользователя.
Почти все современные JavaScript-фреймворки и библиотеки предоставляют удобные инструменты для создания DOM-элементов из HTML-строк – это одна из основных задач, которую они решают. Если же нужно обойтись возможностями ванильного JavaScript, то это можно сделать несколькими разными способами.
innerHTML
Это самый известный метод: он позволяет вставить строку HTML внутрь атрибута innerHTML контейнера и затем получить доступ к созданному узлу DOM. Однако он может обрабатывать только допустимые узлы HTML – к примеру, попытка вставить элемент <tr> в <div> приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML-строках, что делает его безопасным при работе с непроверенным содержимым.
innerHTML + template
Использование тега <template> снимает ограничения на содержимое – он может содержать любую HTML-структуру, включая элементы, связанные с таблицами – <tr> и <td>.
insertAdjacentHTML
Как и innerHTML, этот метод обрабатывает только допустимые HTML-узлы и не выполняет скрипты.
DOMParser
Этот метод работает медленнее остальных, поскольку он разбирает строку, создавая полный HTML-документ, и только потом извлекает узел из документа. Он также может обрабатывать только допустимые узлы HTML и не выполняет скрипты.
Range.createContextualFragment
Самый простой, но не безопасный метод – выполняет скрипты. Поэтому при его использовании необходимо очищать данные для защиты от XSS – например, с помощью DOMPurify.
🦮 Интерактивные гайды
Гайд по SVG
SVG-графика предоставляет нам стандартизированный способ создания изображений и иконок, которые можно отображать в любом размере без потери качества изображения. Но разобраться в методах SVG не так-то просто. На помощь придет интерактивный справочник SSSVG.
SSSVG поможет быстро понять принцип работы всех основных атрибутов
К слову, возможности SVG простираются за пределы создания векторных картинок и лого: энтузиасты умудрились сделать «Тетрис» в виде одного SVG-файла.
Этот «Тетрис» сделан полностью на SVG
Гайд по :has() в CSS
Псевдокласс :has() открывает новые возможности для творческих экспериментов в CSS, позволяя создавать сложные и интерактивные дизайны без использования JavaScript. Это первый родительский селектор, позволяющий стилизовать элемент в зависимости от его содержимого. Все невероятные возможности :has() продемонстрированы в интерактивном гайде CSS :has() Interactive Guide.
В гайде подробно разобраны десятки примеров использования :has()
🪚 Инструменты
Plasmic – опенсорсный визуальный конструктор для создания сайтов и веб-приложений на React со множеством функций:
Можно интегрировать с существующими React-проектами.
Можно использовать как CMS.
Позволяет подключать разные источники данных и бэкенд-сервисы.
Совместим с Next.js и Gatsby.
Поддерживает оптимизацию производительности, включая статическую генерацию сайтов и оптимизацию изображений.
article-extractor – эта библиотека Node.js извлекает текст статей, метаданные и ссылки на изображения по URL.
Протестировать article-extractor можно на демо-сайте
Turndown – Node.js-библиотека для конвертирования HTML в Markdown. Отлично работает в связке с предыдущим инструментом.
article-extractor + turndown подготовят контент для LLM
15 полезных расширений VS Code для фронтендера
Auto Rename Tag – при переименовании HTML-тега автоматически обновляет парный тег.
Code Spell Checker – находит опечатки в именах переменных и других идентификаторах.
DotEnv – добавляет цветовое оформление и улучшает читаемость файлов с переменными окружения.
Docker – добавляет вкладку для удобной работы с контейнерами, если вы используете Docker.
ESLint – выявляет проблемы в коде (нарушения форматирования или потенциальные ошибки) на лету.
Figma – позволяет встраивать и просматривать файлы дизайна Figma прямо в VS Code.
GitHub Copilot – предлагает AI-генерируемые подсказки во время набора кода.
Copilot Chat – предоставляет окно чата в стиле ChatGPT прямо в редакторе.
GraphQL – набор расширений, упрощающих работу с GraphQL.
Import Cost – показывает размер импортируемых пакетов, помогая выявить потенциальное раздувание кода.
Live Server – запускает локальный сервер с автоматической перезагрузкой, что удобно для предварительного просмотра изменений.
Live Share – позволяет программировать в команде с другими разработчиками, работая в одном редакторе в реальном времени.
Markdown Preview Enhanced – предоставляет живой предпросмотр Markdown-файлов во время редактирования.
Notes – удобный блокнот для хранения заметок по проекту, инструкций по настройке и т. д.
Hinty – предоставляет динамические подсказки в реальном времени. Помогает избегать повторения распространенных ошибок и соблюдать стандарты написания кода в команде.
⚛️ Как выбрать оптимальную стратегию рендеринга
Рендеринг – это процесс превращения кода в контент. За годы развития интернета эта технология прошла долгий путь – от формирования простейших HTML-страниц на стороне сервера до динамического обновления интерактивных приложений без перезагрузки. Сейчас в ходу несколько методов рендеринга:
Генерация статических сайтов (предварительно генерирует HTML-страницы во время сборки приложения).
Генерация на стороне сервера (генерирует полный HTML для страницы при каждом запросе).
Генерация на стороне клиента (использует JavaScript для рендеринга контента в браузере пользователя).
Инкрементальная статическая регенерация (позволяет обновлять отдельные страницы после сборки сайта).
Частичный пререндеринг (экспериментальный подход, который стремится автоматически оптимизировать стратегии рендеринга).
Эти методы по-разному подходят к оптимизации работы приложения, SEO и пользовательского опыта. Их можно комбинировать – это позволяет по максимуму использовать сильные стороны, нивелировать недостатки и обеспечить оптимальный баланс производительности, свежести данных и интерактивности. Разработчики Vercel (эта компания создала Next.js) написали подробную статью о преимуществах и недостатках каждого подхода и о том, как их лучше комбинировать.
Генератор статических сайтов (SSG)
Идеально подходит для страниц с редко меняющимся контентом, макетов сайтов, документации и лендингов, для которых важна максимальная скорость загрузки.
Самая быстрая загрузка страниц.
Отличные показатели SEO.
Самая низкая нагрузка на сервер.
Низкие затраты на инфраструктуру.
Рендеринг на стороне сервера (SSR)
Идеально подходит для персонализированных дашбордов, лент соцсетей и визуализации данных в реальном времени.
Всегда отдает свежий, актуальный контент.
Показатели SEO и времени загрузки данных лучше, чем при рендеринге на стороне клиента.
Загрузка происходит медленнее, чем при использовании SSG или ISR.
Показатель времени до первого байта (TTFB) может быть неудовлетворительным.
Потребляет больше серверных ресурсов.
Инкрементальная статическая регенерация (ISR)
Подходит для случаев, когда сборка с SSG занимает слишком много времени. Используется для страниц продуктов в e-commerce, новостных порталов и крупных контентных сайтов.
Сохраняет быструю загрузку страниц, как у SSG.
Позволяет обновлять контент по требованию без полной пересборки.
Эффективно масштабируется на большое количество страниц.
Может быть экономичнее, чем SSR, в некоторых случаях.
Рендеринг на стороне клиента (CSR)
Подходит для интерактивных элементов страницы, требующих немедленной обратной связи, админ-панелей с данными в реальном времени и приложений типа Notion, которые непрерывно синхронизируют вводимые пользователем данные с сервером.
Самый интерактивный пользовательский опыт.
Плавные переходы между состояниями приложения.
Взаимодействие с внешними данными в реальном времени.
Начальная загрузка может быть медленнее из-за необходимости загрузки JavaScript-бандла.
Оптимизация Core Web Vitals может быть сложной.
Требует тщательного управления состоянием на клиенте.
Частичный пререндеринг (PPR)
PPR призван объединить преимущества других стратегий рендеринга и потенциально может стать стандартным подходом для веб-приложений в будущем.
Мгновенная загрузка страницы (как у SSG).
Плавная потоковая передача динамического контента.
Улучшенная производительность с меньшими затратами на разработку.
Выбор стратегии рендеринга
При выборе стратегии рендеринга нужно учитывать следующие факторы.
Как часто обновляется контент?
Статический контент лучше всего обрабатывать генератором статических сайтов.
Для вывода периодически обновляемого контента отлично подходит инкрементальная статическая регенерация.
Обновление контента в реальном времени требует серверного или клиентского рендеринга.
Для повышения производительности нужно стремиться к максимальному использованию SSG и ISR, прибегая к SSR только в случае необходимости получения абсолютно свежих данных.
Насколько важно продвижение страницы в поисковых системах?
Хотя Google может рендерить JavaScript на стороне клиента, ключевые показатели Core Web Vitals все еще сильно влияют на ранжирование.
Высоких показателей CWV легче добиться на статических и серверных страницах, чем на страницах с клиентской загрузкой внешних данных.
Насколько активно пользователь будет взаимодействовать со страницей?
Если страница в основном статическая с минимальным взаимодействием, используйте SSG или ISR с небольшим количеством клиентского JavaScript.
В противном случае может потребоваться SSR (с гидратацией на стороне клиента).
Каковы требования к скорости загрузки?
Для максимально быстрой начальной загрузки используйте SSG или ISR с редкой инвалидацией.
Чтобы сбалансировать свежесть данных и скорость, используйте ISR или SSR (для актуальных данных).
CSR может обеспечить данные в реальном времени, но часто за счет начальной загрузки.
Нужно ли персонализировать контент?
Если вам нужен персонализированный контент, скорее всего, потребуется SSR или CSR.
ISR может работать в случаях, когда можно кэшировать персонализированный контент, например, настройки веб-приложения.
SSG не позволяет персонализировать контент.
Автор рассылки: Наталья Кайда
