Как отложить загрузку внешнего файла CSS в Next.js 14 ⇐ CSS

[Anonymous]

Мне нужно загрузить Katex CSS для оформления математических уравнений. Я не знаю заранее, каким именно страницам это нужно (это зависит от того, какие пользователи включают математику в свои сообщения), но я знаю, каким маршрутам она может понадобиться.
Для большего контекста, вот страница с математикой и страница без математики.

В настоящее время я загружаю CSS с помощью в заголовке моего корневого макета, вот так.

Код: Выделить всё

// src/app/layout.jsx

export default async function RootLayout({ children }) {
return (






{ children }



)
}

Эта стратегия делает его «ресурсом, блокирующим рендеринг», как вы можете видеть из моего отчета о маяке.


Если это возможно, я бы предпочел загружать CSS лениво И динамически, в зависимости от того, на текущей странице есть математические вычисления, требующие стилизации.
Я прочитал документацию по CSS и отложенной загрузке, но все еще ломаю голову над тем, как это сделать.

Подробнее здесь: https://stackoverflow.com/questions/786 ... next-js-14