Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sventschui/preact-ssr-prepass
Drop-in replacement for react-ssr-prepass
https://github.com/sventschui/preact-ssr-prepass
Last synced: 3 months ago
JSON representation
Drop-in replacement for react-ssr-prepass
- Host: GitHub
- URL: https://github.com/sventschui/preact-ssr-prepass
- Owner: preactjs
- Created: 2019-05-25T09:59:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-11-21T04:04:36.000Z (12 months ago)
- Last Synced: 2024-04-14T01:02:16.048Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.68 MB
- Stars: 47
- Watchers: 3
- Forks: 7
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# preact-ssr-prepass
[](http://npm.im/preact-ssr-prepass)
[](https://coveralls.io/github/sventschui/preact-ssr-prepass?branch=master)
[](#backers)
[](#sponsors)
[](https://travis-ci.com/sventschui/preact-ssr-prepass)
> Drop-in replacement for `react-ssr-prepass`.
Neither Preact nor React support `Suspense` on the server as of now. Heavily inspired by `react-ssr-prepass`, `preact-ssr-prepass` provides a two-pass approach with which `Suspense` can be used on the server. In the first pass, `preact-ssr-prepass`
will create a VNode tree and await all suspensions, in the second pass `preact-render-to-string`
can be used to render a vnode to a string.
Even if `preact-ssr-prepass` is designed to do as little as possible, it still adds a slight
overhead since the VNode tree is created twice.
⚠️ Note that this is neither an official Preact nor React API and that the way `Suspense` is handled
on the server might/will change in the future!
# Usage / API
## Awaiting suspensions
`preact-ssr-prepass` needs to be called just before rendering a vnode to a string. See the following
example:
lazy.js:
```js
export default function LazyLoaded() {
return
I shall be loaded and rendered on the server
}
```
index.js:
```js
import { createElement as h } from 'preact';
import { Suspense, lazy } from 'preact/compat';
import renderToString from 'preact-render-to-string';
import prepass from 'preact-ssr-prepass';
const LazyComponent = lazy(() => import('./lazy'));
const vnode = (
I shall not be rendered on the server}>
);
prepass(vnode)
.then(() => {
//
I shall be loaded and rendered on the server
console.log(renderToString(vnode));
});
```
## Custom suspensions/data fetching using the visitor
`preact-ssr-prepass` accepts a second argument that allows you to suspend on arbitrary elements:
```js
ssrPrepass(, (element, instance) => {
if (instance !== undefined && typeof instance.fetchData === 'function') {
return instance.fetchData()
}
});
```
## API
```js
/**
* Visitor function to suspend on certain elements.
*
* When this function returns a Promise it is awaited before the vnode will be rendered.
*/
type Visitor = (element: preact.VNode, instance: ?preact.Component) => ?Promise;
/**
* The default export of preact-ssr-prepass
*
* @param{vnode} preact.VNode The vnode to traverse
* @param{visitor} ?Visitor A function that is called for each vnode and might return a Promise to suspend.
* @param{context} ?Object Initial context to be used when traversing the vnode tree
* @return Promise Promise that will complete once the complete vnode tree is traversed. Note that even if
* a Suspension throws the returned promise will resolve.
*/
export default function prepass(vnode: preact.VNode, visitor?: Visitor, context:? Object): Promise;
```
## Replace react-ssr-prepass (e.g. next.js)
`react-ssr-prepass` is usually used on the server only and not bundled into your bundles but rather
required through Node.js. To alias `react-ssr-prepass` to `preact-ssr-prepass` we recommend to use
`module-alias`:
Create a file named `alias.js`:
```js
const moduleAlias = require('module-alias')
module.exports = () => {
moduleAlias.addAlias('react-ssr-prepass', 'preact-ssr-prepass')
}
```
Require and execute the exported function in your applications entrypoint (before require'ing `react-ssr-prepass`):
```js
require('./alias')();
```
# Differences to `react-ssr-prepass`
The visitor passed to `preact-ssr-prepass` gets a Preact element instead of a React one. When you use `preact/compat`'s `createElement` it will make the element/vnode look as similar to a React element as possible.