[Next.js] 다음으로 나아가기...

Next.js란 React에서 SSR(Server Side Rendering)과 SSG(Static Site Generation)을 조금 더 쉽게 할 수 있도록 도와주는 프레임워크이다. 또한 검색 엔진 최적화(SEO)문제는 React의 치명적인 단점이라 하는데, 이를 보완해 준다.

전에 한번 다뤄본 적이 있었지만, 조금 더 틀을 잡고 공부하면 기억에 잘 남을 수 있을 것 같아 오늘도 📝기록하기📝

1. getStaticProps

getStaticProps는 사용해 본 적은 있다. 그런데 훨씬 더 간단한 예제에서 기본적인 원리를 알고 조금 띵 했던 함수,, (역시 원리가 제일 중요하다,,,)

export const getStaticProps = async () => {
  const res = await fetch(
    API_URL
  )
  const datas = await res.json()

  return {
    props: {
      datas,
    },
  }
}

뭐, fetch를 통해 데이터를 받아와서 props로 사용하는 코드구나 라는 것은 누구나 알겠지만,, 그렇다면 일반적인 getServerSideProps와 다른점은 무엇일까?

기본적으로 getServerSideProps함수는 페이지에 접속할 때마다 요청을 받아온다. 그런데 getStaticProps함수는 이미 만들어진 index.html에 의거하여 정보를 받아오는 것이기 때문에 서버에서 데이터를 교체한다고 해도 반영이 되지 않는다.

그렇다면 변경된 데이터는 어떻게 반영하는거야,,,

라는 의문점을 가지려는 찰나,

props: {
    datas,
},
    revalidate: 10

revalidate라는 아이를 보게 되었고, 이 코드는 10초마다 요청을 받아와서 갱신해주는 것이다.

즉, 즉각적으로 갱신해야하는 데이터가 있는 페이지가 아니라면, getStaticProps함수가 너무나도 유용할 것이라는 생각이 들었고, 이후부터 Next.js의 매력에 빠지게 되었달까..

2. getStaticPaths

next.js에서 라우팅이 편한 이유는

• itmes/desktop/[id].js

위와 같이 파일명을 지정할 경우 다음과 같이 동적으로 만들 수 있으며,
itmes/desktop/abc
itmes/desktop/1

• itmes/desktop/[...id].js

위와 같이 파일명을 지정할 경우 경로까지 동적으로 만들 수 있다.
itmes/desktop/abc/a
itmes/desktop/1/123

이 얘기를 꺼낸 이유는? 다음에 다뤄볼 함수는 getStaticPaths로, 누가봐도 경로랑 관련이 있을 것 같은 느낌적은 느낌이 있는 함수이기 때문이다.

위의 예시와 같은 동적 페이지의 경우, getStaticPaths함수가 필요한다. 먼저 사용법부터 간단하게 알아보자.

export const getStaticPaths = async() => {
    ...
    return {
        path: [
            {
            	params: { id: "1" }
            },
            {
            	params: { id: "2" }
            },
            {
            	params: { id: "3" }
            }
        ]
    }
}

위 코드는 동적으로 받을 수 있는 [id]페이지에서

id = 1 : itmes/desktop/1
id = 2 : itmes/desktop/2
id = 3 : itmes/desktop/3

위와 같은 params를 제공한다는 것을 뜻한다.
역시나 처음 드는 생각은 왜 굳이 이렇게 제공하지? 였지만,,

getStaticPaths를 이용하면 서버를 종료시킨 뒤 다시 활성화 시켜도 우리가 처음에 제공하려 했던 페이지들은 이미 서버에 html형식으로 존재하고 있다. 즉, 페이지에 두번째로 접속할 때부턴 좀 더 빠르게 접근할 수 있다는 뜻이다.

쇼핑몰 등의 사이트에서 Hot Item과 같이 사용자들이 보다 많이 접속할 것 같은 페이지에 적용하면 되지 않을까??