WebDev+ | Веб-разработка

SSR vs CSR vs SSG Представь собес по вебу. Тебя спрашивают: в чем разница между SSR, CSR и SSG? Это три стратегии рендера UI. Если выбрать не ту, можно легко просесть по скорости и SEO. ▪️SSR (Server Side Rendering) Пользователь запрашивает страницу, сервер подтягивает данные, собирает HTML, подключает стили и отдаёт уже готовую разметку в браузер. Потом на клиенте подгружается JS и “оживляет” страницу, это называется hydration. Плюсы: ▪️Хорошее SEO ▪️Контент появляется быстрее Минусы: ▪️Интерактивность не мгновенная, пока hydration не отработает Лучше всего для: ▪️блоги, новости, e-commerce ▪️всё, где важны SEO и свежие данные CSR (Client Side Rendering) Пользователь запрашивает страницу, сервер отдаёт пустой HTML плюс ссылки на JS/CSS. Дальше браузер загружает бандлы, JS строит страницу и накатывает стили. Плюсы: ▪️После загрузки супер-интерактивно Минусы: ▪️Плохое SEO (до выполнения JS страница фактически пустая) ▪️Медленный first paint/первый контент, особенно на слабых устройствах Лучше всего для: ▪️дашборды, SaaS, внутренние панели ▪️всё за логином, где SEO не важно SSG (Static Site Generation) HTML генерируется заранее на этапе сборки/деплоя. Когда пользователь запрашивает страницу, сервер просто отдаёт готовый HTML файл. Никаких вычислений “на лету”. Плюсы: ▪️Самый быстрый рендер ▪️Отличное SEO Минусы: ▪️Плохо подходит для динамического контента или часто меняющихся данных Лучше всего для: ▪️портфолио, документация, лендинги ▪️контент, который редко обновляется В одну строку ▪️SSR: собирается на сервере на каждый запрос ▪️CSR: собирается в браузере после загрузки JS ▪️SSG: собирается при билде и отдается мгновенно @WebDev_Plus

Laravel Tip Найди запросы, которые выполняются слишком долго. Это легко логировать с помощью: @WebDev_Plus

HTML-совет Тег <abbr> используют, чтобы пометить аббревиатуру или акроним (сокращение) от фразы или длинного слова. Он улучшает доступность и понимание: можно дать расшифровку, которая появится при наведении. Обычно <abbr> используют вместе с атрибутом title. Значение title показывается как подсказка, когда пользователь наводит курсор на содержимое <abbr>. В этом примере: WWW это сокращение от World Wide Web. Когда пользователь наведёт на WWW, появится тултип с полной расшифровкой World Wide Web. Зачем использовать <abbr>? Доступность: скринридеры могут озвучивать полную форму, когда пользователь фокусируется на сокращении. Это помогает людям с нарушениями зрения. Удобство: пользователь быстро видит смысл термина, не уходя со страницы и не ломая поток чтения. @WebDev_Plus

Знакомьтесь: abs() в CSS Функция abs() возвращает абсолютное значение вычисления, то есть делает число, длину или процент всегда положительными. Полезно для более безопасной вёрстки и предсказуемого визуала. Подробнее здесь ↓ https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/abs @WebDev_Plus

Этот пост выкуплен под рекламную интеграцию.

Но здесь будут скрины от участников frontend-менторства Тихона Галактионова и подборка полезных материалов:

👉100 вопросов, которые точно помогут тебе на собеседовании: ссылка 👉Подборка из 100+ каналов с вакансиями для разработчиков: ссылка 👉10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS: ссылка 👉Чек лист проверки своего резюме: ссылка 👉Разбор самых популярных и каверзных вопросов на собесах: ссылка 👉Лайфхак как аккуратно “пинговать” рекрутеров: ссылка Ссылка на канал Тихона, там же можно найти больше материалов для подготовки к собеседованиям в Big Tech: ссылка Реклама, erid: 2W5zFHW9utM ИП Галактионов Тихон Витальевич, ИНН 771618975809

Быстрый способ улучшить поведение текста в приложении — использовать text-wrap: balance. Это свойство равномерно распределяет текст по строкам, избегая "висячих" слов Поддержка ограничена небольшим количеством строк (примерно <6–10 в зависимости от браузера), поэтому лучше всего применять его для заголовков или коротких абзацев @WebDev_Plus

Я до сих пор считаю, что это одна из лучших фич, которые современный CSS нам дал! Кто знает, что значит only? @WebDev_Plus

Чувак собрал полноценный эмулятор x86 CPU на CSS (без JavaScript). Ты можешь писать программы на C, компилировать их в x86-машинный код через GCC и запускать прямо внутри CSS. https://lyra.horse/x86css/ @WebDev_Plus

Ecommerce-сайт с фильтрами это SEO-кошмар. Каждая комбинация фильтров создает новый URL: - /shoes/ - /shoes/?color=red - /shoes/?color=red&size=10 - /shoes/?color=red&size=10&brand=nike 50 фильтров = 1+ млн возможных URL. Crawl budget у Google раздувается. Штрафы за дублирующийся контент. Вот как исправить faceted navigation и не убить фильтры: 1/ Проблема faceted navigation Удобные для пользователя фильтры создают SEO-бардак: 10 категорий × 20 цветов × 15 размеров × 10 брендов = 30 000 возможных URL И все они показывают похожие товары. Google тратит crawl budget впустую. Ни один из них нормально не ранжируется. У клиента было 127 000 индексируемых комбинаций фильтров. Ценных было только 200. Google не понимал, что именно ранжировать. 2/ Решение 1: обработка параметров в GSC Google Search Console → Settings → Crawling → URL Parameters Настройте каждый параметр: No URLs: - Параметры, которые не меняют контент - Трекинговые коды (utm_source) - Session ID Representative URL: - Параметры, которые меняют контент - Дайте Google самому решить, что индексировать Every URL: - Параметры, создающие уникальные ценные страницы Клиент настроил 15 параметров. Индекс сократился с 127K до 3K страниц. Позиции выросли. 3/ Решение 2: стратегия с robots meta tag Используйте noindex на отфильтрованных страницах:

