{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В современной веб-разработке производительность и пользовательский опыт стали критически важными факторами успеха приложения. За последние годы мы прошли путь от классического клиентского рендеринга к сложным гибридным моделям. В этой статье мы разберем ключевые концепции, которые должен понимать каждый frontend-разработчик.","type":"unstyled","key":"akbd"},{"data":{"image":{"id":"69666aecab363f7087638617"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ema2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"BOLD"}],"text":"1. CSR (Client-Side Rendering) - Клиентский рендеринг.","type":"header-two","key":"7uedv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Что это: Полностью браузерный рендеринг. Сервер отдает практически пустой HTML-файл с подключенными JavaScript-библиотеками, а браузер скачивает, парсит и выполняет JavaScript, который затем рендерит интерфейс.","type":"unstyled","key":"2aqsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cbi2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n Мое приложение\n \n \n

\n \n \n","type":"blockquote","key":"3098l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d3bm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Плюсы:","type":"unstyled","key":"e58ve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Богатая интерактивность после загрузки","type":"unordered-list-item","key":"4pb4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плавные переходы между страницами (SPA)","type":"unordered-list-item","key":"4n1tl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Минимальная нагрузка на сервер","type":"unordered-list-item","key":"f2umv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Минусы:","type":"unstyled","key":"fjdeg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Долгая первоначальная загрузка (белый экран)","type":"unordered-list-item","key":"bhfjf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плохая SEO (поисковики видят пустую страницу)","type":"unordered-list-item","key":"7nh22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зависимость от JavaScript","type":"unordered-list-item","key":"dvaug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Когда использовать: Админки, дашборды, приложения, где SEO неважен.","type":"unstyled","key":"dp9h8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. SSR (Server-Side Rendering) - Серверный рендеринг","type":"header-two","key":"6b4ve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Что это: Классический подход, где сервер генерирует полный HTML для каждой страницы и отдает его браузеру в готовом виде.","type":"unstyled","key":"8cvs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4g73e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Express.js пример SSR\napp.get('/product/:id', (req, res) => {\n const product = getProductFromDB(req.params.id);\n const html = `\n \n ${product.name}\n \n

${product.name}

${product.description}

\n \n \n \n `;\n res.send(html);\n});","type":"blockquote","key":"c82rm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ah8u0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Плюсы:","type":"unstyled","key":"5d1f3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мгновенный первый контент (no white screen)","type":"unordered-list-item","key":"5qjm5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Идеальная SEO-оптимизация","type":"unordered-list-item","key":"7t8r4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работает без JavaScript","type":"unordered-list-item","key":"d5h8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Минусы:","type":"unstyled","key":"e9vt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Медленный TTFB (Time To First Byte) при сложной логике","type":"unordered-list-item","key":"f827d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Высокая нагрузка на сервер","type":"unordered-list-item","key":"3ilmc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Меньше интерактивности","type":"unordered-list-item","key":"e21oh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. SSG (Static Site Generation) - Статическая генерация","type":"header-two","key":"rqlh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Что это: HTML генерируется на этапе сборки и раздается как статические файлы.","type":"unstyled","key":"blrvn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dkdaj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Next.js пример SSG\nexport async function getStaticProps() {\n const products = await getAllProducts();\n return {\n props: { products },\n revalidate: 3600 // ISR: перегенерировать раз в час\n };\n}\n\nexport default function HomePage({ products }) {\n return (\n

\n {products.map(product => (\n \n ))}\n

\n );\n}","type":"blockquote","key":"2bnkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"879mg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Плюсы:","type":"unstyled","key":"6fbmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Молниеносная загрузка (CDN)","type":"unordered-list-item","key":"cc75m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Бесплатная хостинг (GitHub Pages, Netlify)","type":"unordered-list-item","key":"6n61l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Идеальная безопасность (нет сервера)","type":"unordered-list-item","key":"fotl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Минусы:","type":"unstyled","key":"a859u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нет динамических данных без пересборки","type":"unordered-list-item","key":"5g5pe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Долгая сборка для больших сайтов","type":"unordered-list-item","key":"aohem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. ISR (Incremental Static Regeneration) - Инкрементальная статическая регенерация","type":"header-two","key":"7sso7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Что это: Продвинутая версия SSG, где страницы могут обновляться постфактум без полной пересборки.","type":"unstyled","key":"4rfhu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Как работает:","type":"unstyled","key":"2634k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При первом запросе генерируется и кэшируется страница","type":"ordered-list-item","key":"7a8pu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Последующие запросы получают кэшированную версию","type":"ordered-list-item","key":"1rqs4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В фоне запускается регенерация по расписанию или триггеру","type":"ordered-list-item","key":"173l8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новая версия заменяет старую для следующих пользователей","type":"ordered-list-item","key":"6ufo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Пример сценария:","type":"unstyled","key":"8fsc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блог: новые статьи добавляются без пересборки всего сайта","type":"unordered-list-item","key":"ang08"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каталог товаров: цены обновляются раз в час","type":"unordered-list-item","key":"73ef0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новостной сайт: главная страница обновляется каждые 5 минут","type":"unordered-list-item","key":"981au"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Core Web Vitals - Ключевые показатели производительности","type":"header-two","key":"69ift"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Google ввел три ключевых метрики для оценки пользовательского опыта:","type":"unstyled","key":"ck4il"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":66,"offset":0,"style":"BOLD"}],"text":"LCP (Largest Contentful Paint) - Загрузка самого большого элемента","type":"header-three","key":"faaa0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":42,"style":"BOLD"}],"text":"Мера скорости загрузки. Должен быть менее 2.5 секунд.","type":"unstyled","key":"4beh6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5959f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Оптимизации для LCP:\n// 1. Предзагрузка ключевых ресурсов","type":"blockquote","key":"2g0rm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n// 2. Оптимизация изображений","type":"blockquote","key":"c004v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

