rsnext/examples/with-prefetching/README.md

# Example app with prefetching pages

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example with-prefetching with-prefetching-app
# or
yarn create next-app --example with-prefetching with-prefetching-app
```

### Download manually

Download the example:

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-prefetching
cd with-prefetching
```

Install it and run:

```bash
npm install
npm run dev
# or
yarn
yarn dev
```

Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

```bash
now
```

## The idea behind the example

This example features:

- An app with four simple pages

  - Home/Features: Default api
  - About: Imperative api
  - Contact: Disable api
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 20:13:40 +01:00			`# Example app with prefetching pages`

Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00			`## How to use`
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 20:13:40 +01:00
examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 05:30:17 +01:00			### Using `create-next-app`

Replace the deprecated Create Next App URL (#9032) 2019-10-11 05:34:14 +02:00			Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 05:30:17 +01:00
Examples: use npx and yarn create to run create-next-app on examples (#4002) * remove global npm install of create-next-app * add npx to create-next-app command in examples * add bash to shell snippets * add yarn create to next-app command in examples * fix READMEs named with lowercase * change READMEs to use UPPERCASE 2018-03-14 09:09:46 +01:00			```bash
			`npx create-next-app --example with-prefetching with-prefetching-app`
			`# or`
			`yarn create next-app --example with-prefetching with-prefetching-app`
examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 05:30:17 +01:00			```

			`### Download manually`

#4751 - Explicitly mention install when cloning examples (#4758) Preferably this installation wouldn't be necessary, but in lieu of a fix... #4751 2018-07-11 23:56:15 +02:00			`Download the example:`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00
			```bash
Use canary for all example downloads (#3411) 2017-12-07 03:12:42 +01:00			`curl https://codeload.github.com/zeit/next.js/tar.gz/canary \| tar -xz --strip=2 next.js-canary/examples/with-prefetching`
examples: simplify download instruction 2016-12-22 10:07:54 +01:00			`cd with-prefetching`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00			```

Add/data fetch example (#485) * Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme 2016-12-23 00:05:49 +01:00			`Install it and run:`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00
			```bash
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 20:13:40 +01:00			`npm install`
Add/data fetch example (#485) * Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme 2016-12-23 00:05:49 +01:00			`npm run dev`
Examples: stabalise README format and create-next-app usage (#4009) * Examples: clarify language around Yarn create & npx * add missing READMEs and create-next-app usage * suggest people tag jthegedus in firebase related issues * add yarn alt instructions * cerebraljs example readme & fixes 2018-04-03 14:19:05 +02:00			`# or`
			`yarn`
			`yarn dev`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00			```

Add/data fetch example (#485) * Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme 2016-12-23 00:05:49 +01:00			`Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))`
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00
			```bash
Add/data fetch example (#485) * Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme 2016-12-23 00:05:49 +01:00			`now`
Prefetch pages with Service Workers (#375) * Register the service worker. * Update prefetcher code to do prefetching. * Implement the core prefetching API. support "import <Link>, { prefetch } from 'next/prefetch'" * Implement a better communication system with the service worker. * Add a separate example for prefetching * Fix some typos. * Initiate service worker support even prefetching is not used. This is pretty important since initiating will reset the cache. If we don't do this, it's possible to have old cached resources after the user decided to remove all of the prefetching logic. In this case, even the page didn't prefetch it'll use the previously cached pages. That because of there might be a already running service worker. * Use url module to get pathname. * Move prefetcher code to the client from pages Now we also do a webpack build for the prefetcher code. * Add prefetching docs to the README.md * Fix some typo. * Register service worker only if asked to prefetch We also clean the cache always, even we initialize the service worker or not. 2016-12-15 20:13:40 +01:00			```
Add/move examples (#470) * Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example 2016-12-22 06:10:54 +01:00
			`## The idea behind the example`

			`This example features:`

Remove deploy to now button from all examples (#7101) 2019-04-22 16:56:02 +02:00			`- An app with four simple pages`
Update with-prefetching example (#9101) ## Changelog - Remove `getInitialProps` - Explain variants - Reflect latest changes in the prefetch api - Update UI 2019-10-18 07:31:39 +02:00
			`- Home/Features: Default api`
			`- About: Imperative api`
			`- Contact: Disable api`