서버 사이드 렌더링(SSR : Server Side Rendering)

페이지 요청 시 Next 앱 서버에서 HTML을 생성해서 브라우저에 전달해준다.

그래서 CSR의 단점을 보안하여 초기 렌더링 속도가 빠르고 빈 HTML 파일이 아닌 완성된 HTML 파일이 브라우저로 전달해주기 때문에 SEO에 유리하다.

렌더링 과정

1. 브라우저에서 /mypage로 접속을 하면 → Next 앱 서버에서 페이지에 필요한 데이터를 불러와 완성된 mypage.html 생성 후 완료가 되면 브라우저에게 mypage.html을 반환해준다.

2. 브라우저에서는 서버측에서 렌더링이 완료된 페이지를 그대로 화면에 렌더링해준다.

// 렌더링 의미
1번 렌더링
렌더링 리액트 컴포넌트와 같이 자바스크립트로 작성되어 있는 페이지를 실제 HTML 코드로 변환하는 과정

2번 렌더링
HTML을 화면(브라우저)에 실제로 그래내는 것을 의미함

html 파일 하나만 달랑 받았기 때문에 인터렉션(클릭나 페이지 이동)이 불가능한 상태이다. 그 이유는 아직 JS 파일을 못 받았기 때문이다.

3. Next App 서버에서 브라우저로 JavaScript Bundle를 해줘서 바로 전달해준다. (CSR에서 동작하는 리액트 앱)

4. 브라우저는 JavaScript 코드와 HTML 요소들을 서로 연결해준다.

마지막 과정을 Hydrayion(수화)라고 부른다.
메마른 HTML 요소에 마치 물 뿌리듯이 단비 같은 JS 코드를 연결시켜 주는 과정을 의미하고 이 과정을 거치게 되면 실제로 버튼이나 인풋 등의 다양한 상호작용이 가능해진다.

SSR 적용시키기

SSR 설정

getServerSideProps를 사용해주면 해당 페이지는 SSR 기능을 수행할 수 있다.

import { useEffect } from "react";

export default function Home({ name }) {
  // window.location; window 객체를 사용해서 한 번은 서버에 접근해야하기 때문에 오류가 발생

  console.log("HOME"); // 브라우저와 서버에 동시 출력

  // 브라우저에만 콘솔 출력 useEffect tkdyd

  useEffect(() => {
    console.log("Home Mount");
  }, []);

  return <div>{name}</div>;
}

// SSR을 해당 페이지 컴포넌트에 적용시키기 위해 비동기 함수를 만들어준다.
// SSR로 동작한다.

export const getServerSideProps = async () => {
  // SSR을 위해 서버측에서 페이지 컴포넌트(Home)에게 전달할 데이터를 설정하는 함수(고정 함수 이름)

  console.log("getServerSideProps Called"); // 브라우저에서 console 안 찍히고 서버 로그에서 찍힌다.

  // window.location; 사용 시 오류가 발생

  return {
    props: {
      name: "KOREA",
    },
  };
};

// 브라우저가 '/' 페이지로 이동하기 위해 Next 서버에 요청을 보내면 getServerSideprops가 먼저 실행이 된다.
// props 를 포함하는 객체를 반환해주고

// 서버는 페이지를 렌더링을 하기 위해서 Home 컴포넌트를 호출해주고 이 때 전달해주는 Props가 객체 안에 있는 반환값을 전달해준다.