NextJS
Next.js는 Pre-Rendering, 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다
* ReactJS는 Client-Side-Rendering 방식이다.
1.Client-Side-Rendering( CSR ) 이란?
CSR은 클라이언트(사용자)에서 모두 처리하는 방법으로 서버에서 전체 페이지를 최초에 한번 렌더링 하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식이다. SSR과 달리 서버에 HTML 문서를 요청하는 것이 아니라, 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 것이다.
( 최초 렌더링된 HTML )
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>- 최초에는 HTML이 비어있기 때문에 빈 화면이 보이고, 이후 자바스크립트를 불러와 웹 사이트가 정상적으로 보이게 된다.
1-1) CSR 장점
- 필요한 부분만 리로딩 없이 서버로 부터 받아와 화면을 갱신한다.
1-2) CSR 단점
- 사용자가 첫 화면을 보기까지 오래 걸린다.
- SEO(검색 엔진)가 효율적이지 않다.
* SEO(검색 엔진) *
구글과 네이버와 같은 검색 엔진들은 서버에 등록된 웹사이트를 돌아다니면서 웹사이트의 HTML 문서를 분석해서 검색할 때 웹사이트를 빠르게 검색할 수 있도록 도와준다. 하지만 CSR에서 사용되는 HTML의 바디는 텅텅 비어있기 때문에 검색엔진들이 CSR로 작성된 웹페이지를 분석하는데 많은 어려움을 겪고 있다.
2. Server-Side-Rendering( SSR ) 이란?
SSR은 페이지를 이동할 때마다 새로운 페이지를 요청 한다. 모든 웹사이트는 서버 연산을 통해서 렌더링하고
완성된 페이지 형태로 응답한다.
2-1) SSR 장점
- 검색엔진 최적화 (SEO) 가능
- 첫 렌더링 HTML을 클라이언트에게 전달해 주기 때문에 초기 로딩 속도가 빠르다.
2-2) SSR 단점
- 새로고침하게되면 전체 웹사이트를 전부 렌더링 하기 때문에 화면이 없어졌다가 나타난다.
- 사용자가 많을수록 서버에 데이터를 요청하는 횟수가 증가하기 때문에 서버 과부하가 생긴다.
- 바로 웹사이트를 볼 수 있지만, 동적으로 제어할 수 있는 자바스크립트 파일은 아직 받아오지 않았기 때문에
사용자가 사이트를 볼 수 있는 시간(TTV)와 실제로 인터랙션이 가능한 시간(TTI)의 공백시간이 길다.
3. Pre-Rendering 이란?
앱을 초기 상태로 미리 렌더링 하여 HTML을 바로 볼 수 있다.(사용자의 연결속도가 느리거나, 자바스크립트가 비활성화되어있어도 UI가 보인다.) 이후 자바스크립트 파일을 불러와 렌더링 작업이 완료되면 콘텐츠를 이용할 수 있다.
* CSR 와 SS의 장점을 가지고 있다! *
반응형
'React' 카테고리의 다른 글
| [NextJS] Route, Routing, Dynamic Routes 사용 방법 (0) | 2022.10.13 |
|---|---|
| [NextJS] 프로젝트 생성 및 실행 방법 (0) | 2022.10.12 |
| [React] Framer Motion(5) Share Layout Animation를 사용한 애니메이션 효과 공유 (0) | 2022.10.03 |
| [React] Framer Motion(4) AnimatePresence 사용법 및 슬라이드 구현 (0) | 2022.10.02 |
| [React] Framer Motion(3) 스크롤(useScroll) 및 로고(SVG파일) 애니메이션 효과 적용 (0) | 2022.10.01 |