Что ещё можно использовать помимо SSR для улучшения SEO?

Такой вопрос можно услышать на собеседовании. Например, как на техническом интервью в Яндекс. Мы привыкли, что если сайт должен хорошо ранжироваться в поисковой выдаче 🔍, то нужно использовать SSR.

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

🤷Но конечному пользователю, в принципе, наплевать, что у нас используется: SSR или обычный SPA. Так почему бы нам не использовать обычный SPA для всех юзеров. Но если вдруг к нам заглянут боты от Гугла или Яндекса, то можно воспользоваться пререндерами.

Пререндеры это такие инструменты, которые заранее генерируют готовый HTML страниц и сохраняют его в кэше. Когда поисковый бот🤖 приходит на сайт, он получает уже полностью собранный HTML, а не пустую страницу с кучей JS.

✅Таким образом, для пользователей всё остаётся по-старому — быстрый SPA, а для поисковиков — понятный контент без лишних скриптов.

Например, один из самых популярных инструментов для этого — Prerender.io. Он работает как промежуточный слой: определяет бота, рендерит страницу с помощью headless Chrome и возвращает статический HTML. И самое главное то, что проект является открытым, а это значит, что его можно спокойно поднять локально. Работает со всеми популярными фреймфорками: React, Vue, Angular.

Проводил как-то собес и спросил у кандидата:
— Какие способы стилизации ты использовал на практике?
— Он: CSS Modules, styled components, Emotion, просто CSS...

Всё чётко. Но я уточняю:
— А Tailwind не использовал?

Он усмехнулся:
> Да ну, это ж несерьёзно. Типа Bootstrap для зумеров ☕️

И вот тут я реально завис. 🤔

👀 Замечал, что многие до сих пор ставят знак равенства между Tailwind и Bootstrap.
Но это как сравнивать React и jQuery — оба про UI, но подходы вообще разные.

В чём суть:

1️⃣ Bootstrap — это набор готовых компонентов.
Хочешь кнопку? Получаешь кнопку со стилями, которые все видели миллион раз.

<button class="btn btn-primary">Кнопка</button>

2️⃣ Tailwind — это конструктор утилит: сам решаешь, какой будет дизайн.

<button class="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-lg">Кнопка</button>

3️⃣ В проде Tailwind весит в ~10 раз меньше. Убирает все стили, которые не используешь.
Bootstrap — около 150kb, даже если ты юзаешь три кнопки 🤷

5️⃣ Адаптивность на раз-два. Три брейкпоинта в одну строку. Красота!

<p class="text-sm md:text-base lg:text-lg">Текст</p>

👎 А минусы?
Ну, длинные строки классов. Но это лечится через @apply или компоненты.
Хотя я никогда до этого не доходил.

✅ Поэтому да, Tailwind — это определенно маст хев, где важна скорость.
Не нужно придумывать имена классов, прыгать между файлами или гадать, какой тут padding.

А вы как думаете, Tailwind действительно переоценён или это база в 2025?

А стоит ли делать тестовое задание? 🤔

Вообще я всегда стараюсь скипать тестовые, но тестовые задания — это не всегда зло. Просто важно понимать, какие делать стоит, а от каких бежать как от огня

Когда тестовое СТОИТ делать:

1️⃣ Фикс багов в готовом коде
Идеальный вариант — открываешь CodePen или репозиторий, там уже есть код, и нужно просто пофиксить пару мелких багов.
Показываешь, что умеешь работать с чужим кодом и разбираться в чужой базе. На такое час максимум — и норм 👍

2️⃣ Микро фича в готовое приложение
Например, в одном тестовом просили добавить переключение отображения товаров: списком или плиткой. Простая фича, но показывает твой подход к решению задач.
Или на бэке — новый endpoint. Делается максимум за час-полтора, без жертв 👍

3️⃣ Рефакторинг
Если просят взять готовый кусок кода и сделать его чище, понятнее или оптимальнее — это тоже ок.

4️⃣ С оплатой или компенсацией
Редко, но бывает. Если платят за тестовое, то это серьёзный сигнал, что здесь вас ценят как профессионала 🤑

