@kwooshung/react-no-ssr NPM

React NoSSR

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.

GitHub last commit GitHub code size in bytes GitHub top language GitHub pull requests GitHub issues Github Stars

Why was it developed?

Client-specific code: Some code can only run in a browser environment, such as code that depends on the window, document, or other browser APIs. Running this code in a server-side rendering (SSR) environment can cause errors. The NoSSR component can prevent this code from being rendered on the server, ensuring it only runs in the client environment.
Performance optimization: Rendering a large number of components or complex components on the server can lead to high server load and affect performance. By using the NoSSR component, you can choose to render some non-critical or resource-intensive components only on the client side, reducing server load and improving performance.
User experience: Some components may need to be rendered again on the client side after being rendered on the server, such as components that depend on user interaction or browser size. This can cause page flickering or layout jitter, affecting the user experience. Using the NoSSR component, you can prevent these components from being rendered on the server, avoiding page flickering or layout jitter.

Installation

npm

npm install @kwooshung/react-no-ssr

yarn

yarn add @kwooshung/react-no-ssr

pnpm

pnpm add @kwooshung/react-no-ssr

Usage

components

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>;
}

hooks

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;