react-ssr-fork - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

LICENSE.md

dist/index.js

		@@ -191,3 +191,3 @@ (function (global, factory) {
		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderConsumerContent", function (isClient) {
		if (isClient === null) {
		if (isClient == undefined) {
		warn('<Client> component must be wrapped in <ForkProvider>.');
		@@ -231,2 +231,6 @@ }
		_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "renderConsumerContent", function (isClient) {
		if (isClient == undefined) {
		warn('<Server> component must be wrapped in <ForkProvider>.');
		}

		return isClient ? null : _this.props.children;
		@@ -233,0 +237,0 @@ });

package.json

		{
		"name": "react-ssr-fork",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "React SSR Fork facilitates rendering different content on server and client side.",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -24,3 +24,3 @@ # React SSR Fork

		1) Your client side entry might look like this (`<ForkProvider>` wrapping is obligatory on client side):
		1) Your client side entry might look like this (`<ForkProvider>` wrapping is obligatory):

		@@ -42,3 +42,3 @@ ```jsx

		2) And your server side entry file could look this way (`<ForkProvider>` wrapping can be skipped on server side):
		2) And your server side entry file could look this way (`<ForkProvider>` wrapping is obligatory):

		@@ -52,7 +52,11 @@ ```jsx

		const content = renderToString(<App />);
		const content = renderToString(
		<ForkProvider>
		<App />
		</ForkProvider>
		);
		// ...
		```

		3) Then use `<Client>` component to render client side content, and respectively `<Server>` to render server side content. Your `<App>` component might look like this:
		3) Then use `<Client>` component to render specifically client side content, and respectively `<Server>` to render server side content. Your `<App>` component might look like this:

		@@ -84,5 +88,4 @@ ```jsx
		## Requirements
		* Both `<Client>` and `<Server>` need to be wrapped inside `<ForkProvider>` on client side. While on server side `<ForkProvider>` is not obligatory
		* On client side the library is intended to be used with `ReactDOM.hydrate()`. Do not use it with `ReactDOM.render()`
		* The library works with React 16.3 and above
		* On both client and server sides `<Client>` and `<Server>` must to be wrapped inside `<ForkProvider>`
		* Requires React 16.3 and above

		@@ -118,3 +121,3 @@ ## Why not use `this.state.isCient` approach?

		On client side during initial render `this.state.isClient` is `false`. Thus `<Message>` outputs `<div>I run on server</div>`. This output matches the one sent from server side, and React doesn't throw any mismatch warnings during hydration.
		On client side during initial render (hydration) `this.state.isClient` is `false`. Thus `<Message>` outputs `<div>I run on server</div>`. This output matches the one sent from server side, and React doesn't throw any mismatch warnings during hydration.

		@@ -125,3 +128,3 @@ Right away after mounting of `<Message>`, `componentDidMount()` method is invoked and `this.state.isClient` becomes `true`. As result `<Message>` renders `<div>I run on client</div>`.

		But there is a drawback. If a new instance of `<Message>` is rendered on the client side on later stages, two-pass rendering will be applied even if that's unnecessary. This makes your component slower. That's the problem solved by React SSR Fork library, which prevents unnecessary re-rerending.
		But there is a drawback. If a new instance of `<Message>` is rendered on the client side on later stages, two-pass rendering will be applied even if that's unnecessary. This makes your component slower. That's the problem solved by React SSR Fork library, which prevents unnecessary two-pass rendering when this is not necessary.

		@@ -132,3 +135,3 @@ ## Unit testing

		`<ForkProvider>` accepts a special boolean prop `canUseDom`. Use to set manually client or server environment in your unit tests. For example:
		`<ForkProvider>` accepts a special boolean prop `canUseDom` meant to indicate manually the client or server environment in your unit tests. For example:

		@@ -139,3 +142,3 @@ ```jsx

		import ForkProvider from 'components/fork-provider';
		import { ForkProvider } from 'react-ssr-fork';

		@@ -158,2 +161,3 @@ function App() {
		const wrapper = mount(
		// Client environment: canUseDom=true
		<ForkProvider canUseDom={true}>
		@@ -169,2 +173,3 @@ <App />
		const wrapper = mount(
		// Server environment: canUseDom=false
		<ForkProvider canUseDom={false}>
		@@ -178,2 +183,6 @@ <App />
		});
		```
		```

		## License

		Licensed under [MIT](https://github.com/ocoboco/react-ssr-fork/blob/master/LICENSE.md)

react-ssr-fork - npm Package Compare versions

Improved metrics