NodeJS 如何用Remix渲染组件客户端？

6yoyoihd 于 2023-03-17 发布在 Node.js

关注(0)|答案(2)|浏览(164)

我有一个three.js组件，它应该只在客户端呈现，我该如何使用Remix来做到这一点？Remix是否公开了任何实用程序来帮助确定我们是在服务器还是客户端上下文中？找不到任何东西。
这里有一个例子，我试图用虚构的钩子来做，而这些钩子在混音中是不存在的。

import React from 'react';
import { useRemixContext } from '@remix-run/react';

const MyComponent = () => {
  const remixContext = useRemixContext();
  if(remixContext.server) {
     return null;
  }
  return <div>Should only be rendered on the client</div>
}

node.js

来源：https://stackoverflow.com/questions/75706454/how-to-render-component-only-client-side-with-remix

2条答案

按热度按时间

qxsslcnc1#

可以使用remix-utils库公开的ClientOnly组件，该组件接受一个函数，该函数将组件作为子组件返回，该子组件将仅在客户端呈现。
此组件在内部使用挂钩useHydrated，如果您不希望将此组件仅用于客户端呈现，则也会公开此挂钩。
请注意，在开发模式下，这最初对我不起作用，我不知道这是因为我使用的是remix-deno模板，还是因为它通常不适用于live reload，但一旦部署到生产中，它就像一个魅力。

import React from 'react';
import { ClientOnly } from "remix-utils";

const App = () => {
  return <ClientOnly fallback={null}>
     {() => <MyComponent/>}
  </ClientOnly>
}

还要注意，Suspense最终将成为released，它应该替换上述代码。

赞(0）回复(0）举报 2023-03-17

wwtsj6pe2#

在使用Remix或其他服务器端框架时没有客户端选项，您只能决定在服务器端和客户端呈现多少。
您只需编写普通的React代码，总会有一些组件代码呈现在服务器端，但您可以使用标准方法编写React项目（useState/useEffect/fetching）来最小化这一点。

赞(0）回复(0）举报 2023-03-17