Статические пререндеры для React/Angular/Vue вебсайтов

Решил протестировать различные решения для генерации статического пре-рендера aka «static cache» для новомодных SPA вебсайтов.

Если кратко и по делу

Платные решения типа «Mega SEO for Your SPA» — унылое гавно. Кому-то может и подойдет, но будет дорого и точно так же как у 1005000 других сайтов.

Проще всего сделано в react-snap — установил через npm, добавил «postbuild» скрипт и все как-то работает. Кстати, странное название для продукта если учесть что никакого отношения к React он не имеет и может билдить снапшеты к любому JS проекту.

Готовый пример

Вот результат на примере внутренней старницы SPA на моем сайте Sea Battle by KARPOLAN. Если загляните в консоль, то увидите несколько ошибок…

Основные проблемы на cейчас

  • Ренедр с помощью реального браузера, даже в инкогнито режиме, содержит код уже «исполненых» скриптов аналитики и рекламы.
  • Ренедр с помошью Headless браузера тоже не спасает, более того там прописвается localhost для многих параметров 🙂
  • Веб-сервер надо более тщательно настраивать, чтобы SPA продолжало работать автономно, а не таскало файлы с сервера каждый раз.

Заключение

Open Source «из коробки» ничего не гарантирует да и работает через пень-колоду… Даже react-snap глючит если задать «homepage» в package.json

P.S. В общем угробил очередную субботу 🙂

Крестики-Нолики на React JS

Что-то меня на приздниках пробило на по-программить. Раз такое дело, вот еще одна «поделка» и немного кода на JavaScript + React:

Играть в Крестики-Нолики прямо в браузере

Исходные коды игры Крестики-Нолики на JavaScript + React

Cо временем добавлю «всякой крастоты»: индикаторов, преключатель режимов PvP, PvE, Demo Mode и т.д.

Тестовое задание на React JS

Обычно я такой фигней не стардаю, но тут задачка интерсная и близкая к реальному миру.

Список ресторанов с разными вариантами фильтров и отображений.

Вот наваял Поиск с Сортировкой Ресторанов на React JS. Может еще чего-то добавлю со временем, Debug Info там интересный получилося.

Исходники выложил на GitHub, может кому-то полезно будет… Хотя писал я это за один день, так что не факт что стоит копировать мои решения не задумываясь 🙂

Идея на миллиард: Codename «Gone Fishing»

Примерно год назад я решил сделать «боле оцфрованным» такое хобби как рыбалка.

Идея в 2х словах на этом видео:

Я сразу сделал закрытую группу в Facebook, собрал аудиторию потенциальных клиентов и тестеров, провел разные опросы и обсуждения с ними, определилсся с родмапом приложений…

Так же написал технические задания, разбил на таски и попытался найти подрядчиков или партнеров на изготовление прототипов…

В общем пытался построить продукт и компанию по правильному, с customer development и по lean методике.

Краткий отчет за первый год: НЕ СДЕЛАНО НИЧЕГО!

Вывод простой: Хотите что-то сделать? Ищите деньги и нанимайте людей. Даже закрывшись от всего мира на полгода, вряд ли что-то нафигачите самостоятельно 😦

Читать «Идея на миллиард: Codename «Gone Fishing»» далее

Отвечу на любой вопрос. Скидка 100% :)

Ну точнее почти на любой вопрос, я ж не все знаю и не все можно публично рассказывать…

Но по бизнесу, программированию, маркетингу, продажам, PR и т.д. с удовольствием отвечу в комментариях.

P.S. Да, это за одно и «перекличка» читающих этот блог 🙂

Изобретаю лисапеды

В этот раз на PHP:

<?php $y = (date("Y") - 2004 - 1); $m = date("m"); if (($m > 8) || (($m == 8) && (date("j") >= 20))) $y += 1; echo $y; ?>

Это я возраст Кристины вывожу скриптом на сайте, чтобы не менять текст каждый год 🙂

Разворачивание веб сайтов, современный вариант

В эпоху клаудов и сайто-конструкторов напридумывали много всякого… Для изучения всего этого зоопарка провел ряд экспериментов с разными подходами и на разных серверных системах.

Пожалуй остановлюсь на вот таком подходе для разворачивания веб-сайтов:

  1. Делаем репозиторий .git, например на Bitbucket.
  2. Заливаем в него скелетон сайта, скрипты, CMS если надо.
  3. Делаем виртуальный хостинг или создаем сайт на Microsoft Azure.
  4. Клонируем .git к себе на хостинг.
  5. Через браузер (на крайний случай удаленный доступ) до-настраиваем скрипты, базы и CMS.

В случае автоматического апдейта CMS или изменения контента пользователями, переодически делаем git push с сервера, через консоль. Для этого лучше сделать отдельный аккаунт на Bitbucket и прописать в него SSH ключ от пользовтаеля на сервере.

Вроде и просто, и секьюрно, и даже есть бекап, да еще с контролем версий и изменений