Next.js 서버 사이드 렌더링(SSR) 예제 분석

Next.js 서버 사이드 렌더링(SSR) 예제 분석

 

이 코드는 Next.js 프로젝트에서 **서버 사이드 렌더링(SSR)**을 활용하여 도서 목록을 표시하는 컴포넌트입니다. 주요 기능은 다음과 같습니다.

1. getServerSideProps를 사용하여 서버에서 데이터를 가져옴
2. 가져온 데이터를 Home 컴포넌트에 전달하여 화면에 렌더링
3. useEffect를 이용하여 브라우저에서 실행되는 코드와 서버에서 실행되는 코드 구분
4. SearchableLayout을 사용하여 페이지에 검색 기능 적용

이제 코드의 각 부분을 자세히 살펴보겠습니다.

---

📌 1. 서버 사이드 렌더링(SSR) - getServerSideProps

export const getServerSideProps = () => {
  console.log("서버사이드프롭스에요"); // 서버에서 실행됨

  const data = "hello";

  return {
    props: {
      data,
    },
  };
};

🔹 getServerSideProps란?

• Next.js에서 **서버 사이드 렌더링(SSR)**을 사용하려면 getServerSideProps 함수를 정의해야 합니다.
• 이 함수는 서버에서 실행되며, 컴포넌트보다 먼저 실행됩니다.
• 여기서 반환하는 props 객체는 해당 페이지 컴포넌트로 전달됩니다.

🔹 실행 순서

1. 사용자가 페이지에 접근하면 서버에서 getServerSideProps가 실행됩니다.
2. 서버에서 데이터를 가져오고, 그 데이터를 props로 전달합니다.
3. Home 컴포넌트가 data를 받아 화면을 렌더링합니다.

🔹 주의할 점

• 브라우저에서는 실행되지 않습니다.
  → window 객체를 사용할 수 없습니다.
• console.log는 브라우저가 아닌 서버 터미널에서 확인할 수 있습니다.

---

📌 2. Home 컴포넌트 - 서버에서 받은 데이터 활용

export default function Home({
  data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  console.log(data); // 서버와 브라우저에서 실행됨

  useEffect(() => {
    console.log(window); // 브라우저에서 실행됨
  }, []);

🔹 data의 흐름

1. getServerSideProps에서 반환한 { props: { data } } 값이 Home 컴포넌트의 props로 전달됩니다.
2. data는 서버에서 먼저 콘솔에 찍히고, 이후 브라우저에서도 찍힙니다.

🔹 useEffect를 사용하는 이유

• console.log(window);는 클라이언트에서만 실행되어야 합니다.
• 하지만 Next.js는 서버에서도 실행되므로 useEffect 내부에서 window를 사용해야 오류가 발생하지 않습니다.

---

📌 3. 도서 목록 렌더링

import books from "@/mock/books.json";
import BookItem from "@/components/book-item";

• books.json 파일에서 도서 데이터를 불러옵니다.
• BookItem 컴포넌트를 사용하여 책 정보를 표시합니다.

<section>
  <h3>지금 추천하는 도서</h3>
  {books.map((book) => (
    <BookItem key={book.id} {...book} />
  ))}
</section>
<section>
  <h3>등록된 모든 도서</h3>
  {books.map((book) => (
    <BookItem key={book.id} {...book} />
  ))}
</section>

• books.map(...)을 이용해 BookItem을 여러 개 생성합니다.
• key={book.id}는 React에서 리스트를 렌더링할 때 필수적인 속성입니다.

---

📌 4. 페이지 레이아웃 지정 - getLayout

Home.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

🔹 getLayout이란?

• Next.js에서는 특정 페이지에만 다른 레이아웃을 적용하고 싶을 때 getLayout을 사용할 수 있습니다.
• 여기서는 SearchableLayout을 적용하여 검색 기능이 있는 레이아웃을 사용하고 있습니다.

---

📌 5. CSS Module 스타일 적용

import style from "./index.module.css";

• index.module.css는 CSS Module을 사용한 스타일 파일입니다.
• 이를 통해 className={style.container}처럼 고유한 클래스명을 적용할 수 있습니다.

<div className={style.container}>

• style.container를 적용하여 index.module.css의 스타일을 사용할 수 있습니다.

---

📌 실행 흐름 정리

1. getServerSideProps가 서버에서 실행되며 데이터를 가져옴.
2. 서버에서 가져온 데이터가 Home 컴포넌트의 props로 전달됨.
3. Home 컴포넌트에서 데이터를 받아 화면을 렌더링.
4. useEffect를 사용하여 클라이언트에서만 실행되는 코드 처리.
5. getLayout을 이용해 검색 기능이 포함된 SearchableLayout 적용.

---

📌 마무리

이제 Next.js에서 **서버 사이드 렌더링(SSR)**을 사용하는 방법을 이해했을 것입니다. 이 방식은 초기 페이지 로딩 시 데이터를 서버에서 가져와 SEO 최적화와 성능 개선에 유리합니다.

✅ getServerSideProps는 서버에서만 실행되므로 클라이언트 전용 코드는 useEffect에서 처리해야 합니다.
✅ getLayout을 사용하면 페이지별로 다른 레이아웃을 적용할 수 있습니다.
✅ CSS Module을 사용하여 컴포넌트별로 스타일을 안전하게 관리할 수 있습니다.