[Next.js] - preRendering의 두가지 방식 - 2 (Server Side Rendering)

앞서 살펴봤던 preRendering의 첫번째 방식이자 next.js 에서 추천하는 방식인 Static Generation은 쉽게 말하자면 사전에 HTML 페이지를 생성해 놓고 사전 렌더링을 해놓은 후에 보여주는 방식입니다.
하지만 이 방식을 따를 때 어떤 데이터를 포함하고 있어야 할지 모른다면? 사용자 마다 다른 데이터를 가져와야 하는데 이를 사전에 페이지를 생성하는 것이 효율적인가? 이런 문제들에 마주할 수 있습니다. 이를 해결하기 위한 방법으로 두번째 방법인 Server Side Rendering 방식이 있습니다.

2. Server Side Rendering

: 빌드 타임에 HTML을 미리 생성하는 것이 아닌 요청할 때 마다 페이지를 생성하는 방식
이를 위해 getServerSideProps 함수를 비동기 처리로 사용합니다.

외부 API로 부터 잦은 업데이트를 필요로 하는 페이지라면 이 함수를 사용하여 요청 할 때마다 페이지를 생성하는 것이 효율적이겠죠?

[uid].js

export default function UserIdPage(props) {
  return <h1>{props.id}</h1>;
}

export async function getServerSideProps(context) {
  const { params } = context; 
  const userId = params.uid; 
  return {
    props: {
      id: "userid-" + userId,
    },
  };
}

사용자마다 다른 URL을 가지고 있고 이에 따라 사용자 마다 다른 데이터를 가져와야 할 때 getServerSideProps 함수를 사용하여 빌드 타임이 아닌 서버에서만 함수를 작동시켜 요청 할 때마다 데이터를 가져올 수 있습니다.

이 getServerSideProps 에서도 getStaticProps와 마찬가지로 return 값으로 객체를 가지는데 함수 이름처럼 props 속성을 넘겨줘야 합니다. 또한 선택적으로 notFound, redirect 속성을 사용할 수 있습니다.

하지만 getStaticProps 와는 달리 revalidate 속성은 사용할 수 없습니다.

• 왜냐하면 getServerSideProps 함수는 들어오는 요청에 대해 전부 유효성 검사를 실행하기 때문입니다.

---

❓❓Static Generation 방식에서는 동적으로 생성되는 페이지를 위해 getStaticPaths 함수를 사용하는데, 그렇다면 Server Side Rendering 방식에서도 이를 필요로 하지 않을까?

일단 대답은 NO.

• getStaticPaths 함수를 사용하지 않고도 코드가 정상적으로 작동하는 이유는 getServerSideProps 함수가 서버에서만 작동하기 때문입니다.
• next.js 는 사전 생성할 페이지가 없고, 사전 생성할 대상이 없으니까 getStaticPaths 정보가 필요 없기 때문이죠.
• 하지만 getStaticProps를 사용해서 페이지를 사전 생성 할때는 next.js에게 어떤 매개변수값의 페이지를 사전 생성해야 할지 알려주기 위해 getStaticPaths를 사용합니다.

• 쉽게 말하자면 preRendering할 때 static generation 방식은 미리 HTML로 페이지를 만들어 놓아야 하니까 next.js가 사전 생성할 페이지가 있겠죠?
  그 페이지에 대한 매개변수값을 알아야 하니까 getStaticPaths를 사용하는 겁니다.
• server side rendering 방식은 사전 생성할 HTML이 없고 요청이 오면 그때그때 HTML 코드를 생성하니까 getStaticPaths 없어도 되는 겁니다.

---