\n// 3. Минимизация блокирующего CSS/JS","type":"blockquote","key":"8b4gh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6llpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"FID (First Input Delay) - Задержка первого ввода","type":"header-three","key":"5h21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":37,"style":"BOLD"}],"text":"Мера отзывчивости. Должен быть менее 100 мс.","type":"unstyled","key":"ejjt3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"80l38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Улучшение FID:\n// 1. Разделение кода на чанки","type":"blockquote","key":"8r9is"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nconst HeavyComponent = React.lazy(() => import('./HeavyComponent'));\n// 2. Отложенная загрузка не критичного JS","type":"blockquote","key":"6tqa3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n// 3. Веб-воркеры для тяжелых вычислений","type":"blockquote","key":"dq71l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"963j9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":0,"style":"BOLD"}],"text":"CLS (Cumulative Layout Shift) - Совокупное смещение макета","type":"header-three","key":"bs15s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":48,"style":"BOLD"}],"text":"Мера визуальной стабильности. Должен быть менее 0.1.","type":"unstyled","key":"478bj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5h10f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

\n\n\n

\n \n

","type":"blockquote","key":"9mne0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"39o7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Гидрация (Hydration) - \"Оживление\" статического HTML","type":"header-two","key":"dp6bq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Что это: Процесс, когда React \"оживляет\" статический HTML, добавляя к нему интерактивность.","type":"unstyled","key":"4oial"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2mon5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// После SSR/SSG мы получаем статический HTML:\n

\n \n

\n\n// React гидратирует, добавляя обработчики:\n

\n \n

","type":"blockquote","key":"9eter"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7aej1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Проблема традиционной гидрации:","type":"unstyled","key":"dlajf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блокирует главный поток","type":"unordered-list-item","key":"djirg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Может быть медленной на слабых устройствах","type":"unordered-list-item","key":"7bg9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перегидрация всего приложения при навигации","type":"unordered-list-item","key":"8ilfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9fm1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7. Прогрессивная гидрация (Progressive Hydration)","type":"header-two","key":"3pde9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Что это: Умная гидрация, которая происходит частями, а не всей страницей сразу.","type":"unstyled","key":"2d299"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Как работает:","type":"unstyled","key":"favnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Критические компоненты гидратируются сразу","type":"ordered-list-item","key":"47dpt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Невидимые/неинтерактивные компоненты откладываются","type":"ordered-list-item","key":"8enc2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Гидрация по приоритету или при взаимодействии","type":"ordered-list-item","key":"3d8ph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7a96c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Пример с React 18 и Suspense\nfunction App() {\n return (\n

\n {/* Критичный компонент */}\n \n \n {/* Отложенная гидрация */}\n }>\n \n \n \n {/* Гидрация по видимости */}\n }>\n \n \n

\n );\n}","type":"blockquote","key":"5bkh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5r5ic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Преимущества:","type":"unstyled","key":"10fm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшенный TTI (Time To Interactive)","type":"unordered-list-item","key":"bjp5j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Меньше блокировок главного потока","type":"unordered-list-item","key":"b9c82"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Более плавный пользовательский опыт","type":"unordered-list-item","key":"fsao5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8. Island Architecture (Архитектура \"Островов\")","type":"header-two","key":"v368"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Что это: Парадигма, где страница состоит из независимых \"островов\" интерактивности в море статического HTML.","type":"unstyled","key":"4p40r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"s3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Пример с Astro.js (поддерживает Island Architecture)\n---\n// Статический компонент\nimport ProductCard from '../components/ProductCard.astro'\n// Интерактивный \"остров\"\nimport CartCounter from '../components/CartCounter.jsx'\n---\n\n

\n \n \n \n \n \n \n \n \n

","type":"blockquote","key":"c3de1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"17ldm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Ключевые принципы:","type":"unstyled","key":"1iuar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Минимум интерактивности: Только там, где действительно нужно","type":"ordered-list-item","key":"d4h74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Изоляция: Острова не зависят друг от друга","type":"ordered-list-item","key":"7ubgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Прогрессивность: Загрузка по мере необходимости","type":"ordered-list-item","key":"178an"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Преимущества:","type":"unstyled","key":"10dnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экстремально быстрая загрузка","type":"unordered-list-item","key":"53kgu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Минимальный JavaScript","type":"unordered-list-item","key":"amver"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Независимое обновление компонентов","type":"unordered-list-item","key":"1ck5d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отличные Core Web Vitals","type":"unordered-list-item","key":"8m5ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fp260"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"MsudkVfQEdIVZu80FBiM"}],"entityMap":{}},"mentions":[]}