서버사이드 렌더링 with Next.js

Why SSR?

1. 검색 엔진 최적화
2. 빠른 첫 페이지 렌더링이 중요하다.

사용자가 요청한 페이지를 빠르게 보여줄 수 있다.

클라이언트 사이드 렌더링만 한다면 자바스크립트를 실행해야만 화면이 보인다.

hydrate함수

서버사이드 렌더링의 결과로 만들어진 돔 요소에 필요한 이벤트 처리 함수를 붙여 준다.
ReactDom.hydrate(<App page="home" />, document.getElementById('root'));

styled-components 적용하기

서버로부터 전달된 HTML에 스타일코드가 없다.
js가 실행된 후에야 스타일이 적용된다.

스타일 코드를 추출해서 HTML에 삽입하는 과정이 필요하다.

• _document.js 스타일코드 추출, 반환
• babel-plugin-styled-components 이용하여 서버와 클라이언트의 결괏값 일치시키기

이미지 모듈 적용하기

파일의 경로가 클라이언트와 서버가 다르면 렌더링 결과가 달라서 문제가 생긴다.

Next.js

넥스트에서 모든 페이지 컴포넌트는 pages 폴더 밑에 만들어야 한다.
리액트 모듈을 자동으로 포함시켜 주어 import React를 하지 않아도 된다.

_document.js

서버 측에서 HTML 요소를 추가하는 용도로 사용된다.
pages 폴더 밑에 _document.js 파일을 생성하면, 내장된 _document.js 파일을 override한다.

getInitialProps

페이지 컴포넌트로 속성값을 전달하는 함수. 페이지 진입 직전에 호출된다.

Link 컴포넌트, Router 객체

pages/_app.js

모든 페이지에서 공통으로 필요한 기능. ex) 메뉴 UI, 전역 상탯값 관리
페이지가 전환되는 경우에도 언마운트되지 않는다.

코드분할

페이지별로 번들 파일 생성.
동적 임포트 사용 시 클라이언트+서버를 위한 번들파일이 생성된다.

pre-render

서버의 CPU 리소스 절약. 넥스트에서 빌드 시 getInitialProps 함수가 없는 페이지는 자동으로 미리 렌더링된다.