https://github.com/trambarhq/relaks-harvest

Harvest HTML and text nodes from asynchronous Relaks components
https://github.com/trambarhq/relaks-harvest

Last synced: 2 days ago
JSON representation

Harvest HTML and text nodes from asynchronous Relaks components

• Host: GitHub
• URL: https://github.com/trambarhq/relaks-harvest
• Owner: trambarhq
• License: mit
• Created: 2018-08-25T23:06:59.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-09-18T22:34:15.000Z (over 2 years ago)
• Last Synced: 2024-12-22T09:07:33.007Z (18 days ago)
• Language: JavaScript
• Homepage:
• Size: 487 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Relaks Harvest

Relaks Harvest enables server-side rendering (SSR) of a React application that uses [Relaks](https://github.com/trambarhq/relaks). It takes a ReactElement (or Preact VNode) and recursively renders all sub-components. When it encounters a Relaks component, it calls `renderAsync()` and waits for the returned promise to fulfill. The end result is a tree of ReactElements (or VNode) that are are all simple HTML tags, which can then be given to [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html#rendertostring) (or [preact-render-to-string](https://github.com/developit/preact-render-to-string)).

Relaks Harvest is designed to run on both the server-side and the client-side. On the server-side, it's used to generate the HTML that a visitor will see initially. On the client-side, it's used to trigger pre-caching of data prior to the switch to client-side rendering (while the visitor is looking at the server-generated contents). Provided that the same code is used for in both situations, the state of the client will sync up perfectly, yielding a seamless transition from SSR to CSR.

For an example on how to use Relaks Harvest, please look at [relaks-starwars-example-isomorphic](https://github.com/trambarhq/relaks-starwars-example-isomorphic).

## Install

```sh

npm --save-dev install relaks-harvest

```

## Usage

React:

```js

import { harvest } from 'relaks-harvest';

import { renderToString } from 'react-dom/server';

let appElement = ;

let appHTMLElement = async harvest(appElement);

let appHTML = ReactDOMServer.renderToString(appHTMLElement);

```

Preact:

```js

import { harvest } from 'relaks-harvest/preact';

import { render } from 'preact-render-to-string';

let appElement = ;

let appHTMLElement = async harvest(appElement);

let appHTML = render(appHTMLElement);

```