I am using getServerSideProps in [pages/post/index.js](https://github.com/harm-meijer/nextjs-example//blob/d20696784fda6b74f701e163dc85c67be72e8e8f/pages/post/index.js):

```
import React from "react";
import Layout from "../../components/Layout";

function Post({ post }) {
  console.log("in render", post);
  return (
    <Layout title={post.name}>
      <pre>{JSON.stringify(post, undefined, 2)}</pre>
    </Layout>
  );
}

export async function getServerSideProps({ query }) {
  return fetch(
    `${process.env.API_URL}/api/post?id=${query.id}`
  )
    .then(result => result.json())
    .then(post => ({ props: { post } }));
}

export default Post;

```

When I directly load `/post/2` it works as expected but when I go from `/posts` to `/post/2` by clicking on a link:

```
<Link
  as={`/post/${post.id}`}
  href={`/post?id=${post.id}`}
>

```

It looks like nothing happens for 2 seconds ([the api delay](https://github.com/harm-meijer/nextjs-example//blob/d20696784fda6b74f701e163dc85c67be72e8e8f/pages/api/post/index.js#L5-L5)) and then the content shows. I can see in the network tab that `_next/data/development/post/9.json` is being loaded by [fetchNextData](https://github.com/zeit/next.js/blob/v9.3.0/packages/next/next-server/lib/router/router.ts#L77).

I would like to show a loading spinner when I move from one route to another using `next/Link` but I can't find any documentation on getServerSideProps that allows me to do this.

When I directly go to `/post/:id` I'd like the data to be fetched server side and get a fully rendered page (works) but when I then move to another route the data should be fetched from the client (works). However; I would like to have a loading indicator and not have the UI freeze up for the duration of the data request.