пїЅпїЅпїЅпїЅ пїЅпїЅ пїЅпїЅпїЅпїЅпїЅ
По вашему запросу ничего не найдено :(
Убедитесь, что запрос написан правильно, или посмотрите другие
наши статьи:
Формы широко используются в веб-приложениях: одни для сбора данных о пользователях и их электронных адресах, другие — для выполнения онлайн-транзакций. Например, веб-формы могут использоваться для подачи заявки на автокредит или для заказа пиццы. Важно, чтобы собранные данные были очищены, правильно отформатированы и свободны от вредоносного кода. Этот процесс, называемый валидацией формы, необходим для проверки правильности ввода, соответствия допустимым диапазонам (например, для дат) и предотвращения SQL-инъекций. Некорректные или отсутствующие данные могут привести к ошибкам в API.
Какие существуют типы валидации форм?
Валидация форм может выполняться как на стороне клиента, так и на стороне сервера.
Валидация на стороне клиента осуществляется с использованием атрибутов HTML5 и JavaScript на стороне клиента. Например, вы могли заметить, что в некоторых формах, как только вы вводите недействительный адрес электронной почты, форма сразу же выдает ошибку «Пожалуйста, введите действительный адрес электронной почты». Этот тип валидации обычно выполняется с помощью JavaScript на стороне клиента.
В других случаях, когда вы заполняете форму и вводите данные, такие как номер кредитной карты, может появиться экран загрузки, а затем сообщение об ошибке «Этот кредитный card недействителен». В этом случае форма вызывает серверный код и возвращает ошибку валидации после выполнения дополнительных проверок кредитной карты. Эта валидация, при которой происходит вызов серверного кода, называется валидацией на стороне сервера.
Какие данные должны быть проверены? Валидация формы необходима каждый раз, когда вы принимаете данные от пользователя. Это может включать:
Проверку формата полей, таких как адрес электронной почты, номер телефона, почтовый индекс, имя, пароль.
Проверку обязательных полей.
Проверку типа данных, например, строка или число для полей, таких как номер социального страхования.
Убедитесь, что введенное значение является допустимым, например, страна, дата и так далее.
Как настроить валидацию на стороне клиента? Валидация на стороне клиента может быть выполнена двумя способами:
Использование функциональности HTML5
Использование JavaScript
Как настроить валидацию с помощью функциональности HTML5? HTML5 предоставляет набор атрибутов для помощи валидации данных. Вот некоторые распространенные случаи валидации:
Сделать поля обязательными с помощью атрибута required.
Ограничить длину данных:
minlength, maxlength для текстовых данных
min и max для максимального значения числового типа
Ограничение типа данных с использованием атрибута type:
Указание шаблонов данных с помощью атрибута pattern:
Определяет регулярное выражение, которому должны соответствовать введенные данные
Когда значение ввода соответствует вышеуказанной валидации HTML5, ему присваивается псевдокласс :valid, и :invalid, если это не так.
Рассмотрим пример:
Здесь у нас есть два обязательных поля — Имя и Фамилия. Если вы пропустите одно из этих полей и нажмете «Отправить», вы получите сообщение «Пожалуйста, заполните это поле». Это валидация с использованием встроенных возможностей HTML5.
Как настроить валидацию с помощью JavaScript? При реализации валидации формы нужно учитывать несколько моментов:
Что считается "действительными" данными? Это поможет определить формат, длину, обязательные поля и тип данных.
Что происходит при вводе недействительных данных? Это поможет определить пользовательский опыт валидации — показывать ли сообщение об ошибке прямо в форме или в верхней части формы, насколько подробно должно быть сообщение об ошибке, следует ли отправлять форму все равно, нужно ли отслеживать формат данных и так далее.
Валидацию на стороне клиента можно выполнять двумя способами:
Встраиваемая валидация с помощью JavaScript
HTML5 Constraint Validation API
Встраиваемая валидация с помощью JavaScript:
В этом примере мы проверяем обязательные поля с помощью JavaScript. Если обязательное поле отсутствует, мы используем CSS для отображения сообщения об ошибке.
Атрибуты Aria изменяются соответствующим образом для обозначения ошибки. Используя CSS для показа/скрытия ошибки, мы уменьшаем количество манипуляций с DOM. Сообщение об ошибке предоставляется в контексте, что делает пользовательский опыт интуитивным.
HTML5 Constraint Validation API: Атрибуты required и pattern HTML могут помочь в выполнении базовой валидации. Но если вам нужна более сложная валидация или подробные сообщения об ошибках, вы можете использовать Constraint Validation API.
Некоторые методы, предоставляемые этим API:
checkValidity
setCustomValidity
reportValidity
Следующие свойства полезны:
validity
validationMessage
willValidate
В этом примере мы будем использовать методы HTML5, такие как required и length, совместно с Constraint Validation API для предоставления подробных сообщений об ошибках.
Не забывайте о валидации на стороне сервера. Валидация на стороне клиента — это не единственная проверка, которую следует выполнить. Необходимо также проверять данные, полученные от клиента, на стороне сервера, чтобы убедиться, что данные соответствуют ожидаемым.
Также можно использовать валидацию на стороне сервера для выполнения бизнес-логики, которая не должна находиться на стороне клиента.
Лучшие практики валидации форм:
Всегда выполняйте валидацию на стороне сервера, поскольку злоумышленники могут обойти валидацию на стороне клиента.
Предоставляйте подробные сообщения об ошибках в контексте поля, которое вызвало ошибку.
Предоставляйте пример того, каким должно быть значение данных в случае сообщения об ошибке, например, «Email не соответствует формату - test@example.com».
Избегайте использования страниц ошибок, которые требуют перенаправления. Это создает плохой пользовательский опыт и заставляет пользователя возвращаться на предыдущую страницу для исправления формы, теряя контекст.
Всегда отмечайте обязательные поля.
WordPress – это самая популярная в мире система управления информационным наполнением, которая обеспечивает работу около 38% всех веб-сайтов. Система управления информационным наполнением, или CMS (Content Management System), - это программное обеспечение, с помощью которого пользователи могут создавать и управлять информационным наполнением веб-сайта, имея при это минимальный уровень технических знаний.
«Базовое программное обеспечение WordPress – это простой и предсказуемый инструмент, поэтому приступить к работе с ним не составит труда. Он также предлагает мощные функции для развития и успеха», - WordPress.com.
Проще говоря, WordPress – это надежный способ создать мощный веб-сайт.
WordPress легко установить, и он поставляется с уже встроенным функциональным наполнением. В основных функциях WordPress есть все, что вам нужно для создания веб-сайта со страницами, публикациями в блоге, навигацией и управлением пользователями.
Но настоящая сила WordPress заключается в том, что с его помощью вы можете быстро создать красивый веб-сайт, используя встроенные темы, а также добавить потрясающие функции с помощью дополнительных плагинов.
В этой статье мы рассмотрим основы WordPress, в том числе:
Историю создания и популярности WordPress
Создание основ с помощью Pages (страницы) и Posts (публикации)
Усовершенствование дизайна с помощью Themes (темы)
Расширение функциональных возможностей с помощью Plugins (плагины)
Почему WordPress так популярен?
WordPress используется примерно на 500 000 000 веб-сайтов, к ним относятся и такие легко узнаваемые названия, как TechCrunch, The New Yorker, Variety, официальный сайт Швеции и The Walt Disney Company.
Маленькая подсказка
: для того, чтобы узнать, использует ли сайт WordPress, вы можете просмотреть исходный код страницы и выполнить поиск по «WordPress» или «wp-», и если там окажутся такие каталоги, как «wp-includes» или «wp-content», то это значит, что сайт использует WordPress.
Популярность WordPress до сих пор растет с космической скоростью. Ежедневно создается более 500 новых сайтов.
За последние три года доля WordPress на рынке программного обеспечения, обеспечивающего работу веб-сайтов, выросла примерно на 8% - с 27,3% в 2017 году до 35,2% в 2020 году.
Поразительно, но WordPress обеспечивает работу такого количества веб-сайтов, что веб-сайтов, которые не использую CMS, просто-напросто меньше:
1 янв
2011
1 янв
2012
1 янв
2013
1 янв
2014
1 янв
2015
1 янв
2016
1 янв
2017
1 янв
2018
1 янв
2019
1 янв
2020
19 нояб
2020
Без CMS
76.4%
71.0%
68.2%
64.8%
61.7%
56.6%
53.3%
51.3%
45.3%
43.1%
38.8%
WordPress
13.1%
15.8%
17.4%
21.0%
23.3%
25.6%
27.3%
29.2%
32.7%
35.4%
39.0%
Процент всех веб-сайтов, которые не используют CMS, в сравнении с процентом сайтов, которые используют WordPress. Источник: w3techs
Один из основных факторов популярности WordPress – бесплатный доступ. WordPress лицензируется в соответствии с GPLv2, а это значит, что его может использовать и модифицировать кто угодно.
По некоторым оценкам, WordPress обязан сотне лет работы разработчиков, внесших свой вклад в проект с открытым исходным кодом.
Основы WordPress – Pages и Posts
Настройка веб-сайта WordPress состоит из следующих пунктов: выбор имени домена, поиск поставщика услуг хостинга и установка WordPress.
Когда вы установите WordPress, вы получите полностью функционирующий веб-сайт. Однако для того, чтобы раскрыть всю мощь WordPress, нужно установить темы, плагины и настроить сайт.
Но давайте начнем с основ.
После того, как вы установите WordPress, вас попросят ввести имя пользователя и пароль. Эти учетные данные вы можете использовать для доступа к админ-панели вашего веб-сайта. Доступ к ней можно получить по следующему адресу:
yourdomainname.com
/
wp-admin
.
Раздел администрирования выглядит следующим образом:
Админ-панель WordPress. Источник: WordPress
Как вы можете видеть, у WordPress есть функции, доступ к которым осуществляется через навигационную панель слева. В рамках данной статьи давайте рассмотрим два немаловажных типа информационного наполнения: Pages (страницы) и Posts (публикации).
Pages в WordPress
С помощью Pages можно быстро создавать веб-страницы. Добавляя этот тип наполнения, вы можете создавать страницы по следующему адресу:
yourdomain.com
/
newpage
.
У WordPress есть встроенный редактор, который можно использовать для того, чтобы быстро оформить текст и мультимедиа в красивую веб-страницу. Редактор состоит из «блоков», так что вместо того, чтобы беспокоится о выравнивании и структурировании наполнения, вы можете полностью сосредоточиться на его создании.
Ниже представлено то, как выглядит редактирование наполнения и добавление блоков в WordPress.
Легко добавляйте разные «блоки», например, код, в ваши страницы и публикации.
Несмотря на то, что редактор WordPress сам по себе хорош, его все же можно усовершенствовать с помощью плагинов и даже заменить построителями наполнения, которые упрощают зрительное перетаскивание наполнения, например, Elementor, Visual Composer или WP Bakery. Прелесть WordPress в том, что его можно настраивать бесконечно.
Какой бы редактор вы ни выбрали, с помощью встроенного в WordPress раздела Pages вы сможете с легкостью создавать динамичные и красивые веб-страницы.
Posts в WordPress
У раздела Posts тот же редактор, что и у раздела Pages. Разница лишь в том, что эта категория информационного наполнения создает публикации в блоге. В основе WordPress лежит именно Posts, поскольку изначально программное обеспечение создавалось как инструмент для ведения блога.
Posts использует тот же редактор наполнения, что и Pages, так что создание страниц и публикаций выполняется по одной схеме.
Главное различие между Pages и Posts – объем. Допустим, самый обычный веб-сайт для малого бизнеса имеет 5-10 основных страниц (Главная страница, О нас, Контакты, Услуги и т.д.). Но при этом та же самая компания может иметь сотни публикаций в блоге.
Для того, чтобы управлять большим количеством публикаций в WordPress, вы можете распределять их по категориям и управлять иерархией.
Пример категорий и иерархий для организации публикаций.
Вы можете добавлять и вкладывать сколько угодно категорий. Если вы используете категории, то наполнение на вашем веб-сайте может отображаться в иерархическом виде, например, yourdomainname.com/guides/best-business-practices/yourcontent.
С учетом того, что WordPress обладает широкими возможностями настройки, эту структуру «постоянных ссылок» также можно с легкостью поменять во вкладке Settings (Настройки).
Пользовательские типы публикаций (дополнительно)
У WordPress есть два основных втроенных типа наполнения (Posts и Pages), но большое количество пользователей также хотят иметь возможность настроить свои собственные типы.
Например, если вы хотите создать туристический веб-сайт с каталогом отелей, то отличным решением будет добавить свой тип публикаций под названием «Hotels» (Отели).
Такие специальные типы публикаций также используют встроенный редактор WordPress, категории и другие функции Posts и Pages. По сути, пользовательские типы публикаций – это способ быстро разработать динамический веб-сайт.
Пользовательские типы публикаций можно добавить с помощью плагина или с помощью некоторого кода, который вы должны добавить в основной файл functions.php. Такая возможность добавлять что-то свое показывает, что WordPress
имеет весьма внушительные возможности настройки, а также является отличной платформой для развития ваших навыков программирования.
Пользовательские публикации, такие как Hotels и Products, могут быть добавлены в WordPress с целью улучшения организации наполнения и расширения функциональных возможностей вашего сайта WordPress.
Themes в WordPress: красивый сайт – это легко
После того, как вы настроите ваш веб-сайт WordPress, вы должны выбрать темы (Themes).
Тема – это набор шаблонов и таблиц стилей, которые определяют внешний вид и функциональные возможности веб-сайта WordPress.
У WordPress есть предварительно загруженная стандартная тема, но, на самом деле, лишь очень немногие веб-сайты ее используют (иначе сотни миллионов сайтов выглядели бы одинаково!)
Темы дают возможность пользователям WordPress быстро создать красивый веб-сайт. Примерно через 10 минут у вас уже будет веб-сайт с таким же сервером, движком и визуальным представлением как у одного из лучших сайтов, например, TechCrunch. Останется добавить только информационное наполнение!
Один из самых лучших этапов создания веб-сайта WordPress – это выбор темы. А все потому, что есть огромное количество разных дизайнов и тем – их тысячи.
Можно приобрести темы премиум-класса. Их стоимость варьируется от 20 до 60 долларов. Вы можете скачать zip-файл и просто загрузить его в WordPress. А после того, как вы активируете тему, ваш веб-сайт начнет использовать шаблоны и таблицы стилей. И вот так просто у вас есть профессионально сделанный веб-сайт!
Небольшое предупреждение
: выбор темы может оказаться не самым простым процессом, и перед тем, как установить ее, вам стоит учесть немало важных вещей. Я бы порекомендовал искать быстрые темы с высоким рейтингом (кто-то еще их уже успел протестировать) и минимальными зависимостями от плагинов.
Для того, чтобы проверить скорость, найдите демоверсию темы на веб-сайте разработчиков и запустите ее через Google Page Speed. Если тема работает не очень, то лучше ее не использовать.
После того, как вы выберите хорошую базовую тему, ее можно будет
бесконечно настраивать
. Вы можете полностью настроить свой сайт под себя, просто отредактировав файл темы с помощью HTML, PHP, CSS и JavaScript.
Самой простой способ это сделать - установить дочернюю тему для того, чтобы вы могли обновлять свою до последней версии.
Выбрав хорошую тему, вы получите красивый веб-сайт. А плагины добавят мощности.
Plugins в WordPress: больше, чем блог
В основе истории WordPress лежат личные публикации и блоги. Проект был начат в 2003 году, когда Майк Литтл и Мэтт Малленвег начали работу над «изящной персональной издательской системой с продуманной архитектурой». Но теперь WordPress – это намного больше, чем просто блог.
У WordPress есть более 50 000 доступных плагинов. Плагины WordPress – это PHP-скрипты, которые предназначены для того, чтобы расширить функциональные возможности основной системы управления информационным наполнением. С их помощью вы можете добавить на ваш сайт совершенно новые функции.
Плагины разрабатываются как на общественных началах, так и в рамках компании. Чаще всего они бесплатны, но большая часть из них имеет версии премиум-класса.
Не используйте слишком много плагинов, поскольку иначе администраторы сайтов WordPress только и будут делать, что обновлять их.
Плагины могут быть загружены и обновлены непосредственно через админ-панель.
Подытожим…
WordPress – это отличный инструмент для создания веб-сайтов. Он быстрый, надежный и расширяемый.
Несмотря на то, что изначально WordPress создавался как простой инструмент для публикаций, он все же перерос свое скромное начало. Если вы хотите создать личный блог, интернет-магазин или веб-сайт для своего бизнеса, то WordPress – это отличный вариант.
К тому же, WordPress – это отличный способ лучше изучить веб-разработку.
Когда вы начнете работать с WordPress, вы будете писать код с помощью HTML, CSS, JavaScript, PHP и MySQL. Так как WordPress имеет открытый исходный код и безумно популярен, существует большое количество бесплатных ресурсов, которые позволят вам погрузиться в эту тему так глубоко, как вы захотите.
В нынешнее время почти во всем мире компьютеры и сети становятся все быстрее. И это в общем-то отлично сказывается как на веб-разработке, так и на взаимодействии с пользователями. Плюс ко всему, появилось огромное количество перспектив для людей.
И хотя во многом рост очевиден, все же есть те, кто остались позади в этой спринтерской гонке. Есть один большой вопрос: как мы можем уравнять возможности работы в сети с учетом такого цифрового неравенства и как мы можем сделать Интернет более доступным для людей, у которых не такие эффективные компьютеры и сети?
Во многом ответ заключается в том, как мы отображаем веб-страницы в браузере.
Термины, которые мы будем использовать в этой статье
Пока мы не начали, я хочу убедиться, что вы хорошо знакомы с терминами, которые будут встречаться в этой статье. Для новичков в разработке некоторые термины могут показаться особенно сложными для понимания. Если вы уже знаете эти термины, смело переходите к следующему разделу.
Сервер
. Сервер – это удаленный компьютер, который чаще всего расположен в Интернете. К его работе относится обработка запросов от клиентов и ответы на эти запросы.
Клиент
. Клиент – это любое устройство, которое взаимодействует с сервером с целью получить доступ к ресурсам. Как правило, клиент – это любое устройство с выходом в Интернет. В этой статье роль клиента играет как раз веб-браузер.
CDN
, сокращенно от Content Delivery Network (сеть доставки контента). CDN – это «сеть взаимосвязанных серверов, которая ускоряет загрузку веб-страниц в тяжелых приложениях» (от AWS).
Время компоновки
. В течение этого времени код вашего приложения подготавливается для использования в другой среде. Чаще всего эта среда находится на сервере в Интернете.
А теперь давайте поговорим о различных способах отображения веб-сайтов.
Что такое рендеринг на стороне клиента?
Рендеринг на стороне клиента (CSR – Client-Side Rendering) создает веб-страницы в браузере, при этом полностью опираясь на ваш код JavaScript. Прежде чем пользователь увидит содержимое вашей страницы, браузер должен обработать ваш JS-код от и до.
Этот JS-код помогает динамически определять архитектуру сайта, как только он загрузится. В данном случае под архитектурой понимается извлечение данных из API, навигация по сайту и простейшая бизнес-логика на вашем сайте.
Рендеринг на стороне клиента и фреймворки JavaScript
Рендеринг на стороне клиента стал набирать популярность после того, как были выпущены фреймворки и библиотеки JavaScript, в частности, React, Vue и Angular. Эти фреймворки будут работать только в том случае, если вы добавите CDN в самом начале HTML-страницы, а эти CDN, как правило, представляют собой огромный JS-код.
Ни для кого не секрет, что большие файлы увеличивают время загрузки, но здесь есть одно «но»: если большие файлы были загружены при начальной загрузке приложения, то время загрузки других страниц этого сайта будет существенно меньше.
В первую очередь веб-сайт извлекает данные из API. После чего эти данные используются для того, чтобы заполнить страницы, которые отображаются на клиенте.
Среди реальных приложений, которые используют CSR, есть большое количество прогрессивных веб-приложений, например, Spotify, Figma и Google Drive.
Что такое рендеринг на стороне сервера?
Рендеринг на стороне клиента – это событие, которое в корне изменило правила игры, и во многом это до сих пор так. Однако, если тщательнее присмотреться к качеству функционирования CSR, то можно заметить, что чем больше у веб-сайта функций, тем больше в нем JS-кода. А мы ведь помним, что чем больше JS-кода, тем больше время загрузки.
Тяжелая начальная загрузка в качестве средства для более быстрого доступа к остальным веб-страницам оказалась не тем компромиссом, на который готовы были пойти пользователи. И это поспособствовало возникновению рендеринга на стороне сервера (SSR – Server-Side Rendering).
Конечно, SSR не решил все проблемы, связанные с рендерингом в Интернете, но решил большую часть проблем, с которыми сталкивался CSR. В частности, он уменьшил время начальной загрузки. Также мы отметили некоторые другие преимущества SSR (в сравнении с CSR) в разделе «Преимущества и недостатки».
Рендеринг на стороне сервера позволяет создавать страницу на сервере сразу после того, как от браузера поступил запрос. Если вы используете SSR, то ваш сервер отобразит весь код HTML, CSS и JavaScript, который необходим для запрошенного ресурса, и отправит его обратно в браузер.
При таком подходе вы всегда можете быть уверены в том, что ваш сайт содержит самую актуальную информацию с сервера. Вы можете рассматривать это как интеграцию REST API – содержимое с сервера всегда будет самым актуальным.
Как и у любого другого метода рендеринга в Интернете, у SSR есть свои недостатки. Начать хотя бы с того, что тот факт, что для загрузки веб-страницы нужно отправить сетевой запрос на сервер, может отразиться на пользователях, чья скорость Интернет-соединения меньше, чем у других. Кроме того, для работы SSR требуется довольно большой объем вычислительной мощности.
Что такое генерация статических сайтов?
Генерация статических сайтов – довольно распространенный подход к рендерингу в Интернете. Это обусловлено тем, что до того, как появились фреймворки JavaScript, большая часть веб-сайтов (если не все) генерировались статически.
Статические сайты не потеряли своей популярности, но теперь есть более эффективные способы их создания. Это подтверждает тот факт, что они важны с точки зрения производительности в сети.
Но что же такое статический сайт?
Статический сайт отображается в браузере ровно так, как он был сгенерирован. Пользователь, который просматривает сайт, никак не может повлиять на содержимое статического сайта, что не скажешь о веб-приложении, которое отображается с помощью CSR или SSR, где каждый пользователь может посматривать содержимое, пройдя процесс аутентификации или авторизации.
Статические сайты идеальны для отображения содержимого, которое никогда не будет меняться и которое не нужно периодически обновлять.
Объясняем, что такое генерация статических сайтов
Генерация статических сайтов (SSG – Static Site Generation) в большинстве случаев включает в себя автоматизацию процесса создания веб-страниц. У фреймворков JavaScript (например, Nuxt.js, Next.js и т.д.) есть шаблонизатор, с помощью которого вы можете создать несколько статических веб-страниц, используя лишь один шаблон. Конечно, это экономит ваше время.
Отличие SSG от CSR и SSR состоит в том, что HTML-страницы вашего сайта отображаются и генерируются в процессе сборки, то есть еще до того, как пользователь попытается получить к ним доступ. Именно поэтому SSG нередко называют предварительным рендерингом. Всю трудоемкую работу он выполняет заблаговременно.
Несмотря на то, что SSG может показаться вам благодатью, у него все же есть некоторые минусы. Основной недостаток SSG-рендеринга состоит в том, что страница должна генерироваться для каждого доступного URL на вашем сайте. К тому же, этот процесс может усугубиться и стать еще более громоздким, если у вас есть динамические страницы.
Напомним, что статические сайты идеально подходят для демонстрации содержимого, которое требует довольно редких обновлений. Соответственно, такой метод рендеринга подходит далеко не для всех случаев.
Преимущества и недостатки различных методов рендеринга
Теперь, когда мы выяснили, как работают все эти методы рендеринга, давайте объединим всю эту информацию и сравним их.
Мы проанализируем три основных показателя – производительность, SEO и стоимость.
Производительность
Для того, чтобы вы могли создавать веб-сайты, которые будут доступны для пользователей независимо от скорости их Интернет-соединения или мощности их компьютера, мы должны учитывать такой показатель, как производительность. В данном случае производительность можно связать с тем, как быстро веб-сайт загружает или извлекает данные из API.
Далее продемонстрировано то, как CSR, SSR и SSG ведут себя с точки зрения производительности.
Производительность CSR
Загрузка CSR-сайта может оказаться довольно медленной. Дело в том, что, прежде чем пользователи смогут увидеть содержимое веб-сайта, необходимо, чтобы JS-код загрузился и сгенерировал это самое содержимое.
Зачастую загрузки JS-кода бывают тяжелыми, особенно если вы используете фреймворки JavaScript. Также может возникнуть ситуация, что CSR-странице нужно будет выполнить вызов API, чтобы извлечь данные с сервера. Это также может увеличить время загрузки.
Производительность SSR
SSR-страницы могут оказаться довольно быстрыми. В основном это зависит от скорости сервера и пользователя. Если и там, и там все хорошо, то SSR может с легкостью победить с точки зрения производительности.
Производительность SSG
SSG-страницы довольно быстрые, поскольку фактический рендеринг происходит вне браузера.
SSG подает браузеру содержимое, которое ему необходимо, не требуя от него никаких дополнительных действий. У SSG-страниц, как и у CSR-страниц, также может возникнуть необходимость выполнить вызов API для того, чтобы извлечь данные с сервера. Это, конечно, увеличивает время загрузки.
В принципе, производительность веб-страницы определяется количеством JavaScript в ней.
Поисковая оптимизация (SEO – Search Engine Optimization)
Каждый веб-сайт, для которого важно, чтобы его видели пользователи, должен дорожить такой вещью, как поисковая оптимизация. SEO определяет то, насколько ваш сайт будет доступен в таких поисковых системах, как Google. К тому же, от поисковой оптимизации зависит то, насколько высоко будет находиться ваш сайт на страницах результатов поиска.
Давайте посмотрим на то, как воплощаются в жизнь все эти три метода при индексации поисковыми системами.
Поисковая оптимизация CSR
На CSR-страницах, как правило, нет какого-то содержательного контента, и, к тому же, для того, чтобы создать этот контент, они полностью полагаются на JS. Но здесь есть и подводные камни – не все поисковые роботы поддерживают JS, поэтому ваш веб-сайт может быть неверно проиндексирован в поисковых системах.
Поисковая оптимизация SSR
SSR отображает полноценные веб-страницы с актуальным содержимым, полученным с сервера. Поисковые системы вполне могут просканировать и проиндексировать SSR-страницы.
Поисковая оптимизация SSG
Для поискового робота не составит труда просканировать SSG-страницы, поскольку для полного отображения они не полагаются на JS.
Стоимость
Это важно, чтобы у пользователей оставались лишь хорошие впечатления от посещения веб-сайта, но счета сами себя не оплатят. Поэтому не менее важным моментом являются суммарные затраты на это взаимодействие, которые должны быть как можно меньше.
Расходы на каждый из методов рендеринга далеко не одинаковые. Ниже мы более подробно разберем, сколько стоит каждый из них.
Стоимость CSR
CSR на 100% выполняется в браузере. А это значит, что вам не нужно будет влезать в какие-то дополнительные расходы.
Стоимость SSR
SSR генерирует полноценную веб-страницу удаленно на сервере. А это значит, что вас ожидают дополнительные расходы, как денежные, так и ресурсные.
Стоимость SSG
Это бесплатно! Статические веб-сайт генерируется в процессе сборки. А это значит, что сгенерированные веб-страницы размещаются на хосте, и никакого дополнительного рендеринга на сервере не требуется.
Заключение
Когда вы будете выбирать между различными методами рендеринга, учитывайте то, для чего вы будете его использовать и что в таком случае больше всего подходит. Для этого вы, как раз, можете использовать информацию, которую узнали из этой статьи. Для разных веб-сайтов нужны различные методы рендеринга.
Разработчик торговой онлайн-площадки может пойти путем SSR или почувствовать себя в большей безопасности с SSG. Но с другой стороны, разработчик веб-приложений может согласиться на долгую первоначальную загрузку в том случае, если в результате это повлечет за собой лучшее взаимодействие с пользователями.
Неважно, какой метод рендеринга вы выберете, убедитесь, что ваш веб-сайт всегда доступен, за исключением ситуаций, с которыми вы вряд ли когда-то столкнетесь. И последнее, не забывайте соблюдать JS-диету.