Использование React.Context с серверными компонентами Nextjs13
Next13 был выпущен неделю назад, и я пытаюсь перенести приложение next12 на next13. Я хочу как можно больше использовать серверные компоненты, но, похоже, не могу использовать
import { createContext } from 'react';
в любом компоненте сервера.
Я получаю эту ошибку:
Server Error
Error:
You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
,----
1 | import { createContext } from 'react';
: ^^^^^^^^^^^^^
`----
Maybe one of these should be marked as a client entry with "use client":
Есть ли здесь альтернатива или мне нужно прибегнуть к сверлению пропеллеров, чтобы получить рендеринг на стороне сервера?
Ответы 3
Кажется, я могу использовать createServerContext
import { createServerContext } from 'react';
Если вы используете Typescript и React 18, вам также необходимо добавить "types": ["react/next"] к параметрам tsconfig.json компилятора, так как это пока нестабильная функция.
Я также не могу импортировать его. Как вы это сделали?
Это было удалено в следующей версии React. Я просто сверлю реквизит, как будто снова 2016 год...
@Rijk @types/react классифицировал эту функцию как «следующую», поэтому для доступа к ней в Typescript вам нужно добавить "types": ["react/next"] к вашему compilerOptions в tsconfig.json
Это новая функция SSR React, позволяющая распознавать, является ли компонент клиентским или серверным. В вашем случае createContext доступен только на стороне клиента.
Если вы используете этот компонент только на стороне клиента, вы можете определить 'use client'; поверх компонента.
'use client';
import { createContext } from 'react';
Вы можете проверить этот документ Next.js и этот React RFC для деталей.
Спасибо, да я знаю... суть вопроса в том, как передать контекст в серверных компонентах, не используя use client
Согласно Бета-документации Next.js 13, вы не можете использовать контекст в серверных компонентах:
В Next.js 13 контекст полностью поддерживается в клиентских компонентах, но его нельзя создать или использовать непосредственно в серверных компонентах. Это связано с тем, что серверные компоненты не имеют состояния React (поскольку они не интерактивны), а контекст в основном используется для повторного рендеринга интерактивных компонентов глубоко в дереве после обновления некоторого состояния React.
Однако существуют альтернативные способы обработки данных в новом подходе, в зависимости от вашего случая. Ф.э. если вы получили данные с сервера в родительском компоненте, а затем передали их вниз по дереву через Context, теперь вы можете получить данные непосредственно во всех компонентах, которые зависят от этих данных. React 18 будет дедуплицировать (удалять дубликаты) выборок, поэтому ненужных запросов не будет.
Больше альтернатив в документации.
Спасибо! этой части документации не было две недели назад!
Какую версию React вы используете? Я получаю
'"react"' has no exported member named 'createServerContext'. Did you mean 'createContext'?