React 服务器组件和导航器-解网

问：

对于上下文，我的项目使用最新的 Next.js，它使用 App Router、客户端组件和服务器组件。

我正在尝试在我的一个服务器组件中使用，但它不起作用，因为我相信导航器是一个 Web API，并且该组件正在服务器上呈现。我认为是这种情况，因为navigator.mediaDevices.getUserMedia在客户端组件中工作。我必须在这里使用服务器组件，因为客户端组件不允许异步。await navigator.mediaDevices.getUserMedia

我想不出一个好的方法来解决这个问题。有没有好的解决方法？

例如，到目前为止我的代码：

export default async function Recorder({}: Props) {
    let stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
    });
    return <h1></h1>;

下一页 .js 导航器 react-server-components

有两种方法可以解决这个问题，但在此之前，让我们了解一下关于 SSR 的几个重要话题。我们专注于 SSR 主要是为了提供第一用户体验，因为我们在服务器上渲染 html，不需要在浏览器上使用任何 JS 来绘制 HTML。这为初次使用的用户提供了非常好的体验。但是我们是否总是需要在服务器上呈现完整的 HTML。答案是这完全取决于需求，有时是 HTML 的一部分，我们可以推迟，通常我们会推迟。让我们来回答。

第一种方法是从浏览器获取用户代理，并使用预构建的 json 为浏览器映射，其版本支持所需功能。

第二种方法是使用客户端组件，这是 ReactJs 的新功能，并在 NextJs 中支持。您可以通过以下方式重写此组件：

export default function Recorder({}: Props) {
    const [stream, setStream] = useState<MediaStream>(null);
    useEffect(() => {
      navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      }).then(mediaStream => {
        if (stream) {
          setStream(mediaStream);
        }
      });

    }, [])
    
    return <h1></h1>;
  }

如果您使用的版本不支持此类客户端组件，则还有另一种方法可以确保组件仅在客户端上呈现

上一个：如何检查当前小部件是否在最顶层的上下文中？

下一个：使用“基础内容”在页面顶部打开对话框时不显示go_router

React 服务器组件和导航器

React Server Components and navigator

评论