2017-02-05 13:43:28 +01:00
# Example app implementing progressive server-side render
2020-01-16 23:23:56 +01:00
Sometimes you want to **not** server render some parts of your application.
For example:
1. Third party components without server render capabilities
2. Components that depend on `window` or other browser only APIs
3. Content isn't important enough for the user (eg. below the fold content)
To handle these cases, you can conditionally render your component using the `useEffect` hook.
This example features:
- A custom hook called `useMounted` , implementing this behavior
- An app with a component that must only be rendered in the client
- A loading component that will be displayed before rendering the client-only component
2019-11-27 17:40:58 +01:00
## Deploy your own
2020-04-21 11:47:12 +02:00
Deploy the example using [Vercel ](https://vercel.com ):
2019-11-27 17:40:58 +01:00
2020-05-27 20:11:39 +02:00
[![Deploy with Vercel ](https://vercel.com/button )](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/progressive-render)
2019-11-27 17:40:58 +01:00
2017-02-05 13:43:28 +01:00
## How to use
2017-12-03 05:30:17 +01:00
### Using `create-next-app`
2020-01-16 23:23:56 +01:00
Execute [`create-next-app` ](https://github.com/zeit/next.js/tree/canary/packages/create-next-app ) with [npm ](https://docs.npmjs.com/cli/init ) or [Yarn ](https://yarnpkg.com/lang/en/docs/cli/create/ ) to bootstrap the example:
2017-12-03 05:30:17 +01:00
2018-03-14 09:09:46 +01:00
```bash
2020-01-16 23:23:56 +01:00
npm init next-app --example progressive-render progressive-render-app
2018-03-14 09:09:46 +01:00
# or
yarn create next-app --example progressive-render progressive-render-app
2017-12-03 05:30:17 +01:00
```
### Download manually
2018-07-11 23:56:15 +02:00
Download the example:
2017-02-05 13:43:28 +01:00
```bash
2020-05-27 20:11:39 +02:00
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/progressive-render
2017-02-05 13:43:28 +01:00
cd progressive-render
```
Install it and run:
```bash
npm install
npm run dev
2018-04-03 14:19:05 +02:00
# or
yarn
yarn dev
2017-02-05 13:43:28 +01:00
```
2020-04-21 11:47:12 +02:00
Deploy it to the cloud with [Vercel ](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example ) ([Documentation](https://nextjs.org/docs/deployment)).