Question

62

Next.js getServerSideProps show loading

rated 0 times [ 64] [ 2] / answers: 1 / hits: 30805 / 4 Years ago, thu, march 19, 2020, 12:00:00

I am using getServerSideProps in 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) and then the content shows. I can see in the network tab that _next/data/development/post/9.json is being loaded by fetchNextData.

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ulysses

Add To Favorites

Follow

Total Points: 111

Total Questions: 118

Total Answers: 113

Location: Zambia

Member since Sat, Oct 31, 2020

4 Years ago

answered 4 Years ago karivictoriab · Accepted Answer

You can use nprogress in your _app.js

import NProgress from 'nprogress';

import "nprogress/nprogress.css";

import Router from 'next/router';



NProgress.configure({

  minimum: 0.3,

  easing: 'ease',

  speed: 800,

  showSpinner: false,

});



Router.events.on('routeChangeStart', () => NProgress.start());

Router.events.on('routeChangeComplete', () => NProgress.done());

Router.events.on('routeChangeError', () => NProgress.done());

or dynamic import to _app.js to reduce bundle size

ProgessBar.js

import Router from 'next/router';

import NProgress from 'nprogress';

import "nprogress/nprogress.css";



NProgress.configure({

    minimum: 0.3,

    easing: 'ease',

    speed: 500,

    showSpinner: false,

});



Router.events.on('routeChangeStart', () => NProgress.start());

Router.events.on('routeChangeComplete', () => NProgress.done());

Router.events.on('routeChangeError', () => NProgress.done());



export default function () {

    return null;

}

_app.js

import dynamic from 'next/dynamic';

const ProgressBar = dynamic(() => import('components/atoms/ProgressBar'), { ssr: false });



const App = () => {

   ...

   return <>

       ...

       <ProgressBar />

   </>

}

Ps: If you want to change color of progress bar, you can override in global css, something like this

#nprogress .bar {

    background: #6170F7 !important;

    height: 3px !important;

}