Name: react-no-ssr
Owner: KADIRA
Description: React component to wrap non SSR friendly components
Created: 2016-02-19 04:52:04.0
Updated: 2018-05-22 05:40:52.0
Pushed: 2017-11-06 15:30:05.0
Homepage: null
Size: 10
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
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.
i --save react-no-ssr
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.
rt React from 'react';
rt NoSSR from 'react-no-ssr';
rt Comments from './comments.jsx';
t MyPage = () => (
iv>
<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.
Usually, we need to add some loading text or similar until <Comments />
component starts to render. Here's how to do it.
t Loading = () => (<div>Loading...</div>);
t MyPage = () => (
iv>
....
<NoSSR onSSR={<Loading />}>
<Comments />
</NoSSR>
div>
Then <Loading />
component will be rendered until <Comments />
component is rendered to the DOM.