NextJS?

​

NextJS는?

브라우저에서 화면을 보여주는 과정이 대표적으로 두 가지의 경우가 있다고 한다.

1. 전통방식(SSR)

   • 브라우저에서 프론트 서버에 파일을 요청을 하고, 프론트 서버는 백엔드 서버에 요청을 하고 백엔드 서버는 데이터 베이스에 요청을하고, 역순으로 이제 차례차례대로 조립을 한 후 프론트 서버에서 완성이 된 페이지를 브라우저에 보내주는 방식이다.
   • 브라우저 -> 프론트서버 -> 백엔드서버 -> 데이터베이스 -> 백엔드서버 -> 프론트서버 -> 브라우저

   내가 생각하기에 이런 방식은 모두가 생각해볼 수 있는 가장 대표적인 렌더링 방식인 것 같다.

2. SPA(CSR)

   • SPA(CSR)에서는 브라우저가 프론트 서버에 요청을하면 js,html,css,img 등만 보내준다. 이때의 특징으로는 data가 존재하지 않는다. data가 없기 때문에 로딩창으로 기다리고 있고, 브라우저에서 실행하는 코드에서 직접적으로 백엔드 서버에 요청을 데이터를 요청을 하고, 받은 값으로 렌더를 하게 된다.
   • 브라우저 -> 프론트서버 -> 브라우저 -> 백엔드서버 -> 데이터베이스 -> 백엔드서버 -> 브라우저

   React, Vue 와 같은 SPA 프레임워크들은 이런식의 플로우로 진행이 된다. SSR 방식보다 무조건 빠를까? 라고 생각하면 솔직히 장담할 순 없다고 생각한다. SSR이 빠를 수 있고, CSR이 빠를 수 있다고 생각한다.

​

그래서 NextJS는 첫 방문일 경우 SSR로, 아닐시에는 CRS로 렌더를 하게 된다고 한다. 그렇다면 모든 웹 프로젝트에서 NextJS를 쓰면 되는거 아닌가? 싶지만… SPA에서는 모든 데이터가 셋팅이 될때까지 로딩이라는 화면으로 눈속임을 하게 되는데, 이때 검색엔진은 이 페이지는 로딩만 있고 내용이 없다고 판단해서 검색엔진에서 안나오게 되는 경우도 있다고 한다. 이를 방지하기 위해서 SSR방식으로 보여줘야하는 경우도 있고, “Code Splitting”이 필요하다면 SSR을 선택하는게 좋다고 한다

Code Splitting

• 파일을 분리하는 작업을 Code Splitting 이라고 한다
• 예를 들어 A페이지에 방문할때 B, C 컴포넌트의 정보가 필요하지 않은 경우에 별도 설정이 없다면 A, B, C의 컴포넌트가 한 파일에 저장되어 파일크기가 커져 로딩이 올래 걸릴 수 있기 때문에 이를 위해 파일을 분리하는 작업을 Code Slitting이라고 한다

개인 공부 기록용 블로그입니다.
잘못된 내용이 있다면 꼭 알려주세요!

맨 위로 이동하기

NextJS 카테고리 내 다른 글 보러가기

첫 번째 글입니다 가장 최근 글입니다