5️⃣ Когда компания мечты
Если это та самая компания, куда горите попасть, и условия огонь, то можно потратить чуть больше времени. Но это скорее исключение, а не правило!

Если после тестового у вас мысли "я им сделал половину MVP", то это уже не тестовое 🤷

Далее разберу красные флаги, когда тестовое реально опасно.

А пока напишите в комментах: какое самое НЕадекватное тестовое попадалось вам? 🥴

Непривычно работать по субботам, да?

Сегодня тот самый день, когда 70% делают вид, что работают, а остальные 30% даже не открывали ноутбук😁

В любом случае, лучше это время потратить на прокачку своих навыков, поэтому параллельно с контентом готовлю вам жоский роадмап по тому, как пройти путь Middle → Middle+ → Senior 💪

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

⚛️ Что будут спрашивать на собесах про React в 2025/2026?

❄️ До нового года осталось всего ничего, а это значит, что пробиться на перегретом рынке frontend вакансий будет ещё чуть тяжелее. Поэтому чтобы не тратить кучу времени перед собесами и не учить всё подряд, собрал небольшой список актуальных тем.

ЧТО ТОЧНО СПРОСЯТ:

Основы и философия React
- Virtual DOM и reconciliation
- Что вызывает ререндер компонента
- Что такое key и зачем нужен при рендере списков
- Контролируемые и неконтролируемые компоненты
- Порталы
- Синтетические события в React
- Архитектура Fiber и роль render/commit фаз

Хуки🪝
- useState и batching: почему несколько setState могут объединяться
- useEffect: зависимости, очистка, как избежать бесконечных циклов
- useLayoutEffect: когда использовать
- useMemo и useCallback
- useRef: хранение между рендерами, доступ к DOM
- Про React.memo и useMemo спрашивают почти в каждой второй компании
- Как сделать свой useDebounce

Работа с состоянием и данными ♻️
- Когда хватает локального стейта, когда нужен глобальный
- Context: когда уместен, когда нет
- Как избежать prop drilling
- Redux Toolkit / Zustand / MobX: ключевые различия
- Оптимизация ререндеров при работе с глобальным стейтом

Производительность и структура 🏭
- Suspense и lazy: как реально использовать
- Error boundaries: зачем нужны
- Почему нельзя делать тяжелые вычисления прямо в компоненте
- Что такое React Server Components и зачем они нужны (попадался только 1 раз)
- Как работает concurrent rendering и чем он полезен

❌ ЧТО МОЖНО ПРОПУСТИТЬ:
Классовые компоненты, lifecycle-методы, connect() и всё из эпохи pre-hooks

Ваш браузер сдаёт вас с потрохами

✈️ Решил я значит зайти, посмотреть билеты на сайте Аэрофлота. Захожу на сайт, а там: “Проверка браузера...”
Сижу, жду. Перезахожу. И снова жду. И так каждый раз!

А что именно они там проверяют и как это вообще работает?

💅 Browser Fingerprinting
При загрузке страницы выполняется скрипт, который собирает целый “портрет” вашего браузера: userAgent, язык, платформа, разрешение экрана, часовой пояс, список плагинов, поддержка WebGL и Canvas
По сути, браузеру присваивают уникальный отпечаток, по которому потом можно вас узнать даже без cookies 😎

📊 Анализ поведения
Боты двигают мышь идеально ровно, кликают с одинаковыми интервалами.
Реальный человек двигает хаотично, печатает неровно.
Поэтому сайт отслеживает события mousemove, scroll, keydown, даже тайминги между кликами.

Если всё идёт “слишком идеально”, то система подозревает автоматизацию 🤖

🔍Проверка окружения
Также проверяют, не запускается ли браузер в headless-режиме, например, через Selenium.

if (navigator.webdriver) {
  console.log('Обнаружен WebDriver!');
  // Блокируем или показываем капчу
}

Зачем всё это?
- Защита от автоматических бронирований и фрода
- Проверка, что вы не робот, скупающий билеты пачками

😏 Полезные посты/видео

