Изоморфный JavaScript - Isomorphic JavaScript

Изоморфный JavaScript, также известный как Универсальный JavaScript, описывает JavaScript приложения, которые работают как на клиент и сервер.

Механизм

Изоморфный JavaScript работает в контексте одностраничное приложение (СПА). В типичном SPA большая часть логики приложения, включая маршрутизация, инкапсулируется в связанный файл JavaScript, который отправляется клиенту. Хотя это освобождает сервер, поскольку ему не нужно обрабатывать так много запросов, это также замедляет начальную загрузку для клиента, поскольку все приложение должно быть отправлено клиенту.

При использовании изоморфного JavaScript, когда клиентская веб-страница впервые запрашивается с сервера, представление страницы создается на сервере, аналогично серверные динамические веб-страницы, и отправил клиенту. После этого клиент может сразу отрендерить представление. После отрисовки начального представления полный SPA загружается в фоновом режиме, а последующие действия обрабатываются на стороне клиента.

Имя

Название термина «Изоморфный JavaScript» вызвало споры.^[1] Термин «изоморфный» был впервые введен Чарли Роббинсом из Nodejitsu в одном из постов в блоге компании.^[2] Спайк Брем, инженер-программист из Airbnb, написал другое сообщение в блоге, используя тот же термин.^[3] Однако другие предложили вместо этого использовать термин универсальный JavaScript.^[1][4]

Преимущества

• Улучшение взаимодействия с пользователем: отображая важные части приложения с реальными данными на стороне сервера, изоморфное приложение может отображать значимую начальную страницу. С другой стороны, клиентское приложение визуализации не может отображать какую-либо значимую информацию, пока не получит все необходимые внешние данные. А пока пользователь видит только индикатор загрузки.
• Более быстрое общее время загрузки: хотя изоморфное приложение будет медленнее отвечать на начальную страницу по сравнению с клиентским приложением визуализации (поскольку оно извлекает данные и отображает больше разметок на стороне сервера перед ответом), общее время завершения до конечного пользовательского интерфейса составляет быстрее, потому что доступ к данным на стороне сервера намного быстрее, чем запросы API на стороне клиента.
• Более предсказуемая SEO и индексация сайта: чтобы индексировать контент, отображаемый приложениями JavaScript на стороне клиента, робот Googlebot должен запускать эти приложения JavaScript в полной среде браузера и захватывать визуализированную модель DOM. Это связано со сложными проблемами совместимости браузеров. Кроме того, поскольку приложения JavaScript могут отправлять запросы AJAX для дальнейшей обработки, робот Googlebot должен иметь политику, которая контролирует доступ приложений к сети. Вот почему робот Googlebot по-прежнему не может правильно проиндексировать ваше приложение JavaScript.

Каркасы

Было создано несколько изоморфных фреймворков и библиотек JavaScript, в первую очередь Метеор (рамки). Другое включает Next.js, Nuxt, Рендр, дерби, Мисо, Эзель и Catberry.^{[нужна цитата ]}

Рекомендации