react-no-ssr

KO | EN

gitlite — search

#ai #typescript #llm #golang #android #deep-learning #linux #docker #windows #awesome #awesome-list #pytorch #mcp #openai

(★ 10)

Simple component for not rendering its children on the server, option to have loading component `@mpth/react-no-ssr`. Another module is available where you can load children when they come into view: `@mpth/react-in-view`

react-no-ssr 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @mpth/react-no-ssr
> React component to wrap non SSR components, speeding up the eventloop while rendering pages SSR. Works with React >= 16.5.0

When working with Server Side Rendering(SSR) enabled apps, you have to deal with client only components. This wrapper makes it simple to work with those components.
[npmjs.com/package/@mpth/react-no-ssr](https://www.npmjs.com/package/@mpth/react-no-ssr)

### Installation

```
yarn add @mpth/react-no-ssr
```

### Usage

`Foo` is our **client only** component:

```js
import React from 'react';
import NoSSR from '@mpth/react-no-ssr';
import Foo from '../modules/foo';
import Bar from '../modules/bar';

const Page = () => (
  <>
    <h1>Page</h1>
    <Bar />
    <NoSSR>
      <Foo />
    </NoSSR>
  </>
);
```

Then, `<Foo />` component is only rendered on the client just after it's mounted.

### Render a Component on SSR

Usually, we need to add some loading text or similar until `<Foo />` component starts to render. Here's how to do it.

```js
const Loading = () => (<div>Loading...</div>);
const Page = () => (
  <>
    ....
    <NoSSR fallback={<Loading />}>
      <Foo />
    </NoSSR>
  </>
);
```

Now `<Loading />` component will be rendered until `<Foo />` component is rendered to the DOM.

[![Codecov Coverage](https://img.shields.io/codecov/c/github/maapteh/react-no-ssr/master.svg?style=flat-square)](https://codecov.io/gh/maapteh/react-no-ssr/)

react-no-ssr

react-no-ssr 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-no-ssr

react-no-ssr 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README