Так как на канал постепенно приходят новые люди, то пора бы сделать пост-закреп с ссылками на все полезные посты/видео.
Данный закреп будет постоянно обновляться.

📱 Мои видео на YouTube:
- FRONTEND SYSTEM DESIGN СОБЕСЕДОВАНИЕ В ЯНДЕКС ❤️
- Разбираем FRONTEND АРХИТЕКТУРУ новостной ленты ВК 📱
- FRONTEND АРХИТЕКТУРА ПОИСКА
- AI инструменты в frontend разработке 🤖

📱 Полезные посты в Телеграм:
- Небольшая сводка с рынка frontend вакансий
- Про tailwind
- Когда стоит делать тестовое? + Когда не стоит?
- Вопросы на React собесах в 2026

🧭 Roadmap для Middle React Frontend разработчиков

Вроде не джун, но всё ещё непонятно куда двигаться дальше? 😫

Расти после middle уровня зачастую трудно, потому что нет понятной структуры, поэтому я решил собрать roadmap для развития Middle Frontend разработчиков до уровней Middle+ и Senior.

🧭 Что внутри:

👨‍💻 Инженерное мышление: декомпозиция задач, чтение чужого кода, error-driven подход, UX

🏗️ Архитектура фронтенда: FSD, state model, состояние сервера, error, logging

🌐 Сеть и сервер: REST, WebSockets, JWT, аутентификация

🧪 Тестирование: Unit, UI, E2E, mocking, культура тестов

⚙️ DX: CI/CD, монорепо, Storybook, bundle insight

💬 Софт скилы: коммуникация, ownership, code review, документация

Для Senior там ещё продвинутые штуки: system design, state machines, advanced TS, перфоманс и безопасность.

Собрал roadmap так, чтобы каждый пункт можно было изучить через понятные объяснения и ссылки на реальные материалы, скорее открывай roadmap по ссылке ниже 👇

👋 Привет! Я Эмиль, frontend ментор

Коротко обо мне
- Действующий senior разработчик. Также как и ты: хожу на созвоны, пилю таски, фикшу баги, ревьюю код 💻
- Работал в стартапах, финтехе, бигтехе, AI проектах как фронтом, так и фулстеком
- Максимальный оффер в РФ: 460 000₽
- Сейчас в основном пишу на React и Go 😀😩

👮‍♂️ Был по обе стороны найма
- Сам проходил сотни собесов
- Сам нанимал разработчиков в команду
- Знаю, что реально ищут рекрутеры и тех.лиды
- Понимаю, как торговаться за лучшие офферы

🏎 На этом канале помогаю Middle Frontend разработчикам вырасти до Senior
- Какие навыки нужны senior инженеру
- Как выжить на тяжелом рынке труда в 2025
- Как фронтендеру правильно проходить собесы и продавать свой опыт
- Почему софт скиллы решают всё
- Как проходить frontend system design интервью

💻 Мои услуги
Мое личное менторство для Middle Frontend разработчиков:
- новое резюме, поиск работы на мертвом рынке 2025
- база по frontend техничке, мок собесы
- поведенческие собесы для frontend
- база по frontend system design
- выход на рынок, поддержка на испыталке

📔 Также есть другие мини форматы:
- личная консультация
- технический frontend мок собес
- frontend system design мок собес
- поведенческий мок собес для frontend

По всем вопросам пиши в личку
Подробнее об услугах и отзывы: frontend-mentor.com

🧭 Roadmap для Middle Frontend разработчиков
Узнай, что должен знать senior frontend разработчик прямо сейчас

🎮 Хобби
Иногда разрабатываю мини SaaS для души.
Например, месяц назад выпустил Google Chrome расширение с уже 300+ активными пользователями

🪓 Полезные посты и видео на канале
Собрал всё в одном месте специально для тебя здесь

🍸 Подписывайся, если
- Хочешь качать и доход и знания
- Понимаешь, что быть мидлом - не предел мечтаний и можно больше: стать senior, свитч в другую область
- Хочется дорасти до зарплатного потолка
- Хочешь понять, как вести себя на современном турбулентом рынке труда 2025

