Рендеринг на стороне сервера со стилизованным компонентом и пользовательским интерфейсом материала в Next.js с использованием ServerStyleSheets.

Material-UI и styled-components отлично работают со всеми компонентами. Цель этой статьи - рассказать, как использовать рендеринг на стороне сервера в приложении Next.js со стилями компонентов и UI материала.

Пример репо

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



manakuro / nextjs-styled-component-material-ui-example
Nextjs + Styled-component + Material UI + SSR. Внесите свой вклад в manakuro / nextjs-styled-component-material-ui-example… github.com



Зависимости

Убедитесь, что вы используете зависимости, показанные ниже.

Приступаем к настройке приложения Next.js

Во-первых, давайте быстро настроим Next.js с помощью create-next-app.

Настройте приложение Next.js:

$ create-next-app my-app

Установите стилизованные компоненты и Material-UI

Затем установите styled-components и Material-UI.

$ yarn add [email protected] @material-ui/[email protected]

Теперь, когда все ваши зависимости учтены, и вы готовы запустить сервер.

$ yarn dev

Рендеринг на стороне сервера с помощью стилизованных компонентов

Styled-components поддерживают рендеринг на стороне сервера с регидратацией таблицы стилей, что позволяет вам использовать стилизованные компоненты с React DOM каждый раз, когда вы рендерите приложение на сервере.

Для того, чтобы сделать это в Next.js, вам необходимо выполнить некоторые настройки в его документации:

  • Установите плагины Babel
  • Создать и настроить pages/_document.js
  • Создать и настроить pages/_app.js

Давайте начнем шаг за шагом.

Установите плагины Babel

Сначала установите их плагины babel:

$ yarn add -D babel-plugin-styled-components

И создайте .babelrc в корне вашего проекта и включите его:

Конфигурация завершена, но прежде чем мы перейдем к следующему шагу, давайте попробуем создать styled-component, чтобы увидеть, как он работает.

В pages/index.js добавьте несколько компонентов:

Теперь у вас получится вот так:

На данный момент стиль отображается не на сервере, а на стороне клиента. Просматривая исходный код страницы, вы можете увидеть, что он получает простой HTML и никаких таблиц стилей нет.

Потому что они вставляют таблицы стилей в тег стиля после выполнения JavaScript:

Итак, чтобы отобразить стиль на стороне сервера в Next.js, вам необходимо создать pages/_document.js и pages/_app.js и расширить его.

Создать и настроить pages/_document.js

Next.js предоставляет возможность настраивать теги <html> и <body> и по умолчанию поддерживает SSR для библиотек CSS-in-JS. Чтобы переопределить его, создайте pages/_documents.js:

Вот как будет выглядеть пользовательский _document.js после того, как вы добавите компонент стиля SSR, и он должен:

  • Создайте экземпляр ServerStyleSheet
  • Получение стилей из компонентов на странице
  • Извлеките стили как тег ‹style›
  • Передайте styles в качестве реквизита в HTML-шаблон

Styled-components предоставляет ServerStyleSheet, который позволяет вам создать таблицу стилей из всех style-компонентов в приложении. sheets.collectStyles собирает все стили из компонентов. sheets.getElement() генерирует тег стиля, и вам нужно вернуть его как реквизит с именем styles.

Исходный Document.getInitialProps возвращает { html, head, styles, dataOnly }, поэтому мы просто расширяем styles здесь.

static async getInitialProps({ renderPage}) {
  const { html, head, dataOnly } = await renderPage()
  const styles = flush()
  return { html, head, styles, dataOnly }
}

Вы можете увидеть исходный сценарий по адресу:



zeit / next.js
В настоящее время вы не можете выполнить это действие. Вы вошли в систему с другой вкладкой или окном. Вы вышли из системы на другой вкладке или… github.com



Создать и настроить pages/_app.js

Затем создайте pages/_app.js для использования провайдера:

Теперь, когда он отображается на сервере, и вы видите таблицу стилей на странице исходного кода:

На первой картине еще нет проблесков.

Рендеринг на стороне сервера с Material-UI

Как и в приведенном выше примере, Material-UI также предоставляет ту же систему рендеринга. Согласно документации, вам необходимо:

  • Создавать свежий, новый ServerStyleSheets экземпляр при каждом запросе
  • Визуализируйте дерево React с помощью сборщика на стороне сервера
  • Вытащите CSS
  • Передайте CSS клиенту

Практически то же самое, что и styled-components, но, кроме того, вам нужно удалить CSS, внедренный на стороне сервера, на стороне клиента, чтобы избежать дублирования инъекций CSS.

Давайте отредактируем его в pages/_document.js:

На стороне клиента все, что вам нужно сделать, это удалить созданный на стороне сервера CSS в pages/_app.js:

Добиться цели. Давайте добавим компонент Material-UI, чтобы проверить, работает ли он:

И получится вот так:

Вы можете проверить таблицы стилей, созданные на стороне сервера, в исходном коде страницы просмотра:

Он отлично работает.

Заключение

Вот и все. Если вы уже создали существующее приложение Next.js, вам нужно всего лишь добавить несколько шагов. Итак, резюмируя:

  • Установите плагины Babel
  • Создать pages/_document.js и переопределить Document
  • Создать pages/_app.js и заменить App

Надеюсь, это поможет вам.

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



manakuro / nextjs-styled-component-material-ui-example
Nextjs + Styled-component + Material UI + SSR. Внесите свой вклад в manakuro / nextjs-styled-component-material-ui-example… github.com