pre-rendering

조영민·2022년 4월 7일
0

Pre-rendering vs No Pre-rendering

미리 화면을 그릴지 vs 모두 다 준비되었을 때 그릴지

Pre-rendering

기본적으로 Pre-rendering 방식을 제공하는 Next.js는 우선 HTML 파일을 통해 정적인 화면을 먼저 보여준다.
이후 JS 파일을 로드해와서 화면에서의 클릭 등의 이벤트 처리가 이뤄질 수 있는 반응하는 화면으로 전환된다.
화면은 먼저 보이지만, 반응 할 수 있는 시점까지 다소 시간이 걸릴 수 있다.

No Pre-rendering

반면 CRA(Create-React-App) 등을 활용한 일반 리액트(Next.js 없이!) 앱의 경우,
No Pre-rendering 형태로 첫 로드가 모두 이뤄지기 전에는 빈 화면만 보여진다.
모든 로드가 마무리 된 이후에 화면이 표시되는데, JS도 로드가 완료된 상태기 때문에
화면이 보여지는 시점과 화면이 반응을 할 수 있는 시점이 동일하다.

SSR vs CSR

화면을 표시하기 위한 데이터를 활용하는 주체가 클라이언트인지 서버인지에 따른 구분

SSR(Server-Side Rendering)

일반적인 MPA(Multple Page Application) 형태는 페이지 전환이 일어날 때 마다 해당 페이지에 필요한 데이터를 포함한 페이지 자체를 받아온다.
➡ 서버에서 데이터를 포함한 화면 자체를 보내주는!

CSR(Client-Side Rendering)

반면 SPA(Single Page Application)에서는 하나의 페이지 구조에서 페이지 전환이 일어날 때, 데이터만 갱신(fetching)함으로써 필요한 화면 변화를 제공한다.
➡ 서버를 통해서 데이터만 받아올 뿐!

[출처] Pre-rendering | CSR vs SSR 개념정리|작성자 zoonizone

profile
프론트엔드 개발자

0개의 댓글