inlineCss
Использование
Экспериментальная поддержка встраивания CSS в <head>. При включении этой функции все места, где обычно генерируется тег <link>, будут заменены на сгенерированный тег <style>.
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
inlineCss: true,
},
}
export default nextConfig/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
inlineCss: true,
},
}
module.exports = nextConfigКомпромиссы
Когда использовать встроенные CSS
Встраивание CSS может быть полезно в нескольких сценариях:
-
Первые посетители: Поскольку CSS-файлы блокируют отрисовку, встраивание устраняет задержку первоначальной загрузки, которую испытывают новые посетители, улучшая производительность загрузки страницы.
-
Метрики производительности: Удаление дополнительных сетевых запросов для CSS-файлов может значительно улучшить ключевые метрики, такие как First Contentful Paint (FCP) и Largest Contentful Paint (LCP).
-
Медленные соединения: Для пользователей с медленным интернетом, где каждый запрос добавляет значительную задержку, встраивание CSS может дать заметный прирост производительности за счет сокращения сетевых обращений.
-
Атомарные CSS-бандлы (например, Tailwind): В фреймворках, основанных на утилитах (как Tailwind CSS), размер стилей для страницы часто имеет сложность O(1) относительно дизайна. Это делает встраивание привлекательным выбором, поскольку весь набор стилей для текущей страницы легковесен и не растет с размером страницы. Встраивание стилей Tailwind обеспечивает минимальный размер полезной нагрузки и устраняет необходимость дополнительных сетевых запросов, что может дополнительно повысить производительность.
Когда не использовать встроенные CSS
Хотя встраивание CSS предлагает значительные преимущества для производительности, есть сценарии, где оно может быть не лучшим выбором:
-
Большие CSS-бандлы: Если ваш CSS-бандл слишком велик, его встраивание может значительно увеличить размер HTML, что приведет к более медленному Time to First Byte (TTFB) и потенциально ухудшит производительность для пользователей с медленным соединением.
-
Динамические или специфичные для страницы CSS: Для приложений с высокодинамичными стилями или страницами, использующими разные наборы CSS, встраивание может привести к избыточности и раздутию, так как полный CSS для всех страниц может потребоваться встраивать многократно.
-
Кэширование браузером: В случаях, когда посетители часто возвращаются на ваш сайт, внешние CSS-файлы позволяют браузерам эффективно кэшировать стили, сокращая передачу данных для последующих посещений. Встраивание CSS устраняет это преимущество.
Тщательно оцените эти компромиссы и рассмотрите возможность комбинирования встраивания с другими стратегиями, такими как извлечение критического CSS или гибридный подход, для достижения наилучших результатов, соответствующих потребностям вашего сайта.
Полезно знать:
Эта функция в настоящее время является экспериментальной и имеет некоторые известные ограничения:
- Встраивание CSS применяется глобально и не может быть настроено для отдельных страниц
- Стили дублируются при первоначальной загрузке страницы — один раз в тегах
<style>для SSR и один раз в RSC-полезной нагрузке- При переходе на статически сгенерированные страницы стили будут использовать теги
<link>вместо встроенного CSS, чтобы избежать дублирования- Эта функция недоступна в режиме разработки и работает только в production-сборках