Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

react-no-ssr

React component to wrap non SSR friendly components

Subscribe to updates I use react-no-ssr


Statistics on react-no-ssr

Number of watchers on Github 210
Number of open issues 3
Main language JavaScript
Average time to merge a PR about 2 hours
Open pull requests 1+
Closed pull requests 1+
Last commit over 3 years ago
Repo Created over 3 years ago
Repo Last Updated over 1 year ago
Size 10 KB
Organization / Authorkadirahq
Contributors2
Page Updated
Do you use react-no-ssr? Leave a review!
View open issues (3)
View react-no-ssr activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating react-no-ssr for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

react-no-ssr

React component to wrap non SSR components.

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.

Installation

npm i --save react-no-ssr

Usage

Let's say Comments is our client only component. Now we need to render it only on the client. Here's how we do it.

import React from 'react';
import NoSSR from 'react-no-ssr';
import Comments from './comments.jsx';

const MyPage = () => (
  <div>
    <h2>My Blog Post</h2>
    <hr />
    <NoSSR>
      <Comments />
    </NoSSR>
  </div>
);

Then, <Comments /> component is only rendered on the client just after it's mounted. It doesn't render when the SSRed HTML is booting up in the client. So, there won't be any React warning messages on the console.

Render a Component on SSR

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

const Loading = () => (<div>Loading...</div>);
const MyPage = () => (
  <div>
    ....
    <NoSSR onSSR={<Loading />}>
      <Comments />
    </NoSSR>
  </div>
);

Then <Loading /> component will be rendered until <Comments /> component is rendered to the DOM.

react-no-ssr open issues Ask a question     (View All Issues)
  • about 3 years onSSR causes injection error when container top-element is identical to content
react-no-ssr open pull requests (View All Pulls)
  • Update package.json
react-no-ssr list of languages used
Other projects in JavaScript