Next.js의 getServerSideProps로 로딩 스피너 보여주는 방법 | 문제 해결 가이드

제목: Next.js getServerSideProps 로딩 표시 – 문제 해결 가이드

Next.js에서 getServerSideProps를 사용하고 라우트 간 전환 시 로딩 표시기를 표시하려면 몇 가지 도전 과제가 있을 수 있습니다. 이 가이드에서는 서버에서 데이터를 가져올 때 로딩 스피너를 구현하고 UI가 데이터 요청 중에 멈추지 않도록하는 여러 가지 솔루션을 설명합니다.

로딩 상태 표시를 위해 Hooks 사용하기

next/link를 이용하여 한 라우트에서 다른 라우트로 이동할 때 로딩 스피너를 표시하려면 Hooks를 활용할 수 있습니다. 다음은 예시입니다:

import React, { useState, useEffect } from "react";
import Layout from "../../components/Layout";
import { useRouter } from 'next/router';

function Post({ post }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    setLoading(true); // 새로운 라우트로 이동할 때 로딩 스피너를 표시하기 시작합니다
  }, [router.query.id]);
  
  useEffect(() => {
    setLoading(false); // 데이터를 가져왔을 때 로딩 스피너를 숨깁니다
  }, [post]);

  return (
    <Layout title={post.name}>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <pre>{JSON.stringify(post, undefined, 2)}</pre>
      )}
    </Layout>
  );
}

export async function getServerSideProps({ query }) {
  const res = await fetch(`${process.env.API_URL}/api/post?id=${query.id}`);
  const post = await res.json();
  return {
    props: {
      post,
    },
  };
}

export default Post;

NProgress 라이브러리 사용하기

로딩 스피너를 위해 라이브러리를 사용하고자 하는 경우 NProgress를 고려해볼 수 있습니다. Next.js 앱에 통합하는 방법은 다음과 같습니다:

1. NProgress 설치하기: npm install nprogress
2. _app.js 파일에서 NProgress와 필요한 CSS 가져오기:

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());

사용자 정의 훅 생성하기

더 재사용 가능한 접근 방식을 원한다면, 로딩 상태를 처리하기 위해 사용자 정의 훅을 만들 수 있습니다. 다음은 이를 수행하는 방법입니다:

import Router from 'next/router';
import { useEffect, useState } from 'react';

export const usePageLoading = () => {
  const [isPageLoading, setIsPageLoading] = useState(false);

  useEffect(() => {
    const handleRouteChangeStart = () => {
      setIsPageLoading(true);
    };

    const handleRouteChangeComplete = () => {
      setIsPageLoading(false);
    };

    Router.events.on('routeChangeStart', handleRouteChangeStart);
    Router.events.on('routeChangeComplete', handleRouteChangeComplete);
    Router.events.on('routeChangeError', handleRouteChangeComplete);

    return () => {
      Router.events.off('routeChangeStart', handleRouteChangeStart);
      Router.events.off('routeChangeComplete', handleRouteChangeComplete);
      Router.events.off('routeChangeError', handleRouteChangeComplete);
    };
  }, []);

  return { isPageLoading };
};

그런 다음 이 훅을 _app.js 내에서 사용할 수 있습니다:

import { usePageLoading } from './usePageLoading';

export default function App({ Component, pageProps }) {
  const { isPageLoading } = usePageLoading();

  return (
    <>
      {isPageLoading ? (
        <h1>Loading...</h1>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
}

이러한 접근 방식을 통해 라우트 간 이동 및 서버에서 데이터를 가져올 때 Next.js 앱에 로딩 스피너를 추가할 수 있습니다. 특정 사용 사례에 가장 적합한 방법을 선택하세요.

참고 자료 : 

reactjs