NextJS 에서는 페이지가 오직 SSR 만 할 수 있도록 설정할 수 있다

• fetch 라던지 서버에서 일어나는 data 관련 작업을 모두 수행한 후에, 즉 API 관련 동작이 모두 완료 되었을때 페이지를 렌더링하는 방식을 사용할 수 있습니다.

get server side props

정의

• 페이지를 SSR 방식만 적용하여 렌더링 해줄 떄 사용합니다.

• getServerSideProps 의 내부코드는 모두 서버에서 렌더링됩니다.

• rewrites 와 같이 API key 를 숨기는 방법 중 하나입니다.
  • getServerSideProps 의 내부코드는 오직 백엔드(서버)에서만 실행되기 때문입니다!
  • API key 숨기는 방법
    • rewrites 사용 : SSR + CSR 방식
    • getServerSideProps 사용 : SSR 방식

방법

• getServerSideProps 라는 function 을 export 하면 됩니다.
  • getServerSideProps 이름은 변경하면 안됩니다.

• getServerSideProps 에서 반환하는 객체의 props 키값으로 반환되는 객체의 키, 키값 페어를 활용하여 export default 하는 페이지 렌더링 컴포넌트에 props 로 전달하여 사용합니다.
  • _app.js 에서 App 컴포넌트의 pageProps 인자의 존재이유 입니다.

• 코드 예시

// /pages/index.js

import Seo from "../components/Seo";

export default function Home({ results }) {
  return (
    <div className="container">
      <Seo title="Home" />
      {results?.map((movie) => (
        <div className="movie" key={movie.id}>
          <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} />
          <h4>{movie.title}</h4>
        </div>
      ))}
      <style jsx>{`
        .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          padding: 20px;
          gap: 20px;
        }
        .movie img {
          max-width: 100%;
          border-radius: 12px;
          transition: transform 0.2s ease-in-out;
        }
        .movie:hover img {
          transform: scale(1.05) translateY(-10px);
        }
        .movie h4 {
          font-size: 18px;
          text-align: center;
        }
      `}</style>
    </div>
  );
}

export async function getServerSideProps() {
  const { results } = await (
    await fetch(
      "https://api.themoviedb.org/3/movie/popular?api_key=b9a221486250d0601edc38**********"
    )
  ).json();
  return {
    props: {
      results,
    },
  };
}

페이지의 모든 정보를 SSR 방식으로 하는 것은 선택사항입니다.

• 페이지의 목적과 유저 경험 등을 판단하여 SSR 방식 혹은 SSR + CSR 방식 중 원하는 방식으로 개발자가 선택할 수 있습니다.
  • NextJS 에서는 두 방식 모두 구현하는 것이 쉽습니다.
    • SSR + CSR 방식
      • NextJS 기본 방식
      • API key 숨기기 위해 rewrites(), .env 사용
      • 데이터가 fetch 되는 동안 로딩 화면 or html 태그 먼저 보여줌
      • 유저가 자바스크립트 비활성화하면 HTML 태그로만 렌더링된 화면을 보여줌
    • SSR 방식
      • getServerSideProps() 를 통해 구현하는 방식
      • API key 를 숨길수 있습니다.
      • 데이터가 fetch 되는 동안 아무것도 보이지 않고, 데이터 fetch 가 완료된 후 페이지 보여줌
      • 유저가 자바스크립트 비활성화해도 모든 화면을 보여줌

마치며

• NextJS 에서 SSR 방식으로만 사용해서 페이지 렌더링하는 것을 공부했습니다.
• 저는 NextJS 의 기본 방식인 SSR + CSR 이 좋지만 SEO 등의 이득을 위해서 index 페이지 등 몇몇 페이지는 SSR 만 사용하는 방식으로 구현하는 것도 좋을 것 같단 생각이 들었습니다.
• NextJS 는 개발자가 상황에 맞게 SSR + CSR 방식 혹은 SSR 방식으로 페이지 렌더링 하는 것을 선택할 수 있게 그리고 그 방법을 쉽게 제공해주는 것이 정말 매력적입니다.

참조

노마드코더 NextJS 시작하기
NextJS 공식문서