react-include

Server Side Include / Edge Side Include components for isomorphic rendering with React.

Why?

You may want to pre-render HTML pages to serve them / store on your CDN, but need some dynamic content anyway. Time to use some Server Side Includes / Edge Side Includes! This library enables you to use them from React.

On the client (in your browser), an AJAX call will be made to emulate the inclusion.

Install

Using yarn:

yarn add react-include

Using npm:

npm install react-include

Server Side Include

Server Side Include are supported by Apache, LiteSpeed, nginx, lighttpd and IIS. They render as an HTML comment which take this form: <!--# include ... -->.

Usage

import { SSI } from 'react-include';

export default () => (
  <main>
    <h1>A random quote</h1>
    <SSI virtual="/random/quote" />
  </main>
);

Edge Side Include

Edge Side Include are implemented by Akamai, Fastly, Varnish, Squid and Mongrel ESI. They render as an HTML tag which takes this form: <esi:include ... />.

Usage

import { ESI } from 'react-include';

export default () => (
  <main>
    <h1>A random quote</h1>
    <ESI src="/random/quote" />
  </main>
);

Properties

| virtual | string | (required) SSI: the URL you want to include | | src | string | (required) ESI: the URL you want to include | | component | string | The wrapper component. Defaults to 'div' | | any other | any | Any other prop will be passed to the wrapper |