Optimizing React SSR using Partial Hydration

Usually publicly accessible indexed pages (SEO) are mostly static.

*Example of page/components structure

*Using SSR + FULL hydration

*Using SSR + PARTIAL hydration

*Example of partial hydration. Server code

import express from "express";
import ReactDOMServer from "react-dom/server";
import App from "../src/App";
const app = express();
const router = express.Router();

router.use("^/$", (req, res, next) => { // 👈 routing rules
    fs.readFile(path.resolve("./build/index.html"), "utf8", (err, data) => {
        if (err) {
            return res.status(500).send("An error occurred");
        }
        return res.send(
            data.replace(
                '<div id="root"></div>',
                // don't need window.__initialProps
                `<div id="root">${ReactDOMServer.renderToString(<App {...initialProps} />)}</div>` // 👈
            )
        );
    });
});
app.use(router);
// ...
app.listen(8080, () => console.log(`SSR running on port 8080`));

*Need to run a NodeJS server (Express, Koa)

*Example of partial hydration. Client code

import React from "react";
import { Layout, Section, Navbar, Footer } from "./components"
import { withHydration } from "./hydration"; // 👈
import "./App.css";

const HydratedNavbar = withHydration(Navbar); // 👈
const HydratedSection = withHydration(Section); // 👈

export default function App() {
    return (
        <Layout className="App">
            <HydratedNavbar {...navbarProps} /> // 👈
            <HydratedSection title="Dynamic Section" /> // 👈
            <Section title="Static Section"/>
            <Footer {...footerProps} />
        </Layout>
    );
}

*Partial hydration implementation. Simplified

let uniqueId = 0

const withHydration = Component => {
  const hydrationId = uniqueId++

  if(window === "undefined") {
    // executed on the server 
    return props => (
      <>
        <script
          type="text/json"
          data-hydration-id={hydrationId}
          dangerouslySetInnerHTML={{ __html: JSON.stringify(props) }}
        />
        <div>
          <Component {...props} />
        </div>
      </>
    )
  }
  // executed on the client
  const script = document.querySelector(`script[data-hydration-id="${hydrationId}"]`)
  const props = JSON.parse(script.innerHTML)
  ReactDOM.hydrate(<Component {...props} />, script.nextElementSibling)
}

*Edge case. Multiple instances

import React from "react";
import { Layout, Section, Navbar, Footer } from "./components"
import { hydrated } from "./hydration";
import "./App.css";

const HydratedNavbar = withHydration(Navbar);
const HydratedSection = withHydration(Section);

export default function App() {
    return (
        <Layout className="App">
            <Hydrated.Navbar {...navbarProps}/>
            <Hydrated.Section title="Dynamic Section" />
            <Hydrated.Section title="Dynamic Section 2" /> // 👈
            <Section title="Static Section" />
            <Footer {...footerProps} />
        </Layout>
    );
}

*Edge case. Multiple instances. Solution

let uniqueId = 0

const withHydration = Component => {
    const hydrationId = uniqueId++
    if(window === "undefined") {
        // executed on the server 
        return props => (
            <>
                <script
                type="text/json"
                data-hydration-id={hydrationId}
                dangerouslySetInnerHTML={{ __html: JSON.stringify(props) }}
                />
                <div>
                    <Component {...props} />
                </div>
            </>
        )
    }
    // executed on the client. UPDATED
    document.querySelectorAll(`script[data-hydration-id="${hydrationId}"]`) // 👈
        .forEach((element) => { // 👈
            const props = JSON.parse(element.innerHTML);
            ReactDOM.hydrate(<Component {...props} />, element.nextElementSibling);
        });
}

*Partial hydration. "hydrated" helper function

import React from "react";
import { Layout, Section, Navbar, Footer } from "./components"
import { hydrated } from "./hydration";  // 👈 helper function
import "./App.css";

const Hydrated = hydrated({ Navbar, Section }); // 👈

export default function App() {
    return (
        <Layout className="App">
            <Hydrated.Navbar {...navbarProps} />
            <Hydrated.Section title="Dynamic Section" />
            <Section title="Static Section"/>
            <Footer {...footerProps} />
        </Layout>
    );
}

*Partial hydration. "hydrated" helper function. Implementation

export const hydrated = (components) => {
    const Hydrated = {};

    Object.entries(components).forEach(([name, Component]) => {
        Hydrated[name] = withHydration(Component);
    });

    return Hydrated;
};

*Checkout example in GH