[Next.js] 서버 사이드 렌더링

Next.js에서 특정 부분을 서버 사이드에서 렌더링을 하도록 만들려면 getServerSideProps()를 사용한다.

예를 들어

//index.tsx
export default function Home({ results }: any) 
...

export async function getServerSideProps() {
  const { results } = await (
    await fetch(`http://localhost:3000/...`)
  ).json();
  return {
    props: {
      results,
    },
  };
}

를 하면 된다.

클라이언트 사이드 렌더링

React는 기본적으로 클라이언트 사이드 렌더링이다.
CRA은 HTML에는 그저 root div 하나만을 전달해 줄 뿐이며 브라우저가 react.js를 받고 코드를 실행할 때 모든 것이 렌더링이 시작된다. 따라서 순서대로 로딩이 진행되며 경우에 따라서 특정 데이터를 받아올때까지 사용자는 로딩을 보게 될 것이다.

Static Pre-Rendering

Next.js는 이를 해결하기 위해 페이지를 미리 렌더링 해 실제 HTML을 전달해 준다.
즉 react.js가 로딩되기 전에도 API가 요구되지 않는 부분들은 미리 볼 수 있는 장점이 있다.

서버 사이드 렌더링

특정 부분을 서버 사이드 렌더링으로 돌려주면 사용자는 페이지에 접속하면 실제로 렌더링 되어있는 HTML을 얻는다.
즉 사용자는 HTML을 받는 즉시 모든 요소를 확인할 수 있지만 반대로 API 로딩(HTML)이 느려지면 사용자에겐 아무것도 보이지 않는다. HTML에 보일 모든 요소가 로딩될 때까지 아무것도 볼 수 없다는 뜻이다.
모든것은 백엔드에서 진행되기 때문에 API key 같은 유저에게 보여주면 안될 부분들을 넣을 수 있다.

Next.js를 이용해 동적인 부분(API 호출, 변수)은 CSR, 정적인 부분(일반 텍스트)은 SSR로 만든다면 각각의 장점을 살릴 수 있을 것이다.