Create react-progressive-hydration package

Author: midudev

strategies/react-progressive-hydration/LICENSE

@@ -0,0 +1,13 @@
+Copyright (c) 2019, Miguel Ángel Durán ([email protected])
+
+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-progressive-hydration/README.md

@@ -0,0 +1,46 @@
+# Progressive Hydration 🏁
+
+Server Side Rendering for a component and skip the hydration step on the client but, as soon as it appears on the viewport, hydrate it. Useful for list of items or components that are not visible on the viewport but yet you need to render them for SEO.
+
+## Results of using it
+
+### Benefits... 👍
+
+👀 Only re-hydrate what's visible
+🤳 Thus could greatly improve TTI
+🔛 Activate interactivity on demand
+
+### Downsides... 👎
+🏋️‍ Hydration data still there
+🥪 Element wrapper needed (ex. <div>)
+
+### Keep in mind... 🧠
+📸 Kind of lazy loading experience
+🤖 GoogleBot will get the rendered static html (not hydrated)
+
+## How to use 👨‍🏫
+Just wrap the components you want to be hydrated progressively.
+
+Use `force` prop in order to hydrate the component no matter if it's below the fold.
+
+```javascript
+import ProgressiveHydration from '@midudev/react-progressive-hydration'
+
+export default function ProgressiveHydrationPage({articles}) {
+  return (
+    <Grid>
+      {articles.map((article, idx) => (
+        <ProgressiveHydration key={idx} force={idx < 3}>
+          <Card {...article} />
+        </ProgressiveHydration>
+      ))}
+    </Grid>
+  )
+}
+```
+
+
+## Resources 🔗
+[The case of partial hydration (with Next and Preact)](https://medium.com/spring-media-techblog/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5)
+[Rendering on the Web: Performance Implications of Application Architecture](https://www.youtube.com/watch?v=k-A2VfuUROg)
+[Hack for avoiding hydration](https://github.com/facebook/react/issues/10923#issuecomment-338715787)

strategies/react-progressive-hydration/index.js

@@ -0,0 +1,23 @@
+import {useNearScreen} from '../useNearScreen'
+
+const {useRef} = React
+
+export default function ProgressiveHydration({children, force}) {
+  const ref = useRef(null)
+  const render = typeof window === 'undefined' || force
+  const isNearScreen = useNearScreen({ref})
+
+  // we're in the server or the element is above the fold
+  if (render || isNearScreen) {
+    return <div>{children}</div>
+  }
+
+  // avoid hydration until is in the viewport
+  return (
+    <div
+      ref={ref}
+      suppressHydrationWarning
+      dangerouslySetInnerHTML={{__html: ''}}
+    />
+  )
+}

strategies/react-progressive-hydration/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@midudev/react-progressive-hydration",
+  "version": "1.0.0",
+  "description": "Server Side Rendering for a component and skip the hydration step on the client but, as soon as it appears on the viewport, then hydrate it. Useful for list of items.",
+  "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) [email protected]",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  }
+}
+