Skip to content

Commit

Permalink
chore: update README.md cases
Browse files Browse the repository at this point in the history
  • Loading branch information
MatthewPattell committed Feb 8, 2024
1 parent ede29d5 commit 2076fb6
Showing 1 changed file with 36 additions and 6 deletions.
42 changes: 36 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
# Vite template

## Demo links
[SSR Docker (Streaming supported)](https://vite-template.lomray.com/)
[SSR Amplify (Streaming not supported)](https://prod.d947n8vxd7uac.amplifyapp.com/)
[SSR Vercel (Streaming not supported)](https://vite-template-three.vercel.app/)
[SPA Amplify](https://prod.d2fyemmi74bwx3.amplifyapp.com/)
- Streaming supported
- [SSR Docker (Streaming supported)](https://vite-template.lomray.com/)
- Streaming **NOT** supported
- [SSR Amplify (Streaming not supported)](https://prod.d947n8vxd7uac.amplifyapp.com/)
- [SSR Vercel (Streaming not supported)](https://vite-template-three.vercel.app/)
- [SPA Amplify](https://prod.d2fyemmi74bwx3.amplifyapp.com/)

## Used libraries
- [VITE SSR BOOST](https://github.com/Lomray-Software/vite-ssr-boost)
Expand Down Expand Up @@ -36,8 +38,8 @@ __NOTE: see .github for understand CI/CD__
2. Create Pull Request & test
3. Squash & merge into `prod`

## WARNING
Right solution for wrap `<Outlet />` into `<Suspense />`. If you would like to wrap your lazy routes only once:
## Some cases to pay attention to.
- Right solution for wrap `<Outlet />` into `<Suspense />`. If you would like to wrap your lazy routes only once:
```typescript jsx
import { Outlet, useLocation } from 'react-router-dom';
import type { FCRoute } from '@lomray/vite-ssr-boost/interfaces/fc-route';
Expand All @@ -59,6 +61,34 @@ const MyLayout: FCRoute = () => {
}
```

- In some cases nested Suspense should be memorized for preventing "This Suspense boundary received an update before it finished hydrating."
```typescript jsx
/**
* Parent component can receive update what will entail rerender.
* We should avoid rerenders for children suspense.
* @constructor
*/
const Parent: FC = () => {
/**
* Memorize Suspense to avoid errors
*/
const children = useMemo(
() => (
<Suspense fallback={<Fallback/>}>
<UserWrapper id={id} fields={restFields}/>
</Suspense>
),
[],
);

return (
<div style={{ paddingLeft: '50px', textAlign: 'left' }}>
{children}
</div>
);
}
```

## Docker build
[See github workflow](.github/workflows/release.yml) or
```bash
Expand Down

0 comments on commit 2076fb6

Please sign in to comment.