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
yarn add @mpth/react-no-ssr
Foo is our client only component:
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.
Usually, we need to add some loading text or similar until <Foo /> component starts to render. Here's how to do it.
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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent