Catch All URL

정의

• URL 의 URL 루트 엔드포인트부터 마지막 엔드포인트까지 모든 URL 엔드포인트를 Catch 할 수 있는 URL 입니다.
• 가끔 필요할 때가 있습니다.
  • URL 을 "/Spider-Man:+No+Way+Home/634639" 와 같은 형태로 나타내면 SEO 에 유리하기 때문에 필요합니다.
  • 외부에서 상세페이지에 접속할 때도 API 파라미터를 잘 사용할 수 있습니다.

상세페이지 CSR 방식

• 코드 예시

// /pages/index.js

...(생략)
export default function Home({ results }) {
  const router = useRouter();
  const onClick = (id, title) => {
    router.push(`movies/${title}/${id}`);
  };
  ...(생략)


// /pages/movies/[...params].js

import { useRouter } from "next/router";

export default function Details() {
  const router = useRouter();
  const [title, id] = router.query.parmas || [];
  // console.log(router);
  return (
    <div>
      <h4>{title}</h4>
    </div>
  );
}

상세페이지 SSR 방식

• 코드 예시

// /pages/movies/[...params].js

import { useRouter } from "next/router";
import Seo from "../../components/Seo";

export default function Details({ params }) {
  const router = useRouter();
  const [title, id] = params || [];
  // console.log(router);
  return (
    <div>
      <Seo title={title} />
      <h4>{title}</h4>
    </div>
  );
}

export function getServerSideProps({ params: { params } }) {
  // console.log(params);
  return {
    props: {
      params,
    },
  };
}

마치며

• 아직 props 를 이용한 데이터 전달이 익숙하지 않습니다.
  • props 라는 객체의 키쌍페어를 활용해서 함수의 전달인자, 매개변수 같이 넘겨주는 것입니다.
  • 직접 사이드프로젝트를 구현해보면서 이론과 논리로 쌓아 나가면 또 금방 익숙해질 수 있지 않을까 합니다.

• NextJS 를 배우면서 SSR 방식을 필요하는 곳에 참 '입맛에 맞게' 필요한 부분만 골라쓸수 있는 것이 좋은 것 같습니다.
  • CSR, SSR 섞어서 쓰면 (getServerSide) fetch 로 습득하는 데이터 흐름을 알맞게 구성해서 써야할 것 같습니다.

참조

노마드코드 NextJS 시작하기