JSPM

@rednetio/react-include

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q45440F
  • License MIT

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

Package Exports

  • @rednetio/react-include

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rednetio/react-include) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 |