[230804] SSR 서버 사이드 렌더링

서버 사이드 렌더링 (Server-Side Rendering, SSR)이란?

• 프론트 코드를 서버에서 실행하고 클라이언트(브라우저)로 보내기 전에 서버 측에서 HTML을 동적으로 생성하는 기술
• 일반적으론 JS를 사용하여 브라우저에서 HTML생성하고 렌더링하는 방식 → SSR은 서버에서 HTML을 미리 렌더링해서 클라이언트로 보내주는 방식

SSR의 동작 방식

1. 클라이언트가 웹 애플리케이션에 접속하면 서버로 요청을 보냄
2. 서버는 해당 요청을 처리하여 필요한 데이터를 가져오고, 웹 페이지의 HTML 구조를 구성
3. 서버는 구성된 HTML과 필요한 데이터를 결합하여 완성된 HTML 페이지를 생성
4. 완성된 HTML 페이지를 클라이언트로 보내줌
5. 클라이언트는 서버로부터 받은 HTML을 브라우저에 렌더링하여 사용자에게 웹 페이지를 보여줌
6. 이후 클라이언트 측의 JavaScript가 로드되어 상호작용이 필요한 부분들을 처리함

<script src="파일경로/파일이름.js"></script> // 이런 코드들 만나면 js를 불러옴

장점

• 초기 로딩 속도의 개선 → 서버에서 미리 완성된 HTML보내주기때문
• 검색 엔진 최적화(SEO) → 주로 초기 HTML 기준으로 수집하기때문에 SSR은 미리 완성된 HTML을 보내주기때문에 검색 엔진에 페이지가 노출될 가능성 높아짐

단점

• 브라우저 전용 API 사용해야하면 반드시 브라우저에서 렌더링하도록 명시해줘야함 (window, document 객체제공 x )
• 매 요청마다 데이터를 가져와서 부하 가능성 올라갈 수 있다.

Next.js - sgetServerSideProps 함수

export async function getServerSideProps() {
  const userRequest = await fetch("https://example.com/api/user");
  const userData = await userRequest.json();

  return {
    props: {
      user: userData,
    },
  };
}

function IndexPage(props) {
  return <div>welcome, {props.user.name}!</div>;
}

export default IndexPage;

• Next.js 에서 제공하는 서버 사이드 렌더링을 위한 예약된 함수임
• 이 함수를 이용하면 서버 측에서 사전에 렌더링 할 수 있고 정적인 HTML이 아닌 동적인 페이지가 됨
• 컴포넌트가 렌더링되기전에 서버측에서 데이터를 가져오는 역할임 → 빌드할때 Nextjs는 이 함수를 익스포트하는 모든 페이지를 찾아가서 서버가 페이지 요청을 처리할 때 getServerSideProps 함수를 호출하도록 만듬
• getServerSideProps 함수는 객체를 반환해야하고 props 속성에 페이지 컴포넌트로 전달할 데이터 설정할 수 있음
• 서버에서 데이터 처리해서 보안적인 측면에서도 장점