Погнали ломать потолок вместе! 🚀

📱 Новое видео на канале

Понедельник, 11 утра, а это значит, что самое время для работы просмотра нового видоса

В этом небольшом видео разберем, что такое виртуализация во фронтенде (не путать с виртуализацией в ОС). Зачем она нужна и как работают виртуальные списки на самом деле.

Рассмотрим, как под капотом просходит логика отрисовки элементов с применением виртуализации, чтобы понимать, как устроены virtualized библиотеки изнутри, и чтобы дать понять на собеседовании, что вы крепкий орешек и шарите, что это не магия, а понятный механизм.

👉 Смотреть тут: клик
Лайк, подписка, комментарий 👍

✉️ И чтобы разобраться с виртуализацией ещё более подробно, создал специально для тебя материал в письменном виде по этой теме, где ты сможешь найти:

1. причины появления такого феномена как виртуализация
2. какие есть подходы к её реализации (спойлер их несколько)
3. как обрабатывать корнер кейсы
4. настоящие примеры кода
5. как измерять эфективность виртуализации по метрикам (полезно для резюме)
6. какие ошибки чаще всего допускают при работе с виртуальными списками
7. вопросы на собеседованиях по виртуализации

👉 Материалы доступны по этой ссылке

🤔 Почему даже с 6+ годами опыта тяжело найти работу?

Решил провести эксперимент и создать резюме с 8 годами опыта. Зарплату в резюме не указывал. Откликался на всё подряд: на вакансии без опыта, с 1-3 годами, 3-6 годами и 6+

💪 Казалось бы, у тебя резюме с 8 годами опыта, тебя должны отрывать с руками и ногами, но не тут то было. Это может показаться очевидным, но больше всего ответов и приглашений пришло как раз с вакансий, где требуют 6+ лет. То есть с вакансий, где требуют до 6 лет опыта, приходило больше реджектов нежели с 6+

И тут на самом деле может быть несколько причин:

- Самое простое: HR банально нажал на "фильтр по 3-6 годам" и твое резюме с 8 годами улетело

- Overqualified. Рекрутеры боятся, что ты быстро устанешь от роли обычного разработчика. Они думают, что тебе нужны постоянные вызовы и сложные задачи 💻

- Слишком высокие ожидания по зп. Так как я не указал желаемую зп, то может показаться, что с 8 годами я ожидаю не меньше 500к 💸

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

- Да и вообще, все любят искать странности и несостыковки. И странно видеть разработчика с 8 годами, который откликается на вакансию 1-3 года. Это все равно что продавать новую машину с салона за четверть от ее стоимости. Странно, не правда ли?

Поэтому и возникает такой парадокс, как накрутка скрутка опыта, когда люди с 10+ годами создают несколько резюме: с реальным опытом и со скрученным. Чтобы просто пройти на те вакансии, где с настоящим опытом они получают отказы.

😎 Ну а если ты не счастливчик с 10 годами опыта, который уже может скручивать опыт, а наоборот middle разработчик, который хочет дорасти до senior, то забирай roadmap для развитию middle frontend разработчиков

Стоит ли перекатываться из Frontend в Go? 💪

💻 Go Go Go Go Go - в последние годы все больше можно услышать про то, что пора перекатываться из Java, JS, C# или из любого другого X в Go

А так ли все гладко и просто при переходе на другой язык? Потому что одно дело, когда ты последние 2-3 года занимался бекендом и просто меняшь свой стек на Go и другое дело, когда ты всё время работал в роле фронта.

Но по-любому хоть один раз и вы задумывались, а стоит ли перекатываться из JS в Go. У каждого могут быть свои причины на это:

💻 Кто-то думает, что на фронте он/она занимается ненастоящим программированием и вот при переходе на бек на Go всё заиграет новыми красками и жизнь станет ярче (спойлер: скорее всего нет)

🤖 Одни могут думать, что AI заменит именно работу фронтов, а работа для бекендеров на Go будет существовать всегда

🤑 Кто-то сравнивает вакансии и зарплаты и делает выводы, что нужно срочно уволняться и менять направление

