Введение. Контекст и почему традиционные сервисы устарели.
Привет! Хочу рассказать свою не уникальную историю создания пет‑проекта bookstrata.ru, амбиций, ожиданий и реальности.
Мы с женой (Алина привет!) любим читать. Алина идет дальше и коллекционирует книги, расставляет на полках по циклам, по издательствам и тому подобное — вот такая личная эстетика. Однажды я заметил, что она часто использует блокноты и добавляет туда информацию о прочитанных книгах, рецензии. Меня заинтересовало, как в наше время еще не все перешло в цифровую среду и я решил спросить, почему она использует бумагу. Жена рассказала, что удобного сервиса взаимодействия с книгами нет, то что есть очень неудобное, под англоязычную аудиторию, еще и платное.
Так сложилось что я самостоятельно обучаюсь разработке и подходило время для создания своих пет‑проектов, немного прикинув, решил сделать книжный тир‑лист чисто для «себя» и жены и пошел анализировать рынок, что уже реализовано, кто успешен, сколько пользователей интересует такой сервис. Оказалось, что сервисов для создания тир‑листов достаточно, там есть одна крупная платформа и остальные, пытающиеся ее скопировать и урвать свой кусочек хайпа. Этот крупный сервис показался мне плоским, примитивным, плюс ко всему он платный (в бесплатной версии он одноразовый), англоязычный, ощущение что он отстал в развитии технологий и никто не рискнул сделать что то современное. НО, именно нишевое направление по книжным тир‑листам оказалось пустым и я стал потирать ручки…
Первые попытки формирования идеи и выбор стека.
Идея изначально была сделать не то же самое, как у всех, а что то новенькое и переосмысленное. Жена говорила что бы она хотела видеть в этом приложении — я это додумывал и делал. Придумал название, придумал логотип и все по стандарту, тут я не буду подробно останавливаться, это тема для другой статьи. Меня лично удивило то, насколько быстро меняется первоначальное видение замысла, когда ты добавляешь новые вводные: сначало это просто фантазия в голове, потом ты посмотрел как это реализуют конкуренты, потом ты посмотрел как это используют люди, потом ты обсудил с ИИ… Поэтому первое правило: не нужно никуда гнаться, а спокойно выбирать на чем строить свой проект. Все усмотреть и спланировать не получится, твое приложение — это путь, к которому ТЫ выбираешь направление (разбираем на цитаты).
Изначально я обучался и тренировался фронтенду, потом быстро понял, что нужно получать знания и в бэкенде. Мой скромный стек заключался в React, TypeScript, TailwindCSS, JavaScript, Node.js и произвольное от них, понятное дело со многими библиотеками я познакомился уже в процессе, уровень знаний получил разный. В ходу и на слуху был React и TypeScript, решил делать проект сразу на них, на выходе получить быстрое и отзывчивое SPA‑приложение и не париться. В принципе так и получилось, пока я не полез в SEO…
Моя борьба…
Приложение пилится, всякие фишки выдумываются, делается‑переделывается. Надо сказать, что создание проекта длилось около 5 месяцев, потому что тогда я еще не использовал ИИ или использовал в последующем не в том виде, как сейчас. Моя работа в основном сочетала: мои микро‑знания из прошлых изучений, идеи из курсов, ролики на ютубе как сделать так или по другому, загуглить и прочитать доку — в общем все то, что только замедляло создание сервиса. Потом я уже постиг дзен AI где отправляю кусок кода, ставлю задачу и прошу обязательно объяснить все пошагово, чтобы таким образом получать какие то знания параллельно (какой наивный).
В последующем в эпоху ИИ‑агентов все ускорилось и новые знания не успевались получаться, потому что становились пройденным этапом и нужно было двигаться дальше. В общем я получал удовольствие от процесса, старался максимально воплотить все удобства сервиса и сделать приложение доступным каждому. Я не думал о будущем приложения, об его масштабировании, я думал о том, как удобно теперь будет хранить книжки и их ранжировать. Все книголюбы прибегут и обнимут меня, кто скромнее скажет мне просто человеческое спасибо.
Но как доставить эту радость пользователям? Как рассказать что существует такое приложение? Как найти нас в интернете? Тут я и познакомился с СЕО поближе, я знал о нем раньше, но в этот раз нужно было нырнуть глубже.
Первый удар я получил тогда, когда решил собрать семантическое ядро, да и вообще посмотреть с каким количеством ЦА мне придется столкнуться и оказалось, книжные тир‑листы ищут только 55 человек в месяц… Тут пришло осознание, что мы не можем быть ТОЛЬКО книжными тир‑листами, людям нужно больше.
Как SPA‑приложение подружить с SEO.
Второй удар был тоже неприятным. В чем суть: SPA‑приложение это когда сервер отдает один файл HTML и пачку файлов JS, все остальное происходит в браузере. Так как проект подразумевает постоянное взаимодействие пользователя с интерфесом, мне очень важна скорость и отзывчивость — получение мгновенной реакции на действия. Это я все получил, но есть и обратная сторона: в HTML, которая приходит с сервера нет ни одного слова из нашего контента, только <div id="root"></div> и скрипты.
Весь текст, мета‑теги, заголовки появляются уже после того, как браузер исполнит JavaScript. Для пользователя все работает прекрасно, но не для поисковых ботов: бот зашел на сайт, посмотрел HTML, который пришел с сервера и ушел.
Многие сейчас возразят и скажут, мол, «мальчик ты из какого века? Боты давно уже исполняют скрипты на сайтах и этих проблем уже нет». Но по своему опыту и наблюдению могу сказать, что многие боты либо вообще не исполняют скрипты, либо исполняют с задержкой, либо пропускают — в общем работает это все криво. В итоге на выходе я получаю пустую страницу и соответственно такую страницу нигде показывать не будут.
Есть несколько вариантов решения этой проблемы: сделать SSR‑приложение и пусть сервер отдает готовый HTML, но для меня это оказалось долго и дорого — переходить на Next.js. Я пошел по второму пути: пререндер. Раз большинство страниц статичные, я один раз прогоняю все маршруты через headless‑браузер и сохраняю все данные страниц. На сервере настроен cron, который каждый день в определенное время прогоняет пререндер, на случай если появляются новые тир‑листы пользователей — это динамические страницы, которые я тоже хочу отображать в поиске.
Как это работает на пальцах: SPA‑приложение это магазин, где товары выставляются на витрину только после того, как посетитель зайдет и нажмет кнопку. А поисковый бот — это ревизор, который смотрит на витрину с улицы через стекло. И он не всегда будет нажимать кнопку, чтобы посмотреть твои товары. Вот для этого и используется пререндер — хозяин магазина перед закрытием выставляет товар на витрину, фотографирует его, бот приходит и либо нажимает кнопку для просмотра товаров, либо смотрит готовую фотографию.
Технически здесь нет никакой хитрости, мы заранее открываем страницы сайта, дожидаемся пока React все отрисует и сохраняем получившийся HTML в файл, который отдаем боту при посещении.
Кому мы нужны?
Эта короткая часть статьи просто крик души. Многие знают, что при позиционировании сервиса в идеале ты должен четко знать своего пользователя, кто он, чем занимается, как выглядит, какие у него интересы.
Как оказалось, на эти вопросы намного легче ответить, чем на вопросы «а кто мы? Какие запросы мы закрываем? Какова наша ценность? Что мы хотим донести для людей?».
В начале статьи я упоминал, что при создании приложения казалось что нишу мы закрыли, осталось собирать плоды на этой веточке, но не тут то было, о твоем сервисе должны еще услышать. Логичным и правильным для меня казалось это написать всем возможным книжным блогерам, на многих была подписана моя жена, которая мне в этом активно помогала. Сообщение обычного рода, без маркетинга «ты используешь корявые тир‑листы в своих роликах и мучаешься, попробуй мой и смотри, как твоя аудитория растет», с просьбой попробовать сервис, оценить и дать обратную связь в виде отзыва или замечаний. Все бесплатно и без обмана. Без подводных камней, без просьбы отрекламировать. Просто пользуйся в своей обычной жизни и в создании роликов. Полученный результат меня удивил:
Отправлено сообщений: 35
Прочитано сообщений: 33
Отвечено на сообщения (или поставлена реакция): 10
Зарегистрировались: 2
Отснят контент: 1
Вот такая конверсия на данный момент. Я принимаю разные факторы, от неправильного донесения мысли в сообщениях и до банального прочитал‑позже попробую‑забыл, но сам факт, что о хорошем бесплатном сервисе еще нужно достучаться до каждого чтобы показать. Ну о хорошем сервисе это мое личное мнение, цифры говорят об обратном.
Что дальше? Итог.
В первой пробной статье я хотел просто поделиться своим опытом, который я получил на протяжении всего пути, который еще продолжается. Было много трудностей, непонимания, переосмысления, если не брать в расчет, что для меня bookstrata.ru не выходит бесплатной, аренда сервера, S3, CDN. Но ни разу за это время у меня не было желания всё бросить, стараться заработать на этом или просто оставить всё, как есть — и будь что будет. Нет, для меня это любопытное путешествие, это 10+ деплоев на день, это поиск места под солнцем браузера.
Если у вас есть замечания, критика, советы — то оставьте их при себе вэлком в комментарии, всем рад.
Итог: подписывайтесь, ставьте лайки, комментарии, поддерживайте проект. Сайт: https://bookstrata.ru. Пока!
ссылка на оригинал статьи https://habr.com/ru/articles/1067532/