Day42

Day 42

서버 사이드 렌더링

서버 사이드 렌더링이란?

브라우저가 페이지에 첫 진입할 때 서버는 HTML을 만들어서 내려주고 이후로 페이지 전환이 발생하더라도 브라우저는 ajax와 pushState를 이용하여 페이지 이동없이 서버로부터 html 파일을 받을 수 있다.

서버 사이드 렌더링을 하는 이유?

• 검색 엔진 최적화
  • 과거에는 ajax 호출을 통한 렌더링 결과를 수집하지 못했다.
  • 요즘엔 검색 엔진이 발전하여 수집하는 경우도 있다.
• 더 빠른 초기 로딩 속도
  • Client-Side 렌더링은 브라우저 렌더링 후 데이터를 가져오기 위한 로직이 수행되어야 해서 더 느릴 수 밖에 없다.
  • 첫 렌더링 후엔 Client-Side 렌더링을 택하면 된다.

기존 SSR의 문제점

Server-side와 Client-side에서 각각 렌더링을 위한 코드를 따로 만들어야 한다.

Isomorphic(Universal)

같은 코드로 Server와 Client에서 동일하게 실행되는 환경을 뜻한다.

Next.js

서버 사이드 렌더링을 isomorphic 방식으로 제공하는 프레임워크가 next.js이다. Vercel이라는 기업에서 open source로 만들어 배포하고 있다. 기업에서 운영하는 만큼 문서가 잘 되어 있다.

Next.js 시작하기

• React를 설치하였다.
• Component를 만들어 보았다.
• Page Routing하는 방법을 알아보았다.
• emotion, storybook 설치 및 사용해 보았다.

Next.js로 서버 사이드에서 데이터 불러오기

• Next.js를 이용한 data fetching 방법에 대해 알아보았다.
• getInitialProps를 이용하여 모든 페이지에서 접근할 수 있는 값을 사용해보았다.

Next.js로 서버 만들기

• pages 밑에 api 폴더를 만들어서 간단한 api도 만들 수 있다.