Skip to content

Commit ebd308f

Browse files
authored
Lazy component documentation (#276)
* added documentation for using lazy components with this library * added more package to install * fixed typos
1 parent 5c6877d commit ebd308f

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed

README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,62 @@ app.get('/:fox', (req, res) => {
8686

8787
---
8888

89+
### `Suspense` & `lazy` components with [`preact/compat`](https://www.npmjs.com/package/preact) & [`preact-ssr-prepass`](https://www.npmjs.com/package/preact-ssr-prepass)
90+
91+
```bash
92+
npm install preact preact-render-to-string preact-ssr-prepass
93+
```
94+
95+
```jsx
96+
export default () => {
97+
return (
98+
<h1>Home page</h1>
99+
)
100+
}
101+
```
102+
103+
```jsx
104+
import { Suspense, lazy } from "preact/compat"
105+
106+
// Creation of the lazy component
107+
const HomePage = lazy(() => import("./pages/home"))
108+
109+
const Main = () => {
110+
return (
111+
<Suspense fallback={<p>Loading</p>}>
112+
<HomePage />
113+
</Suspense>
114+
)
115+
}
116+
```
117+
118+
```jsx
119+
import { render } from "preact-render-to-string"
120+
import prepass from "preact-ssr-prepass"
121+
import { Main } from "./main"
122+
123+
const main = async () => {
124+
// Creation of the virtual DOM
125+
const vdom = <Main />
126+
127+
// Pre-rendering of lazy components
128+
await prepass(vdom)
129+
130+
// Rendering of components
131+
const html = render(vdom)
132+
133+
console.log(html)
134+
// <h1>Home page</h1>
135+
}
136+
137+
// Execution & error handling
138+
main().catch(error => {
139+
console.error(error)
140+
})
141+
```
142+
143+
---
144+
89145
### License
90146

91147
[MIT](http://choosealicense.com/licenses/mit/)

0 commit comments

Comments
 (0)