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,  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.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.