From 212f540d091b900065d1b60765c2fa15d39fec3b Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 12 Feb 2020 23:03:44 -0500 Subject: [PATCH] Remove with-data-prefetch Example --- examples/with-data-prefetch/README.md | 52 -------------- .../with-data-prefetch/components/link.js | 70 ------------------- examples/with-data-prefetch/package.json | 15 ---- examples/with-data-prefetch/pages/article.js | 67 ------------------ examples/with-data-prefetch/pages/index.js | 25 ------- 5 files changed, 229 deletions(-) delete mode 100644 examples/with-data-prefetch/README.md delete mode 100644 examples/with-data-prefetch/components/link.js delete mode 100644 examples/with-data-prefetch/package.json delete mode 100644 examples/with-data-prefetch/pages/article.js delete mode 100644 examples/with-data-prefetch/pages/index.js diff --git a/examples/with-data-prefetch/README.md b/examples/with-data-prefetch/README.md deleted file mode 100644 index 6f34b621754ab..0000000000000 --- a/examples/with-data-prefetch/README.md +++ /dev/null @@ -1,52 +0,0 @@ -# Example app with prefetching data - -Next.js lets you prefetch the JS code of another page just adding the `prefetch` prop to `next/link`. This can help you avoid the download time a new page you know beforehand the user is most probably going to visit. - -In the example we'll extend the `Link` component to also run the `getInitialProps` (if it's defined) of the new page and save the resulting props on cache. When the user visits the page it will load the props from cache and avoid any request. - -It uses `sessionStorage` as cache but it could be replaced with any other more specialized system. Like IndexedDB or just an in-memory API with a better cache strategy to prune old cache and force new fetching. - -## Deploy your own - -Deploy the example using [ZEIT Now](https://zeit.co/now): - -[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-data-prefetch) - -## How to use - -### Using `create-next-app` - -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: - -```bash -npm init next-app --example with-data-prefetch with-data-prefetch-app -# or -yarn create next-app --example with-data-prefetch with-data-prefetch-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-data-prefetch -cd with-data-prefetch -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - -Deploy it to the cloud with [ZEIT Now](https://zeit.co/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -## Note - -This example is based on the [ScaleAPI article explaining this same technique](https://www.scaleapi.com/blog/increasing-the-performance-of-dynamic-next-js-websites). - -**Note**: it only works in production environment. In development Next.js just avoid doing the prefetch. diff --git a/examples/with-data-prefetch/components/link.js b/examples/with-data-prefetch/components/link.js deleted file mode 100644 index cbc8fa95ca539..0000000000000 --- a/examples/with-data-prefetch/components/link.js +++ /dev/null @@ -1,70 +0,0 @@ -import PropTypes from 'prop-types' -import Link from 'next/link' -import Router from 'next/router' -import { execOnce, warn } from 'next/dist/lib/utils' -import exact from 'prop-types-exact' -import { format, resolve, parse } from 'url' - -export const prefetch = async href => { - // if we're running server side do nothing - if (typeof window === 'undefined') return - - const url = typeof href !== 'string' ? format(href) : href - - const parsedHref = resolve(window.location.pathname, url) - - const { query, pathname } = typeof href !== 'string' ? href : parse(url, true) - - const Component = await Router.prefetch(parsedHref) - - // if Component exists and has getInitialProps - // fetch the component props (the component should save it in cache) - if (Component && Component.getInitialProps) { - const ctx = { pathname, query, isVirtualCall: true } - await Component.getInitialProps(ctx) - } -} - -// extend default next/link to customize the prefetch behaviour -export default class LinkWithData extends Link { - // re defined Link propTypes to add `withData` - static propTypes = exact({ - href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, - as: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - prefetch: PropTypes.bool, - replace: PropTypes.bool, - shallow: PropTypes.bool, - passHref: PropTypes.bool, - scroll: PropTypes.bool, - children: PropTypes.oneOfType([ - PropTypes.element, - (props, propName) => { - const value = props[propName] - - if (typeof value === 'string') { - execOnce(warn)( - `Warning: You're using a string directly inside . This usage has been deprecated. Please add an tag as child of ` - ) - } - - return null - }, - ]).isRequired, - withData: PropTypes.bool, // our custom prop - }) - - // our custom prefetch method - async prefetch() { - // if the prefetch prop is not defined do nothing - if (!this.props.prefetch) return - - // if withData prop is defined - // prefetch with data - // otherwise just prefetch the page - if (this.props.withData) { - prefetch(this.props.href) - } else { - super.prefetch() - } - } -} diff --git a/examples/with-data-prefetch/package.json b/examples/with-data-prefetch/package.json deleted file mode 100644 index d801914456b5e..0000000000000 --- a/examples/with-data-prefetch/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "isomorphic-unfetch": "^2.0.0", - "next": "latest", - "prop-types": "^15.6.0", - "prop-types-exact": "^1.1.1", - "react": "^16.7.0", - "react-dom": "^16.7.0" - } -} diff --git a/examples/with-data-prefetch/pages/article.js b/examples/with-data-prefetch/pages/article.js deleted file mode 100644 index 58efb46db13cf..0000000000000 --- a/examples/with-data-prefetch/pages/article.js +++ /dev/null @@ -1,67 +0,0 @@ -import { Component } from 'react' -import fetch from 'isomorphic-unfetch' -import { format } from 'url' - -export default class Article extends Component { - static async getInitialProps({ req, query, pathname, isVirtualCall }) { - const url = format({ pathname, query }) - - // if we're not running server side - // get the props from sessionStorage using the pathname + query as key - // if we got something return it as an object - if (!req) { - const props = window.sessionStorage.getItem(url) - if (props) { - return JSON.parse(props) - } - } - - // fetch data as usual - const responses = await Promise.all([ - fetch(`https://jsonplaceholder.typicode.com/posts/${query.id}`), - fetch(`https://jsonplaceholder.typicode.com/posts/${query.id}/comments`), - ]) - - const [article, comments] = await Promise.all( - responses.map(response => response.json()) - ) - - const user = await fetch( - `https://jsonplaceholder.typicode.com/users/${article.userId}` - ).then(response => response.json()) - - const props = { article, comments, user } - - // if the method is being called by our Link component - // save props on sessionStorage using the full url (pathname + query) - // as key and the serialized props as value - if (isVirtualCall) { - window.sessionStorage.setItem(url, JSON.stringify(props)) - } - - return props - } - - render() { - const { article, comments, user } = this.props - - return ( -
-

{article.title}

-
- {user.name} -
-

{article.body}

- -
- ) - } -} diff --git a/examples/with-data-prefetch/pages/index.js b/examples/with-data-prefetch/pages/index.js deleted file mode 100644 index e65ef8f4e892f..0000000000000 --- a/examples/with-data-prefetch/pages/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import Link, { prefetch } from '../components/link' - -// we just render a list of 3 articles having 2 with prefetched data -export default () => ( -
-

Next.js - with data prefetch example

- -
-)