Skip to content

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`

License

Notifications You must be signed in to change notification settings

maapteh/react-no-ssr

Repository files navigation

@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

Installation

yarn add @mpth/react-no-ssr

Usage

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.

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.

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

About

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`

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •