[Next.js] 서버의 redirect & 클라이언트의 useRouter

라우터 인터셉팅 과정에서 둘 다 링크를 이동시켜주는 redirect 와 useRouter의 차이점을 알아보자

 

 

라우터 인터셉팅 (Intercepting Routes)
https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

Routing: Intercepting Routes | Next.js

 

 

Server 컴포넌트의 redirect

// redirect의 기본 사용방법

import { redirect } from "next/navigation";

export default function Login() {
  return redirect("main/auth/login");
}

 

 

next.js에서 redirect는 서버쪽에서 redirect 시키는 것이기 때문에 라우터 인터셉팅이 제대로 작동하지 않는다. 프론트엔드에서 라우터 인터셉팅을 위해서 클라이언트 컴포넌트로 변경해보자.

 

 

Client 컴포넌트의 useRouter

• Next.js에서 클라이언트 컴포넌트를 사용하기 위해서는 상단에 "use client" 를 선언하면 클라이언트 컴포넌트가 되며 useState, useEffect과 같은 훅 등을 사용할 수 있다.
• useRouter를 호출하여 router 변수에 담아 사용한다. useRouter 에는 다양한 속성이 있다.
• useRouter 는 리액트 훅 이므로 클래스 내부에서 사용 불가능하다

기본 형태

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

 

router.push

• client-side 전환을 할 수 있도록 도와주고 Next/link 대신 사용할 수 있다.
• 라우터 히스토리 스택에 새로운 url을 쌓는다.
• 예를 들어 home > login > item 순으로 페이지를 이동했을 때, router.push를 사용해 'mypage'로 이동한다면 라우터 히스토리 스택에는 home > login > item > mypage가 쌓입니다. 마지막 페이지에서 뒤로가기를 누르면 'item' 페이지로 되돌갑니다

사용 방법

router.push(url, as, options)

• url: [필수] 라우팅 하려는 url
• as: [선택] 브라우저 url 바에 보여지는 path
• options: [선택] scroll(라우팅 후 스크롤업), shallow, locale 등의 옵션이 있다.

 

router.replace

• router.push와 비슷하게 동작하지만, 라우터 히스토리 스택에 새로운 url을 추가하지 않는다.
• 대신 기존에 있던 현재 페이지 route를 새로운 url로 대체합니다.
• 예를 들어, home > login > item 순으로 페이지를 이동했을 때, router.replace를 사용해 'mypage'로 이동한다면 라우터 히스토리 스택에는 현재 페이지인 item이 mypage로 대체됩니다. 즉, home > login > mypage가 쌓입니다. 마지막 페이지에서 뒤로가기를 누르면 'login' 페이지로 되돌아갑니다.

사용 방법

router.push와 동일

router.replace(url, as, options)

 

 

router.refresh

• 실행시 현재 경로에서 새로고침한다.
• 클라이언트는 영향을 받지 않는 클라이언트 측 React(예: 사용 상태) 또는 브라우저 상태(예: 스크롤 위치)를 잃지 않고 업데이트된 React 서버 컴포넌트 페이로드를 병합한다.
• 즉, 페이지를 처음부터 다시 로드하는 것이 아니라 이전과 바뀐점만 분석해서 새로고침 해준다.

  "use client"
   
  import { useRouter } from 'next/navigation'
   
  export default function Page() {
    const router = useRouter()
   
    return (
      <button type="button" onClick={() => router.refresh()}>
        Refresh
      </button>
    )
  }​

 

router.prefetch

• 더 빠른 클라이언트 측 전환을 위해 제공된 경로를 미리 가져온다.

사용방법

router.prefetch(href)

 

 

server component에서도 이 기능을 사용할 수 있는데 <Link href={'/'}> 쓰면 태그가 화면에 보이는 순간 '/' 페이지를 자동으로 미리 로드해준다.

<Link href={'/'}>링크</Link>

 

 

자동으로 미리 로드하는게 싫으면 prefetch 속성을 false로 바꿔줄 수 있다. 많은 링크를 미리 로드하는 것은 비효율적이다.

<Link href={'/어쩌구'} prefetch={false}>링크</Link>

 

router.back

• 뒤로가기
• 브라우저의 히스토리 스택 이전 경로로 돌아간다.

<button onClick={() => router.back()}>뒤로가기</button>

 

router.forward

• 앞으로 가기
• 브라우저의 히스토리 스택 다음 페이지로 이동한다.

<button onClick={() => router.forward()}>앞으로가기</button>

 

출처

https://nextjs.org/docs/app/api-reference/functions/use-router

https://velog.io/@dhwnatjr678/Next.js-useRouter%EC%9D%98-%EB%8B%A4%EC%96%91%ED%95%9C-%EA%B8%B0%EB%8A%A5%EB%93%A4prefetch

https://velog.io/@khy226/Next.js-Router-%EC%A0%95%EB%A6%AC