Компоненты сервера React — это новая архитектура для компонентов React, на которой в значительной степени основан Next 13, особенно когда вы используете маршрутизатор приложений.

Примечания к компонентам сервера React

Есть несколько ключевых моментов, которые я нашел, читая эту запись в блоге из официального React, объясняющую, что такое серверные компоненты, и другие вещи, над которыми работает основная команда React.

Они запускаются раньше времени и исключаются из вашего пакета JavaScript.

В основном это означает, что по умолчанию они отображаются на стороне сервера, что означает, что useHooks, такие как useState, useEffect и остальные, не будут просто работать нормально, вам придется выбрать поведение на стороне клиента, используя оператор «use client» в верхней части вы файл.

Я скажу, что важно отметить, что любой компонент с оператором «use client» будет отображаться на клиенте, как старый React, поэтому вы получите своего рода суп на стороне сервера с разбросанными внутри клиентскими компонентами.

Я думаю, что аспект рендеринга на стороне сервера является для меня долгожданной концепцией. Это уж точно лучше, чем тратить время на размышления, стоит ли получать ServerSideProps и так далее.

Теперь все, что вам нужно сделать, это добавить «use client» к любому компоненту, который должен управлять каким-либо состоянием или выполнять действие.

Я думаю, также стоит отметить, что большинство пакетов React не будут работать, если вы не «use client», такие вещи, как Redux, Framer-motion и даже компоненты MUI требуют, чтобы вы «use client» имели смысл, поскольку они были созданы для клиента с самого начала.

Другие возможности серверного компонента:

  • Они могут запускаться во время сборки для чтения из файловой системы и извлечения статического содержимого.
  • Они могут работать на сервере для связи с уровнем данных без использования API.
  • И вы можете передавать данные из серверных компонентов в интерактивные клиентские компоненты.
  • Async/Await используется для выборки данных

Многие из них я не вижу, чтобы использовать очень часто, так как я в основном работаю над приложениями Next.js, которые используют GraphQL API, поэтому возможности извлечения серверных компонентов меня не очень привлекают.

В следующей статье мы углубимся в код и запачкаем руки Next 13.