npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kwooshung/react-no-ssr

v1.1.4

Published

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 br

Downloads

423

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.

GitHub License GitHub Release Date - Published_At GitHub last commit GitHub code size in bytes GitHub top language GitHub pull requests GitHub issues Github Stars NPM Version Npm.js Downloads/Week Github CI/CD codecov Maintainability Gitee Repo

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;

LICENSE

MIT