😢 А другие наоборот могут бояться, что придется заново много учиться, делать пет проекты, готовиться к алгосам и system design сессиям. А затем снова конкурировать на не менее перегретом рынке Go разработчиков, ведь Go сегодня - это Python 5 лет назад, и многие новички поголовно выбирают его

В общем может показаться, что все очень непонятно и запутанно, поэтому на этой неделе будет видос на канале
📱 Стоит ли перекатываться из фронтенда в Go

Ну а если ты не посмотрел прошлый видос на канале, то welcome по ссылочке

📱 Из фронтенда в Go, а стоит ли?

Новое видео на канале! И так совпало, что сегодня четверг, а как мы знаем, четверг - это небольшая пятница. Это значит, что можно немного расслабиться и посмотреть новый видос о том, стоит ли перекатываться из фронтенда в Go или нет?

Разберем плюсы и минусы переката в Go и с чем придется столкнуться, если ты всё-таки решишь это сделать. Спойлер: всё не так однозначно.

👉 Смотреть тут: клик
Лайк, подписка, комментарий 👍

🤔 А стоит ли конкретно тебе перекатываться в Go или нет?

Мы все разные: у нас у всех разные возможности, интересы, желания и конечные цели.

🤔 Так что делать то? В сегодняшнем видео я показал тест, который поможет тебе определиться, что делать конкретно в твоей ситуации. Тест учитывает не только технические навыки, но и твою мотивацию, интересы и возможности.

👾 ПРОЙТИ ТЕСТ
👾 ПРОЙТИ ТЕСТ
👾 ПРОЙТИ ТЕСТ

📚 Обновлял недавно модуль с поведенческими и HR вопросами в рамках своей менторской программы.
Это про то, что обычно спрашивают на HR скринингах, ну или в переписках на HH (сегодня в 99% случаев это боты).

В общем у каждой компании свои вопросы и желаемые ответы на них: у стартапов одно, у бигтехов второе, у каких-нибудь web3 вообще может быть десятое.

Но попадаются и такие вопросы, как на скрине. И чё, как отвечать на такие вопросы, чтобы показать себя с лучшей стороны? 😁

🔵 База данных в браузере?

На одном system design собеседовании в желтом банке попросили спроектировать веб-клон телеграма. Один из нюансов был таким: пользователь должен уметь писать и редактировать сообщения без сети, ставить реакции, а все эти действия отправляются на сервер уже потом, когда интернет появится. То есть нужен полноценный оффлайн режим.

Как такое устроить на клиенте?

🤔 Первое, что приходит в голову, это service worker. Но у мессенджера десятки сущностей: чаты, каналы, пользователи, сообщения. Много разных операций: создать, отредактировать, удалить. Сообщений может быть тысячи, и складывать всю эту логику в сервис воркер быстро превращается в хаос. Можно потерять данные или запороть порядок операций.

Так что нужен другой подход.

Почему бы не сделать небольшой локальный снимок базы на клиенте? Локальная БД, в которой лежит история, статусы сообщений, черновики и очередь pending изменений. Если сети нет, мы просто продолжаем писать в эту БД. Сеть появилась синхронизируем изменения с сервером.

Пример:
💬 Пользователь написал сообщение. Оно улетает в локальную базу и помечается как pending. Сеть пропала. Пользователь его же отредактировал. В БД появляется новая локальная операция. Интернет вернулся. Клиент отправляет обе операции на сервер в правильном порядке.

Для такого сценария можно использовать ElectricSQL это sync-engine, который делает локальный слепок нужных таблиц, позволяет работать оффлайн и синхронизирует состояние с бекендом, включая разбор конфликтов. Но бек тоже нужно под это готовить.

💪 Можно и свое решение. Например, SQL.js. По сути ты получишь SQLite файлик, который можно хранить в IndexedDB. Дальше остается лишь загружать туда нужные таблицы, писать туда pending операции и синхронизировать их при появлении сети.

Снять разбор такого собеса на примере мессенджера?
Да 🔥
Нет 🐳