<?php if (isset($_GET['color']) || isset($_GET['size'])) { ?>
  <meta name="robots" content="noindex, follow">
<?php } ?>


Позволяет:
✅Пользователи могут фильтровать
✅Google может обходить ссылки
✅Link equity передается
❌Google не будет индексировать страницы с фильтрами

Индексируйте только основные страницы категорий.

4/ Решение 3: Canonical на версию без фильтров Все комбинации фильтров → canonical на основную категорию:

<!-- On /shoes/?color=red&size=10 -->
<link rel="canonical" href="https://example.com/shoes/" />

Это консолидирует сигналы в один URL. Но: теряется возможность ранжироваться по запросу вроде red shoes size 10 Используйте, если: - У комбинаций фильтров нет search volume - Вам не нужно, чтобы страницы фильтров ранжировались 5/ Решение 4: стратегическая индексация (лучший вариант для большинства) Индексируйте только ценные комбинации фильтров. Индексировать: /shoes/ (основная категория) /shoes/red/ (цвет с высоким спросом) /shoes/nike/ (популярный бренд) /shoes/running/ (подкатегория) Noindex для: /shoes/?color=red&size=10&brand=nike&sort=price Любой комбинации с 2+ фильтрами Фильтров без search volume Как реализовать:

$params = count($_GET);
if ($params > 1) {
  echo '<meta name="robots" content="noindex, follow">';
}

6/ Решение 5: чистые URL для ценных фильтров Перепишите URL фильтров так, чтобы они выглядели как категории: Вместо: /shoes/?color=red Сделайте: /shoes/red/ Плюсы: - Выглядит как страница категории - Лучше для SEO - Можно отдельно оптимизировать title/meta - Проще внутренняя перелинковка У клиента было 20 ценных комбинаций фильтров. Их перевели на clean URLs. Все начали ранжироваться в течение 6 недель. 7/ Стратегия "View All" Для небольших наборов товаров (<200 позиций): Уберите пагинацию и фильтры полностью. Покажите все товары на одной странице. Пример: - В категории 47 товаров - Показываем все 47 на /category/ - Пользователь фильтрует через CTRL+F - Или JavaScript-фильтрация (без изменения URL) Просто. Без дублей. Все товары на одной индексируемой странице. 8/ Мониторинг faceted navigation Проверяйте каждый месяц: □ Google Search Console → Coverage □ Сколько URL в индексе? □ Должно быть: категории + только ценные фильтры □ Site: http://example.com □ Сколько URL с параметрами в индексе? □ Crawl через Screaming Frog □ Сколько уникальных комбинаций параметров? У клиента количество индексируемых страниц фильтров упало с 89K до 200. Трафик ВЫРОС на 67%. Меньше = лучше. @WebDev_Plus

Ускорили React примерно на 74% при преобразовании payload серверных компонентов в элементы для рендера в браузере или во время SSR/SSG. В реальных приложениях на Next.js это дает рендер в HTML на 15%–30% быстрее, в зависимости от размера RSC payload. @WebDev_Plus

Как члены класса ведут себя при работе со ссылками @WebDev_Plus

Если ты реально понимаешь эти типы , то ты официально больше не вайб-кодер. Или вообще им никогда не был! Покажи решение получше! 🤟 @WebDev_Plus

Claude Code стал 3D монстром: держите 10 продвинутых Three.js скиллов. Там есть все: от базовой сцены до геометрии, освещения, анимаций и красивых эффектов. 🤩 Это ускорит сборку шикарных WebGL-сцен и интерактивных 3D приколюх. Некоторые скиллы получаются слишком детальными, можно слегка упростить и использовать так. исходники @WebDev_Plus

Спорю, ты не юзаешь эту настройку в VScode, а она тебе зайдет 🫰 Попробуй nativeTabs, если открываешь несколько окон VS Code (только mac). Потом спасибо скажешь @WebDev_Plus

Очень важный скилл: это понимать, когда юзер закончил скроллить Событие scrollend срабатывает, когда прокрутка завершилась: жест закончился и позиция скролла перестала обновляться. Удобно для lazy loading, аналитики или чтобы “дожать” финальные обновления UI без дерганий. Как это работает - https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event @WebDev_Plus

Stremio это типа open-source Netflix. ✓ Веб и UI на React ✓ Движок написан на Rust ✓ Расширения, чтобы добавлять источники контента Вся разработка открыта на GitHub: → http://github.com/Stremio/stremio-web @WebDev_Plus

CSS tip Годами мы жили с кошмаром под названием z-index и stacking context, но скоро нас ждет кошмар похлеще, связанный с Anchor Positioning 😱 Когда оно не работает, это бесит, так что пора разобраться, как это реально устроено. https://css-tip.com/anchor-issues/ @WebDev_Plus

CSS в 2026: То, что ты видишь, сделано вообще без единой строчки JavaScript... И при этом около 80% поддержки в браузерах. ↓ Если хочешь, могу сделать 2-3 варианта под твой стиль: более хайпово для ТГ, более технично для девов, или совсем коротко одним абзацем. @WebDev_Plus