За 5 минут сделать Single Page Application доступным для Google и Facebook

Введение

Динамические веб приложения (SPA, Single Page Applications) становятся все более популярными. Их использование позволяет упростить и ускорить разработку и поддержку за счет следующий преимуществ:

• не требуется server-side рендеринг;
• сайт — это набор статических файлов (html, js, css, images, fonts), которые лежат на CDN;
• нет затрат на масштабирование frontend;
• код frontend локализован в одном проекте. (Раньше часть кода была на server-side, часть в frontend.);
• уменьшение затрат на разработку backend (только API);
• уменьшение нагрузки на backend (только API запросы);
• возможность вместо собственного backend использовать сервисы типа (https://scaphold.io), микросервисы, lambda.

Из популярных библиотек для SPA хочется отдельно выделить ReactJS. Его использование позволяет создавать сложные веб приложения быстро и просто, сохранить скорость разработки на большой базе кода, избежать регрессионных ошибок при добавлении новых функций.

Большой нерешенной проблемой SPA является их полная несовместимость с веб краулерами поисковых систем (индексация сайтов) и социальных сетей (sharing в соц. сетях). На текущий момент краулеры не выполняют на своей стороне javascript и поэтому не могут получить содержимое SPA в виде html кода. В 2015 году Google официально отказался от поддержки выполнения javascript кода на своей стороне.

Решения

Сегодня есть несколько типов решений для проектов, которые хотят полноценно разрабатывать SPA.

Поддержка собственного server-side рендеринга

Что это такое

Это старый подход к организации веб приложения при котором сохраняется server-side рендеринг html страниц. Когда загружается SPA в браузере клиента, обычно, сначала приложение удаляет весь html код, созданный сервером, и его место заполняется результатом работы программы. На текущий момент это наиболее часто используемое решение.

Чем это хорошо

• это работает;
• все свое.

Чем это плохо

• удорожает и замедляет разработку за счет необходимости дважды реализовывать одни и те же функции на сервере и клиенте;
• удорожает поддержку и масштабирование, т.к. требуется управлять и обслуживать веб-сервера;
• увеличивает вероятность отказов, ошибок, сбоев.

Изоморфный рендеринг

Что это такое

Идея о том, что один и тот же код может выполняться и на клиенте и на сервере. К сожалению, работает эта идея только на очень простых приложениях. Кроме того поддерживать все новые появляющиеся функции браузеров на сервере очень трудно, что приводит к потребности часто выполнять дополнительную работу для адаптации приложения для работы на сервере.

Чем это хорошо

• работает на очень простых приложениях, типа "hello world";
• не требует дважды реализовывать одни и те же функции на сервере и клиенте.

Чем это плохо

• не работает на проектах сложнее "hello world", которые требуют работы с динамически загружаемым контентом, управлением очередями запросов, websocket подписками на обновления данных;
• удорожает разработку, т.к. не работает из коробки, по факту все равно требуется дополнительно разбираться с серверным кодом;
• удорожает поддержку и масштабирование, т.к. требуется управлять и обслуживать веб-сервера.

Prerender.io

Что это такое

Это сервис с открытым исходным кодом, который позволяет организовать перенаправление трафика от краулеров на специальный браузер, который выполняет javascript код и вернет статическую html страницу. В качестве браузера используется PhantomJS.

Чем это хорошо

• open-source (можно развернуть у себя и не платить за Cloud решение, на деле получается дороже);
• работает для сложных проектов;
• умеет правильно отдавать 404, 301 из <meta name="prerender-status-code" content="404"> (https://prerender.io/documentation/best-practices);
• снижает затраты на разработку (требуется только frontend);
• снижает затраты на поддержку (frontend можно раздавать с cdn, как набор статики).

Чем это плохо

• платный;
• медленный на сложных проектах. Краулеры часто не дожидаются ответа. Причем, если умный краулер google через некоторое время попробует еще раз получить содержимое страницы, то пользователь социальной сети, который хотел поделиться со своими друзьями интересным контентом вашего сайта и недождался ответа, потерян навсегда.
• на сложных проектах краулеры почти всегда получают cached pages. Т.е. почти всегда получают старую информацию и со второго раза.
• иногда требует дополнительных усилий от разработки;
• если что-то не работает, очень трудно отлаживать;
• регулярная переиндексация страниц для cache создает дополнительную нагрузку на backend;
• требует наличия web server для интеграции.

Способы интеграции

Предлагает множество однотипных интеграций для разных фрейморков и веб серверов. Они заключаются в проксировании трафика от краулеров на prerender.io (если в заголовке запросов UserAgent соответствует краулеру или в параметрах запроса есть _escaped_fragment_). Остальной трафик отдается в обычном режиме (набор статики).

Renderjs.io

Что это такое

Cloud based сервис, который работает аналогично prerender.io, но работает быстро, не использует cache, использует последнюю версию Chromium.

Как это работает

После первой загрузки SPA приложения в современных браузерах работают очень быстро. Для отрисовки новой страницы обычно требуется всего несколько запросов. Renderjs.io — сервис, который делает это для браузеров. Для рендеринга используется Chromium browser. При первом обращении краулера в настоящем, реальном Chromium открывается закладка с веб приложением. Эта закладка не закрывается долгое время. При обращении по новому url не происходит полной загрузки всего, а лишь pushState в уже загруженное приложение. Таким образом рендеринг работает очень быстро и очень легко отлаживать, если у вас в Chromium работает — работает и на Renderjs.io.

Чем это хорошо

• работает для сложных проектов;
• умеет правильно отдавать 404, 301 из <meta name="status-code" content="404">;
• снижает затраты на разработку (требуется только frontend);
• снижает затраты на поддержку (frontend можно раздавать с cdn, как набор статики);
• работает быстро;
• для рендеринга использует Chromium;
• не использует cache — страницы всегда содержат актуальную информацию;
• позволяет подключиться за 5 минут используя DNS интеграцию.

Чем это плохо

• не open-source;
• работает только внутри приложения. Т.к. для смены url используется history.pushState то выход за границы приложения работать не будет.

Способы интеграции

Интеграция при помощи middleware аналогична prerender.io.

Интеграция при помощи DNS записи. При этом способе интеграции проект перенаправляет весь свой трафик на cdn.renderjs.io и получает полноценную обработку трафика от краулеров через рендер сервис, а остальной трафик на свой веб сервис. Этот способ позволяет небольшим проектам за 5 минут сделать свой SPA доступным для поисковых систем и заниматься более важными делами.

Выполните несколько простых шагов:

1. Зарегистрируйтесь;
2. Создайте новый проект;
3. Заполните поля. Domain — это поле название домента (mysite.com), с которого будут приходить запросы, а поле origin — это url (обычно хостера mysite.github.io) по которому лежит ваше приложение;
4. Создайте на вашем DNS сервисе запись CNAME mysite.com -> cdn.renderjs.io;
5. Проверьте ваше приложение (в терминале curl http://mysite.com или в браузере view-source:http://mysite.com/?_escaped_fragment_=);
6. Если все правильно, получите отрендеренный html.

Частые вопросы

Q: А почему не отдавать всем клиентам готовый html код?
A: По нескольким причинам:

• без поддержки javascript клиент все-равно не сможет полноценно пользоваться приложением, так что лучше отдавать какой-нибудь fallback.html с надписью включите javascript;

• рендеринг требует времени — это все-таки дольше, чем получить набор статики (html, js, css) с cdn.

  
  

  Q: Как индексировать закрытые разделы, которые требуют cookies?
  A: Технически это возможно, но на практике не требуется.

  
  

Выводы

Мы считаем, что для молодых проектов на начальном уровне использование renderjs.io и DNS интеграции — идеальное решение, которое позволяет одновременно получить все преимущества полноценного SPA и сосредоточиться на решении действительно важных задач, а именно создании ценности для клиента.

Новые проекты с трафиком тоже могут использовать renderjs.io с DNS интеграцией или nginx интеграцией.

Большие, успешные проекты пусть думают самостоятельно. Если есть желание бороться проблемами, которые уже решены, что ж они большие — сами знают, что делать.

О нас

purelab.io — Мы команда профессиональных разработчиков. Специализируемся на разработке высококачественных и современных веб приложений на базе ReactJS. Используем функциональное программирование. Имеем собственные решения для того, что бы делать вещи правильно. Можем помочь, проконсультировать, разработать. Пишите, будем рады.