네비게이팅

App Router에서 페이지 이동(네비게이팅)에 대해 알아보자

기본적으론 Client Side Rendering

JS Bundle(클라이언트 컴포넌트) + RSC Payload (서버 컴포넌트 실행한 결과물)

Link 태그

인덱스에서 -> search 페이지로 이동했을때 network 탭에 search 의 RSC payload 가 잘 불러와진걸 볼 수 있다. search페이지는 현재 서버컴포넌트로만 이루어져서, JS 번들로서 전달될 클라이언트 컴포넌트가 없으므로 JS는 안불러와짐

👇 만약 밑의 코드처럼 클라이언트 컴포넌트가 포함된 페이지라면 👇

rsc + js bundle 둘다 잘 옴

함수를 통해 페이지 이동 (useRouter)

ex. 서치바에 검색해서 해당 검색 페이지로 이동하는 경우

useRouter

'use client'
import { useRouter } from 'next/navigation'
import { useState } from 'react'

export default function SearchBar() {
  const router = useRouter()
  const [search, setSearch] = useState('')

  const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value)
  }

  const onSubmit = () => {
    router.push(`/search?q=${search}`)
  }
  return (
    <div>
      <input value={search} onChange={onChangeSearch} />
      <button onClick={onSubmit}>검색</button>
    </div>
  )
}

useSearchParams

app router 에서 쿼리스트링 가져올땐 위의 메소드로

import { useRouter, useSearchParams } from "next/navigation";

export default function Searchbar() {
  
  const searchParams = useSearchParams();
  const [search, setSearch] = useState("");

  const q = searchParams.get("q");

  useEffect(() => {
    setSearch(q || "");
  }, [q]);


  return (
    <div className={style.container}>
      <input
        value={search}
        onChange={onChangeSearch}
        onKeyDown={onKeyDown}
      />
      <button onClick={onSubmit}>검색</button>
    </div>
  );
}

프리페칭

현재 페이지에 링크들이 존재할 경우, 이동할 가능성이 있는 모든 페이지의 데이터를 미리 다 불러와 놓는것

개발 모드에서는 동작하지않는다.

예를들어 이 search 페이지에는 index,book/1 으로 갈 수 있는 링크가 있으므로, 네트워크 탭에 보면 인덱스 페이지의 rsc 페이로드나 js번들이 불러와있는걸 볼 수 있다.
하지만 book/1 페이지의 경우에는 js 번들은 없고 rsc 페이로드만 불러왔다.

빌드결과를 보면 book/1 은 동적페이지이기 때문이다

• static => 빌드 타임에 미리 생성된 정적 페이지 Like SSG
  RSC 페이로드 + JS 번들 프리페칭함
• dynamic => 브라우저의 요청을 받을때마다 생성되는 페이지 Lik- e SSR
  RSC 페이로드만 프리페칭

페이지가 정적 static/동적 dynamic 이냐에 따라 프리페칭 동작도 달라진다.