Create react-dynamic-rendering package

Author: midudev

strategies/react-dynamic-rendering/LICENSE

@@ -0,0 +1,13 @@
+Copyright (c) 2019, Miguel Ángel Durán (miduga@gmail.com)
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

strategies/react-dynamic-rendering/README.md

@@ -0,0 +1,41 @@
+# Dynamic Rendering 🔀
+
+If your visitor is a bot, like GoogleBot or Yandex, use Server Side Rendering and Client Side Rendering.
+
+If your visitor is a real user, use Client Side Rendering.
+
+## Results of using it
+
+### Benefits... 👍
+
+✅ Improve TTI
+😴 Lazy Load for the user
+
+### Downsides... 👎
+🚩 Keep Hydration data
+👩‍🔬 Need universal User Agent data
+🤖 Bot still gets full cost
+
+### Keep in mind... 🧠
+🏋️‍ Perfect for stuff below the fold
+🆓 Free resources from your server
+⏳ Help GoogleBot to index your content faster
+
+## How to use 👨‍🏫
+Just wrap the components you want to be static on the client.
+
+```javascript
+import DynamicRendering from '@midudev/react-dynamic-rendering'
+
+export default function DynamicRenderingPage({articles}) {
+  return (
+    <Grid>
+      {articles.map((article, idx) => (
+        <ProgressiveHydration key={idx} force={idx < 3}>
+          <Card {...article} />
+        </ProgressiveHydration>
+      ))}
+    </Grid>
+  )
+}
+```

strategies/react-dynamic-rendering/index.js

@@ -0,0 +1,14 @@
+import {useNearScreen} from '../useNearScreen'
+
+const {useRef} = React
+
+export default function DynamicRendering({children, isBot, force}) {
+  const ref = useRef(null)
+  const isNearScreen = useNearScreen({ref})
+
+  if (isBot || isNearScreen || force) {
+    return children
+  } else {
+    return <div ref={ref} style={{height: `100px`, border: '1px solid red'}} />
+  }
+}

strategies/react-dynamic-rendering/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@midudev/react-dynamic-rendering",
+  "version": "1.0.0",
+  "description": "Dynamic Rendering allows you to render React components different depending on user agent. If your visitor is a bot, like GoogleBot or Yandex, use Server Side Rendering + hydration. If your visitor is a real user, use only Client Side Rendering.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["react", "react rendering", "dynamic rendering", "static rendering", "progressive hydration"],
+  "author": "Miguel Ángel Durán (@midudev) miduga@gmail.com",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  }
+}