This is a React component called NoSSR, and its main function is to prevent the rendering of its child components in a server-side rendering (SSR) environment. This component renders its child components normally in a client-side environment (such as a browser), but in a server-side rendering environment it does not render anything.
npm install @kwooshung/react-no-ssr
yarn add @kwooshung/react-no-ssr
pnpm add @kwooshung/react-no-ssr
import { NoSSR } from '@kwooshung/react-no-ssr';
function App() {
return <NoSSR>The content here will only be displayed in the browser</NoSSR>;
}
This component has only one optional prop: Loading
. When your component is waiting for an asynchronous operation to complete, React will render Loading
. This is typically set to a Loading indicator, such as a spinning icon or "loading..." text, to provide feedback to the user that Loading is in progress. Once the asynchronous operation is complete, Loading
will be replaced with your component's children.
import { NoSSR } from '@kwooshung/react-no-ssr';
function App() {
return <NoSSR loading={<div>loading...</div>}>The content here will only be displayed in the browser</NoSSR>;
}
useNoSSR
It accepts a callback function as a parameter. This callback function will only be executed in the browser, not on the server side.
import { useNoSSR } from '@kwooshung/react-no-ssr';
function App() {
useNoSSR(() => {
console.log('The content here is displayed in the browser developer tools');
});
return </>;
}
export default App;
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。