Shallow Routing (feat. nextJs)

23.02.16 next js  공부

Shallow Routing

Next.js에서 제공하는 Shallow Routing은 클라이언트 측에서 브라우저의 주소 표시줄의 URL을 변경하는 것으로, 새로운 페이지를 가져오지 않고 현재 페이지에서 데이터를 가져오는 기능을 제공합니다. 이를 통해 페이지 이동 시에도 페이지의 초기 데이터를 유지할 수 있으며, 불필요한 서버 요청을 줄일 수 있습니다.

Shallow Routing은 next/router 모듈의 push, replace, back, reload 메서드에서 사용할 수 있으며, 다음과 같이 사용할 수 있습니다.

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/posts', undefined, { shallow: true });
  };

  return (
    <button onClick={handleClick}>
      Go to Posts page with shallow routing
    </button>
  );
}

위 코드에서 router.push 메서드의 세 번째 인자로 { shallow: true }를 전달하여 Shallow Routing을 활성화했습니다. 이제 Posts 페이지로 이동할 때, 현재 페이지를 새로고침하지 않고 새로운 데이터를 가져올 수 있습니다.

Shallow Routing을 사용하는 경우, 다음과 같은 몇 가지 사항에 유의해야 합니다.

1. 초기 데이터가 필요한 경우 Shallow Routing을 사용하는 경우, 이전 페이지의 초기 데이터를 공유하기 때문에 새로운 페이지에 초기 데이터가 필요한 경우, 이를 수동으로 처리해주어야 합니다. 이를 해결하기 위해 getInitialProps 메서드를 사용하여 초기 데이터를 미리 가져올 수 있습니다.
2. 브라우저 히스토리 Shallow Routing은 브라우저 히스토리를 변경하지 않기 때문에, 이전 페이지로 돌아가는 경우, 이전 페이지에서 서버에서 데이터를 가져오게 됩니다. 이를 해결하기 위해서는, replaceState 메서드를 사용하여 브라우저 히스토리를 변경해야 합니다.
3. 동적 경로 Shallow Routing은 정적 경로에서만 사용할 수 있습니다. 동적 경로를 사용하는 페이지에서 Shallow Routing을 사용하려면, asPath 속성을 사용하여 경로를 수동으로 지정해주어야 합니다.

따라서, Shallow Routing은 데이터 fetching에 대한 불필요한 서버 요청을 줄이고 사용자 경험을 개선하는 데 유용한 기능입니다. 하지만, 몇 가지 제한사항이 있으므로, 이를 고려하여 사용하여야 합니다.

 

내용 정리

• Dynamic Routes :
  • slug 를 이용하는 방법
• 다중 Slug :
  • [user]/info.js -> ex) example.com/lovizu/info
  • [...slug].js -> ex) example.com/lovizu/info/name
• 옵셔널 Slog :
  • [[...slug]].js
• Shallow Routing :
  • router.push(url, undefined {shallow:true})
  • shalow : 데이터 상태를 유지하는지 여부 ( 새로고침하는 것과 같은 효과 or URL만 바꾸는 효과)