https://github.com/kwooshung/react-no-ssr
NoSSR is a React component used to prevent the rendering of its child components in a server-side rendering (SSR) environment, ensuring that specific content is only displayed in the client environment.
https://github.com/kwooshung/react-no-ssr
no-ssr nossr react ssr
Last synced: 3 months ago
JSON representation
NoSSR is a React component used to prevent the rendering of its child components in a server-side rendering (SSR) environment, ensuring that specific content is only displayed in the client environment.
- Host: GitHub
- URL: https://github.com/kwooshung/react-no-ssr
- Owner: kwooshung
- License: mit
- Created: 2023-11-09T07:23:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-21T10:30:41.000Z (over 1 year ago)
- Last Synced: 2025-01-16T23:45:55.603Z (4 months ago)
- Topics: no-ssr, nossr, react, ssr
- Language: JavaScript
- Homepage:
- Size: 277 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
[](LICENSE)
[](https://www.npmjs.com/package/@kwooshung/react-no-ssr)
[](https://www.npmjs.com/package/@kwooshung/react-no-ssr)
[](https://github.com/kwooshung/react-no-ssr/actions/)
[](https://codecov.io/gh/kwooshung/react-no-ssr)
[](https://codeclimate.com/github/kwooshung/react-no-ssr/maintainability/)
[](https://gitee.com/kwooshung/react-no-ssr/)
## 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
```bash
npm install @kwooshung/react-no-ssr
```
### yarn
```bash
yarn add @kwooshung/react-no-ssr
```
### pnpm
```bash
pnpm add @kwooshung/react-no-ssr
```
## Usage
### components
```tsx
import { NoSSR } from '@kwooshung/react-no-ssr';
function App() {
return The content here will only be displayed in the browser;
}
```
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.
```tsx
import { NoSSR } from '@kwooshung/react-no-ssr';
function App() {
return loading...}>The content here will only be displayed in the browser;
}
```
### 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.
```tsx
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;
```
## LICENSE
[MIT](LICENSE)