Next.js에서의 Server Side Rendering: 퍼포먼스 향상과 SEO 최적화로 리더한 걸음 더 나아가기

Next.js는 JavaScript 언어를 사용하여 서버 사이드 렌더링(SSR)이 가능한 어플리케이션을 만들때 많이 쓰이는 프레임워크입니다. 플랫폼 독립적이며 React 기반의 프레임워크로서, Webpack과 Bable 등의 환경 설정 없이 효과적인 서버 사이드 렌더링이 가능합니다.

그렇다면 왜 Next.js에서의 서버 사이드 렌더링이 중요한 것일까요? 이는 주로 퍼포먼스 향상과 SEO 최적화에 직결되기 때문입니다.

일반적인 클라이언트 사이드 렌더링은 첫 페이지 로딩 시간이 길고, 검색 엔진 최적화가 어렵다는 단점을 가지고 있습니다. 그러나 서버 사이드 렌더링을 사용하면 이러한 문제를 해결할 수 있습니다. 서버에서 렌더링된 페이지는 브라우저에 바로 표시되므로 사용자는 빠른 페이지 로드 시간을 경험할 수 있으며, 검색 엔진이 페이지 컨텐츠를 이해하고 처리할 수 있어 SEO에 유리합니다.

Next.js에서는 getServerSideProps 함수를 이용해 데이터를 미리 가져오고, 이를 이용해 동적 라우팅과 서버 사이드 렌더링을 할 수 있습니다.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data },
  }
}

function Page({ data }) {
  // Render data...
}

위 코드에서 볼 수 있듯, getServerSideProps는 페이지에 필요한 데이터를 가져오는 역할을 합니다. 이 함수에는 페이지의 context 인자가 제공되며,이를 통해 route parameters, query strings 등의 데이터에 접근할 수 있습니다.

Next.js에서는 각 페이지 요청 시마다 getServerSideProps 가 호출되므로, 항상 최신의 데이터를 제공할 수 있습니다. 이는 ecommerce 사이트에서 재고의 변화를 실시간으로 반영하거나, 블로그 게시글의 댓글 등 동적인 데이터를 사용하는 경우에 유용합니다.

하지만 모든 페이지에서 모든 데이터를 미리 불러오는 것은 서버 부하의 원인이 될 수 있으므로, 필요할 때만 SSR을 이용하고 그 외의 경우에는 Static Generation 혹은 Client Side Rendering을 고려하는 것이 좋습니다.

생각해보면, Next.js의 이러한 특징을 이용하면 로그인 기반의 컨텐츠를 제공하는 경우에도 효과적으로 사용할 수 있습니다. 예를들면, 사용자의 로그인 상태에 따라 페이지 내용이 변하는 경우, getServerSideProps에서 로그인 상태를 확인하고 이에 맞는 데이터를 불러오는 방식으로 구현할 수 있습니다. 이를 통해 사용자 별 맞춤화된 페이지를 빠르게 제공할 수 있게 됩니다.

export async function getServerSideProps(context) {
  const { req } = context;
  const session = getSession(req);

  if (!session) {
    return {
      redirect: {
        //로그인 상태가 아니면 로그인 페이지로 리다이렉트
        destination: '/login',
        permanent: false,
      },
    }
  }

  //이하 로그인 상태일 때의 데이터 로드 로직
  ...
}

앞서 설명드린 것처럼 Next.js의 SSR은 퍼포먼스 향상 및 SEO 최적화 뿐만 아니라, 높은 수준의 커스터마이즈 역시 가능하게 합니다. 이를 활용하여 사용자 중심의 최적화된 웹 어플리케이션을 구축해보세요.