@mpth/react-no-ssr
React component to wrap non SSR components.
Last updated 6 months ago by mpth .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @mpth/react-no-ssr 
SYNC missed versions from official npm registry.

@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

Current Tags

  • 1.0.1                                ...           latest (6 months ago)

10 Versions

  • 1.0.1                                ...           6 months ago
  • 1.0.0                                ...           6 months ago
  • 0.0.8                                ...           6 months ago
  • 0.0.7                                ...           6 months ago
  • 0.0.6                                ...           6 months ago
  • 0.0.5                                ...           6 months ago
  • 0.0.4                                ...           6 months ago
  • 0.0.3                                ...           6 months ago
  • 0.0.2                                ...           6 months ago
  • 0.0.1                                ...           6 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |