Create react-static-content package

Author: midudev

strategies/react-static-content/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-static-content/README.md

@@ -0,0 +1,46 @@
+## Static Content 📸
+
+Server Side Rendering for a component and skip the hydration step on the client. Useful for components that don't need to use interactivity (like SEO links).
+
+## Results of using it
+
+### Benefits... 👍
+
+⚡ Avoid re-hydrate for static components
+🤳 Thus could greatly improve TTI
+
+### Downsides... 👎
+⚠️ Lose interactivity
+🏋️‍ Hydration data still there
+🥪 Element wrapper (ex. <div>)
+
+### Keep in mind... 🧠
+📸 For expensive rendering lists or static content (SEO Footers)
+🤖 GoogleBot is definitely going to detect it
+
+## How to use 👨‍🏫
+Just wrap the components you want to be static on the client.
+
+```javascript
+import StaticContent from '@midudev/react-static-content'
+
+export default function SeoFooter({listOfLinks}) {
+  return (
+    <footer>
+      <StaticContent>
+        {listOfLinks.map((link, idx) => (
+            <a key={idx} href={link.href} title={link.literal} />
+                <span>{link.literal}</span>
+            </a>
+        ))}
+      </StaticContent>
+    </footer>
+  )
+}
+```
+
+
+## Resources 🔗
+[Tweet about suppressHydrationWarning](https://twitter.com/reactjs/status/928650326701494273?lang=es)
+[suppressHydrationWarning Pull Request](https://github.com/facebook/react/pull/11126)
+[Hack for avoiding hydration](https://github.com/facebook/react/issues/10923#issuecomment-338715787)

strategies/react-static-content/index.js

@@ -0,0 +1,29 @@
+const {useEffect, useRef, useState} = React
+
+export default function StaticContent({children}) {
+  const ref = useRef(null)
+  const [render, setRender] = useState(typeof window === 'undefined')
+
+  useEffect(function() {
+    // check if the innerHTML is empty as client side navigation
+    // need to render the component without server-side backup
+    const isEmpty = ref.current.innerHTML === ''
+    if (isEmpty) {
+      setRender(true)
+    }
+  }, [])
+
+  // if we're in the server or a spa navigation, just render it
+  if (render) {
+    return <div>{children}</div>
+  }
+
+  // avoid re-render on the client
+  return (
+    <div
+      ref={ref}
+      suppressHydrationWarning
+      dangerouslySetInnerHTML={{__html: ''}}
+    />
+  )
+}

strategies/react-static-content/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@midudev/react-static-content",
+  "version": "1.0.0",
+  "description": "Server Side Rendering for a component and skip the hydration step on the client. Useful for components that don't need to use interactivity (like SEO links).",
+  "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"
+  }
+}
+