Download the example [or clone the repo](https://github.com/zeit/next.js):

curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/hello-world

cd hello-world

Install it and run:

npm install

npm run dev

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

now

With shallow routing, we could change the URL without actually running the `getInitialProps` every time you change the URL.

We do this passing the `shallow: true` option to `Router.push` or `Router.replace`.

{

"name": "with-shallow-routing",

"version": "1.0.0",

"scripts": {

"dev": "next",

"build": "next build",

"start": "next start"

},

"dependencies": {

"next": "next@beta",

"react": "^15.4.2",

"react-dom": "^15.4.2"

},

"author": "",

"license": "ISC"

}

export default () => (

<div>About us</div>

import React from 'react'

import Link from 'next/link'

import Router from 'next/router'

import { format } from 'url'

let counter = 1

export default class Index extends React.Component {

static getInitialProps ({ res }) {

if (res) {

return { initialPropsCounter: 1 }

}

counter++

return {

initialPropsCounter: counter

}

}

reload () {

const { pathname, query } = Router

Router.push(format({ pathname, query }))

}

incrementStateCounter () {

const { url } = this.props

const currentCounter = url.query.counter ? parseInt(url.query.counter) : 0

const href = `/?counter=${currentCounter + 1}`

Router.push(href, href, { shallow: true })

}

render () {

const { initialPropsCounter, url } = this.props

return (

<div>

<h2>This is the Home Page</h2>

<Link href='/about'><a>About</a></Link>

<button onClick={() => this.reload()}>Reload</button>

<button onClick={() => this.incrementStateCounter()}>Change State Counter</button>

<p>"getInitialProps" ran for "{initialPropsCounter}" times.</p>

<p>Counter: "{url.query.counter || 0}".</p>

</div>

)

}

const url = createUrl(router)

const containerProps = { Component, props, hash, router, url }

const { Component, props, url } = this.props

pathname: router.pathname

const { url, as, options } = e.state

this.replace(url, as, options)

const data = this.components[route]

if (!data) {

throw new Error(`Cannot update unavailable route: ${route}`)

}

const routeInfo = await this.getRouteInfo(route, pathname, query, url)

const { error } = routeInfo

this.notify(routeInfo)

push (url, as = url, options = {}) {

return this.change('pushState', url, as, options)

replace (url, as = url, options = {}) {

return this.change('replaceState', url, as, options)

async change (method, url, as, options) {

const { shallow = false } = options

let routeInfo = null

// If shallow === false and other conditions met, we reuse the

// existing routeInfo for this route.

// Because of this, getInitialProps would not run.

if (shallow && this.isShallowRoutingPossible(route)) {

routeInfo = this.components[route]

} else {

routeInfo = await this.getRouteInfo(route, pathname, query, as)

}

const { error } = routeInfo

this.changeState(method, url, as, options)

this.set(route, pathname, query, as, { ...routeInfo, hash })

changeState (method, url, as, options = {}) {

window.history[method]({ url, as, options }, null, as)

let routeInfo = null

routeInfo = this.components[route]

if (!routeInfo) {

routeInfo = await this.fetchComponent(route, as)

const { Component, err, jsonPageRes } = routeInfo

this.components[route] = routeInfo

routeInfo = { Component, err }

set (route, pathname, query, as, data) {

this.route = route

isShallowRoutingPossible (route) {

return (

// If there's cached routeInfo for the route.

Boolean(this.components[route]) &&

// If the route is already rendered on the screen.

this.route === route

)

}

- [Shallow Routing](#shallow-routing)

<p><details>

<summary><b>Examples</b></summary>

<ul>

<li><a href="./examples/with-shallow-routing">Shallow Routing</a></li>

</ul>

</details></p>

With shallow routing you could chnage the URL without running `getInitialProps` of the page. You'll receive the updated "pathname" and the "query" via the `url` prop of the page.

You can do this by invoking the eith `Router.push` or `Router.replace` with `shallow: true` option. Here's an example:

const href = '/?counter=10'

const as = href

Router.push(href, as, { shallow: true })

Now, the URL is updated to "/?counter=10" and page is re-rendered.

You can see the updated URL with `this.props.url` inside the Component.

You can also watch for URL changes via [`componentWillReceiveProps`](https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops) hook as shown below: