ESI Includes in Static Export

[aaronclong]

Goals

ESI include tags can be treated as regular attributes and render correctly in the output. This would allow users to more easily add ESI includes based on their needs and control their configuration directly within the Next.js ecosystem.

Non-Goals

This doesn't wish to change how React handles this because it is part of the server/configuration of the app not the UI library.

Background

ESI includes are common way for a large website or organization to organize their individual subpages. These none HTML tags are used to load custom HTML, JavaScript, and whatever else to render a page correctly. Typically, these are resolved by CDNs and other web-proxy frontends. Here is the W3 Spec for this feature: https://www.w3.org/TR/esi-lang/

While it is possible to create the element in react, their attributes like onerror will not be rendered because despite React 16's changes anything with on gets consumed by React.

return React.createElement(
  'esi:include',
  {
     ...otherProps
    onError: 'continue' // will be swallowed by react.
  }
);

Proposal

In static builds, attributes could be prefix with with a value that on build completion Next.js removes.

return React.createElement(
  'esi:include',
  {
     ...otherProps
    nextstatic-onerror: 'continue' // the prefix is a work in progress
  }
);