Front-end-Job-Interview-Questions
Ответы на вопросы на должность Frontend разработчика.
Project maintained by FedorovAlexander
Hosted on GitHub Pages — Theme by mattgraham
Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.
Текст взят из этого репозитория.
В наши дни веб-разработчики называют свои продукты веб-приложениями, а не веб-сайтами. Хотя между этими двумя терминами нет строгой разницы, веб-приложения, как правило, очень интерактивны и динамичны, что позволяет пользователю выполнять действия и получать мгновенный ответ. Традиционно браузер получает HTML с сервера и отображает его. Когда пользователь переходит на другой URL-адрес, требуется полное обновление страницы, и сервер отправляет свежий HTML-код на новую стрницу. Это называется рендерингом на стороне сервера.
Однако в современных SPA вместо этого используется рендеринг на стороне клиента. Браузер загружает начальную страницу с сервера вместе со скриптами (фреймворками, библиотеками, кодом приложения) и таблицами стилей, необходимыми для всего приложения. Когда пользовател переходит на другие страницы, обновление страницы не происходит. URL-адрес страницы обновляется при помощи HTML History API. Новые данные, необходимые для страницы (обычно в формате JSON), извлекаются браузером посредством запросов AJAX к серверу. Затем SPA динамически обновляет страницу данными через JavaScript, которые были получены при начальной загрузке страницы. Эта модель похожа на работу нативных мобильных приложений.
Преимущества
- Приложение становится более отзывчивым, и пользователи не видят мерцание при навигации, т.к. страница не обновляется целиком.
- На сервер поступает меньше HTTP-запросов, так как одни и те же ресурсы не нужно загружать снова для каждой загрузки страницы.
- Чёткое разделение на клиент и сервер. Вы можете легко создавать новые клиентские приложения для разных платформ (например, для мобильных устройств, чат-ботов, умных часов) без необходимости изменять код сервера. Вы также можете изменить технологический стек на клиенте и сервере независимо, пока между ними существует интерфейс.
Недостатки
- Более тяжёлая превоначальная загрузка страницы из-за загрузки кода фреймворка, самого приложения и ресурсов.
- Ваш сервер должен быть сконфигурирован так, чтобы он направлял все запросы к единой точке входа, и переложил обязанности по навигации на сторону клиента.
- Для отображения содержимого SPA полагается на JavaScript, не все поисковые системы выполняют JS во время индексации, и они могут не увидеть содержимое страницы. Это вредит поисковой оптимизации (SEO) вашего приложения. Тем не менее, в большинстве случаев, когда вы создаёте приложения, SEO не является наиболее важным фактором, так как не весь контент должен индексироваться поисковыми системами. Чтобы преодолеть это, вы можете либо рендерить своё приложение на стороне сервера, либо использовать такие сервисы, как Prerender, чтобы “рендерить ваш js в браузере, сохранять статический HTML и передавать его поисковым роботам”.