[Next.js] page router - SSR

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
2.11) SSR 1. 소개 및 실습
2.12) SSR 2. 실습

getServerSideProps

getServerSideProps는 페이지가 SSR 방식으로 사전 렌더링이 이루어지게 한다.

export const getServerSideProps = () => {
  // 컴포넌트보다 먼저 실행되어서, 컴포넌트에 필요한 데이터 불러오는 함수
  const data = "hello";

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

getServerSideProps는 약속된 이름의 함수인데 이를 export하면 해당 페이지는 그때부터 SSR로 동작하게 된다.
 

어떻게 작동하는가

1. 해당 페이지 경로로 페이지를 요청
2. 넥스트 서버가 사전 렌더링을 하게 될 때 getServerSideProps 함수를 먼저 실행
-> 해당 페이지에서 필요한 데이터나 데이터를 다른 백엔드 서버로부터 불러오는 등의 기능을 수행

getServerSideProps 함수는 페이지 역할을 하는 컴포넌트보다 먼저 실행이 되어 해당 컴포넌트에 필요한 백엔드 데이터 등을 미리 불러오는 역할을 하는 함수이다.

 

함수의 약속되어진 구조(프레임워크의 문법)

return 값에 props라는 프로퍼티로 객체로 전달하도록 해야한다.
 

특징

getServerSideProps는 오직 서버 측에서만 실행이 되는 함수이다.
따라서 console.log 등 출력을 진행하면 브라우저 콘솔에 보이지 않는 것을 확인할 수 있다. (대신 터미널 콘솔에는 출력이 된다.)

export default function Home({
  data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
...

 
또한 이 페이지 컴포넌트는 서버에서 한번 실행되고, 브라우저에서 한 번 더 실행이 된다.
1) 사전 렌더링을 위해 서버측에서 실행
2) 브라우저에서 자바스크립트 번들 형태로 전달되고 브라우저 측에서 실행
 
이는 브라우저 접근하는 window를 페이지 컴포넌트에 작성하면 오류가 발생하게 한다.
따라서 브라우저에서만 실행되는 코드를 작성하고 싶다면 useEffect를 사용할 수 있다. (useEffect는 마운트 된 이후에 동작하는 코드이기 때문에)

useEffect(() => {
    console.log(window);
  }, []);

 

getServerSideProps로부터 전달받은 데이터 props 타입

Next.js에서는 기본적으로 다양한 내장 타입이 존재.
InferGetServerSidePropsType : getSerberSideProps의 반환값 타입을 자동으로 추론해줌

export default function Home({
  data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
...

---

getServerSideProps에서 query string 얻는 방법

export const getServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  const q = context.query.q;
  const books = await fetchBooks(q as string);

  return {
    props: { books },
  };
};

//@/lib/fetch-books.ts

import { BookData } from "@/types";

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

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

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error();
    }

    return await response.json();
  } catch (err) {
    console.error(err);
    return [];
  }
}