Remix "Enhancers"

[ryanflorence]

Don't have a good name for this API yet, but it's a lot like "partial hydration" or even "progressive enhancement".

A lot of the time your page is mostly static markup with just a few dynamic bits (a carousel, some tabs, a dropdown, a fancy form, a chart, etc.) At the moment, you have to bring in a lot of JavaScript and HTML on the initial page load to have a highly dynamic page.

Enhancements will allow you to render mostly static markup, and then just "enhance" a few roots.

Two approaches, I don't know pros and cons yet, but probably have some. In either case, Remix will statically analyze your code to find enhancements at build time and create bundled entry points out of them. At runtime, we know the asset manifest and can load that bundle with the same mechanisms that we load route bundles: /_remix/manifest. When an enhancement is on the page, its JavaScript will be loaded and executed.

Dynamic Component

Point to a file in your app and Remix will bundle it up:

<Enhancement file="some/file/relative/to/app">
  <div>Server rendered content</div>
</Enhancement>

Or use inline JavaScript:

<Enhancement
  src={`
    let el = document.getElementById("thing")
    el.style.color = "red"
 `}
>
    <div id="thing">Server rendered content</div>
  </Enhancement>
</div>

Static function

Alternative approach is a static function, unsure of pros-cons right now.

import * as enhance from "@remix-run/enhance";

let Thing1 = enhance.file("some/file");
let Thing2 = enhance.src(`
  let el = document.getElementById("thing")
  el.style.color = "red"
`);

// then render
<div>
  <Thing1>
    <div>Server rendered content</div>
  </Thing1>

  <Thing2>
    <div id="thing">Server rendered content</div>
  </Thing2>
</div>;

Magic variables

You probably want access to the root element almost every time, could be like __filename.

<Enhance src={`__element.style.color = "red"`}>
  <div>Howdy</div>
</Enhance>

You probably want to pass in some stuff you know from the outer world.

let handleClick = () => setStateInOuterWorld();

<Enhance
  context={{ onClick: handleClick }}
  src={`__element.onclick = __context.onClick`}
>
  <div>Howdy</div>
</Enhance>;

Or require an enhancement to be a function, then we can pass stuff in rather than use magic globals:

let handleClick = () => setStateInOuterWorld();

<Enhance
  args={[onClick]}
  src={`(onClick, element) => {
    // element is always last (or first, whatever)
    element.onclick = onClick;
  `}
>
  <div>Howdy</div>
</Enhance>;

React Root Enhancers

While the previous examples would just run some really basic JavaScript, if you want a React root, we could have a special component for that that would automatically create a react root, render into it, and pass props down from the server app to it.

let handleClick = () => setStateInOuterWorld();

<EnhanceReact componentFile="some/file" onClick={handleClick} />;

Server placeholder

If children are provided, they are the server placeholder.

For EnhanceReact, we can call renderToString() on it.

// some/file.js
export default function Something({ onClick }) {
  return <button onClick={onClick}>I am a button</button>;
}

// outer app
<EnhanceReact file="some/file" />;

// server output
ReactDOMServer.renderToString(<Something {...__context} />);
// <button>I am a button</button>

Bring our friends to the party

While React will be rendering the server generated HTML, there's no reason we couldn't create something like a Svelte enhancer:

<div>
  <h1>All just static markup</h1>
  <SvelteEnhancer filename="some/svelte/component" />
</div>

There's a good chance some of your marketing pages would do well to not load all of React onto the page!

Separate Scripts component

To get these scripts on the page we'll likely need a separate <Scripts/> component, like:

<Scripts/>
<EnhancerScripts />

Because some pages don't need the React app scripts, but will need enhancers.

[kentcdodds]

I know it's a long shot... But what would require me to specify what is an enhancer? Could Remix not determine what needs to be enhanced automatically based on components that use hooks/events 🤔

[benadam11]

Interesting discussion on some different tactics people are exploring

https://twitter.com/Katy_Wings/status/1283384379549650946?s=20