1. Next.js란?
Next.js는 React 라이브러리의 프레임 워크이다
Next.js 등장배경
기존 리엑트에서는 기본적으로 클라이언트 사이드에서만 작동한다는 문제점이 있었는데, 이 클라이언트 사이드 렌더링(CSR)의 단점으로는 아래와 같습니다.
- 검색 엔진 최적화(SEO)의 효과를 거의 볼 수 없다는 점
- 웹 앱을 완전히 표시하려면 브라우저가 전체 웹 애플리케이션 번들을 다운로드 한 다음에 그 내용을 분석하고 코드를 파싱해서 결과를 얻어야하기 때문에 초기 로딩속도가 느린점
이 문제점을 개선하기 위해 웹 애플리케이션을 서버에서 미리 렌더링하는 방법 즉 서버 사이드 렌더링을 지원하는 Next.js가 등장하였습니다.
Next.js 장점
- 자동 코드 스플리팅
- 프리렌더링
- 서버 사이드 렌더링(SSR) 지원
- 파일 기반 라우팅
- 경로 기반의 프리페칭
등.....
2. Next.js 렌더링 전략
렌더링이란 ?
서버로부터 html파일을 받아 브라우저에 보여주는 과정이다.
렌더링 종류로는 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 정적 사이트 생성 (SSG)등이 있다.
2-1 서버 사이드 렌더링(SSR)이란?
SSR 이란?
서버에서 보여질 HTML을 미리 렌더링해서 먼저 클라이언트(브라우저)에 전달하는 방식.
하이드레이션 이란?
서버에서 렌더링한 페이지에 스크립트 코드를 집어 넣어서 나중에 웹 페이지를 동적으로 처리하는 방식.
만약 초기에 서버에서 HTML파일로 렌더링해서 먼저 보내준 뒤(프리렌더링) JS를 적용하는 방식(하이드레이션)을 사용한다면, SSR의 장점, CSR의 장점을 결합한 싱글 페이지 애플리케이션(SPA)처럼 작동할 수 있음.
SSR의 장점
-
쿠키 관리, 주요API, 데이터 검증 같은 작업등을 서버에서 처리하기 때문에 클라이언트에 노출할 필요가 없기 때문에 안전하다.
-
클라이언트 환경이 자바스크립트를 사용불가하거나 오래된 브라우저를 사용하더라도 웹페이지를 제공할 수 있다.
-
클라이언트에서 서버가 렌더링한 HTML콘텐츠를 받기 때문에 봇이나 웹 크롤러 같은 검색 엔진 웹 문서 수집기가 페이지를 렌더링할 필요가 없다. 그 결과로 웹 애플리케이션의 SEO점수가 높다.
SSR의 단점
-
페이지에 대한 요청을 처리하는 시간이 길어진다
-
웹 앱을 서버에 배포한다면 다른 방식보다 더 많은 자원을 소모하고 더 많은 부하를 보이며 유지보수 비용이 증가한다.
2-2 클라이언트 사이드 렌더링(CSR)이란?
클라이언트가 렌더링을 처리하는 방식
CSR의 장점
- 네이티브 애플리케이션처럼 느껴지는 웹 애플리케이션
웹 애플리케이션이 렌더링할 모든 페이지를 미리 브라우저에 다운로드하기 때문에, 다른 페이지로 이동하면 서버에서 그페이지에 해당하는 새로운 콘텐츠를 다운로드하지 않고 그냥 페이지의 콘텐츠를 새로운 것으로 바꿉니다.
- 쉬운 페이지 전환
클라이언트에서의 네비게이션은 브라우저 화면을 새로 고칠 필요 없이 다른 페이지로의 이동을 하게해줘서, 페이지 간 전환효과를 넣는데 수월합니다. - 서버 부하 감소
CSR에서는 SSR과 달리 서버가 아닌 브라우저에서 전체 렌더링 과정이 일어나기 때문에 서버부하가 적다.(그렇기에 강력한 서버가 필요 없음.)
CSR의 단점
- 네트워크 속도가 느린 환경에서는 전체 자바스크립트 코드와 CSS 파일을 받는 것에만 많은 시간이 소요될 수 있다. 그러면 사용자는 그 시간동안 빈 페이지를 바라봐야한다는점...
- SEO에서의 효과를 거의 볼 수 없다는 점.
React.useEffect 훅을 사용하는 방식
useEffect를 리액트 하이드레이션 이후 브라우저에서 실행
Process.browser / typeof window 변수
process.broswer 변수는 Boolean 값으로, 코드를 클라이언트에서 실행될 때 "True" , 코드를 서버에서 실행한다면 "False"값을 가집니다.
이 변수를 사용하여 브라우저에서만 실행될 코드와 서버에서만 실행될 코드를 작성할 수 있습니다.
function IndexPage(){
const side = process.broswer ? `client' : 'server';
return <div> {side} </div>; // 클라이언트 에서 코드를 실행했다면 true / 서버에서 실행했다면 false 반환.
}
export default IndexPage비슷하게 typeof window를 통해서도 서버에서 실행된 코드, 클라이언트에서 실행된 코드를 구별 할 수 있습니다.
function IndexPage(){
const side = typeof window === "undefined" ? `server' : 'client';
// typeof window를 서버에서 실행하면 그 값은 문자열 "undefined"가 되며, 그렇지 않으면 클라이언트에서 실행하는것을 알 수 있다
return <div> {side} </div>;
}
export default IndexPage동적 임포트
동적 임포트를 사용하면 Next.js는 해당 컴포넌트를 서버에서 렌더링하지 않고, 리액트 하이드레이션이 끝날 때 까지 기다려야 해당 컴포넌트를 사용할 수 있게 됩니다.
2-3 정적 사이트 생성(SSG)
SSG는 빌드 시점에 미리 사전생성 페이지를 만들어 정적 페이지 형태로 보관하고있다가 클라이언트에서 페이지 요청 시 사전생성페이지를 로드하여 보여주는 방식
쉬운 확장
단점으로는 다음 배포전까지 내용 수정이 불가능합니다. 하지만 Next.js에서 제공되는 증분 정적 재생성(ISR)을 사용하면 어느정도 해결이 가능합니다.
ISR이란 ?
ISR은 Next.js가 어느 정도의 주기로 정적 페이지를 다시 렌더링하고 해당 내용을 업데이트 할 지 정할 수 있는 기능입니다.
참고
『실전에서 바로쓰는 Nextjs』 (미셀 라바, 박수현 / 한빛 미디어)
