@rednetio/react-include
Version:
Server Side Include / Edge Side Include components for isomorphic rendering with React.
87 lines (60 loc) • 2.28 kB
Markdown
# react-include
[Server Side Include][SSI] / [Edge Side Include][ESI] components for isomorphic
rendering with React.
[SSI]: https://en.wikipedia.org/wiki/Server_Side_Includes
[ESI]: https://en.wikipedia.org/wiki/Edge_Side_Includes
## 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
```js
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
```js
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 |