[Next.js] Page Router - SSR

📚 SSR 페이지의 실행 순서

1. https://www.~ 페이지 요청이 온다.
2. getServerSideProps 함수가 실행된다.
3. 페이지 컴포넌트가 실행된다.

---

🔨 getServerSideProps

페이지 컴포넌트보다 먼저 실행되어서, 컴포넌트에 필요한 데이터 불러오는 함수

export const getServerSideProps = () => {}

파일 내에 약속된 이름의 함수 getServerSideProps를 만들어 내보내면 (export), 해당 페이지는 서버 사이드 렌더링 방식이 적용된다.

💬 서버에서 1번만 실행된다.

• console.log 같은 코드를 작성해도 개발자 도구에서 확인 불가 / 터미널 로그에서만 확인 가능
• 브라우저에서만 동작하는 window.location() 같은 코드 입력시 에러 발생 (undefined 이므로)

return

export const getServerSideProps = () => {
  const data = "..."

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

반드시 단 하나의 프로퍼티 props를 가지는 객체를 리턴해야한다.

---

📃 페이지 컴포넌트

props

export default function Home(props: any) {
 ...

리턴한 객체는 페이지 컴포넌트의 Props로 받는다.

📌 InferGetServerSidePropsType 타입

getServerSideProps의 반환값 타입을 자동으로 추론하는 타입

export default function Home(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
...

💬 서버, 브라우저에서 각각 1번씩, 총 2번 실행된다.

export default function Home({ data }: any) {
  console.log(data);
  ...

1. 사전 렌더링 (서버) - 터미널 로그에 data 출력
2. 수화 (브라우저) - 개발자 도구 console에 data 출력

따라서 아무 조건 없어 window 같은 거 사용시 에러가 발생한다.

브라우저에서만 동작하는 코드 작성하기

1. useEffect

export default function Home({ data }: any) {
  useEffect(() => {
    console.log(window);
  }, []);

동작 시점이 컴포넌트 마운트 이후이므로 브라우저에서만 동작한다.

---

💻 기능 구현하기

fetch

import { BookData } from "@/types";

export default async function fetchBooks(): Promise<BookData[]> {
  const url = `http://localhost:12345/book`;

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error();
    }
    return await response.json();
  } catch (err) {
    console.error(err);
    return [];
  }
}

fetch(), .json() 등이 비동기로 작동하므로 await 사용
await 사용했으므로 함수에 async 추가

확장하기

export default async function fetchBooks(q?: string): Promise<BookData[]> {
  let url = `http://localhost:12345/book`;

  if (q) {
    url += `/search?q=${q}`;
  }
  ...

쿼리 q가 있는 경우에만 /search?q=${q}를 url에 추가하기

getServerSideProps

export const getServerSideProps = async () => {
  const allBooks = await fetchBooks();
  const recoBooks = await fetchRandomBooks();
  
  return {
    props: {
      allBooks,
      recoBooks,
    },
  };
};

fetchBooks() 완료 후 → fetchRandomBooks() 실행
총 실행 시간 = 두 함수 실행 시간의 합

따라서 fetch를 2번 이상 하는 경우에는 위와 같이 직렬로 처리하는 것은 비효율적이다.

💡 병렬 처리

Promise.all() : 비동기 함수 여러 개를 병렬로 실행하여, 모든 작업이 완료될 때까지 기다린 후 한꺼번에 결과를 반환한다. 개별 함수가 await 없이 실행되므로, 전체 실행 속도가 단축된다.

export const getServerSideProps = async () => {
  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  return {
    props: {
      allBooks,
      recoBooks,
    },
  };
};

두 함수 fetchBooks() fetchRandomBooks() 동시에 실행
최대 실행 시간 = 두 함수 중 더 오래 걸리는 것

💡 context 객체

• getServerSideProps 함수에서 Next.js가 제공하는 요청 관련 정보가 담긴 객체

• getServerSideProps 함수의 첫 번째 매개변수이며, 타입이 GetServerSidePropsContext이다.

export const getServerSideProps = async (context: GetServerSidePropsContext) => {
  const q = context.query.q;     // 쿼리값 가져오기
  const id = context.params!.id; // 파라미터의 id 불러오기
  ...

context.query → 쿼리 스트링 (ex: ?q=book → context.query.q)
context.params → 동적 경로 파라미터 (ex: /book/[id] → context.params.id)
context.req → 요청 객체 (Request Object) (headers, cookies 확인 가능)
context.res → 응답 객체 (Response Object) (캐시 컨트롤 설정 가능)