Next.js?
Next.js란?
리액트는 Single Page Application(SPA)으로 Client Side Rendering(CSR) 방식을 채택
SPA는 보통 CSR로 동작하지만, 리액트를 활용해 CSR과 SSR 방식 모두 가능하다는 것
SPA(Single Page Application) : 한 개의 페이지로 구성된 어플리케이션
MPA(Multiple Page Application) : 여러개의 페이지로 구성된 어플리케이션
CSR(Client Side Rendering) : 클라이언트 측에서 렌더링을 하는 방식
SSR(Server Side Rendering) : 서버 측에서 렌더링을 하는 방식
일반적으로 CSR = SPA , SSR = MPA 이라고 공식
React, Vue, Angular 모두 SSR도 지원
Next.js는 다음과 같은 방식으로 작동한다.
1. 사용자가 처음 페이지를 접속을 요청 했을때 Next.js 서버는 사용자에게 랜더링될 HTML을 응답 값으로 보내준다 (SSR 방식).
2. 그 후 브라우저는 추가적인 자바스크립트 번들을 다운로드 받아 실행한다.
3. 사용자가 해당 페이지에서 다른 페이지로 이동할때는 Next.js에 서버가 아닌 브라우저에서 처리하여 이동하게 한다. (CSR 방식)
SSR방식의 렌더링 과정
1.브라우저에서 URL을 입력해서 서버에 HTTP Request를 보낸다.
2.서버가 이 요청을 받아서 해당 페이지를 만들기 시작한다. 이때 필요한 Data Fetching을 미리 해서 (API Call, Hydrate 등) 빈 페이지가 아닌 초기 콘텐츠가 로딩된 페이지를 만들어준다.
브라우저가 이 HTML 페이지를 받아 페이지를 DOM에 그린다. (이 시점부터 페이지가 사용자에게 보이게 된다)
3.브라우저가 페이지를 그리면서 동시에 태그 등을 통해 JS, CSS파일 등을 로딩한다.
4.로딩된 JS를 실행한다.
5.Interactive 한 페이지 구성이 완료된다.
ssr 장점
1. 빠른 로딩 속도
2. JavaScript엔진이 없는 검색로봇이 페이지를 크롤링하기에 적합해 검색엔진최적화(SEO)가 가능
ssr 단점
1. html의 링크 태그의 href를 통해 페이지를 이동하고 해당 리소스를 서버에 요청하기 때문에 새로운 페이지로 이동할 때마다 화면이 새로고침되어(깜빡거려) 사용자 경험을 저하
2. 매 페이지마다 서버에서 전송할 데이터를 저장해야 하여 부하가 발생
3. 초기 로딩속도는 빠르지만 JS 파일이 로드되기 전까지는 인터렉션이 되지 않음
SPA 장점
1. 자연스러운 사용자 경험(UX)
2. 필요한 리소스만 부분적으로 로딩(성능)
3. 서버의 탬플릿 연산을 클라이언트로 분산(성능)
4. 컴포넌트별 개발 용이(생산성)
5. 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능(생산성)
spa 단점
1. javaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도 느림(webpack 의 code splitting으로 해결)
2. 검색엔진최적화(SEO)가 어려움 (웹페이지 header에 메타데이터를 정확하게 써놓거나, CSR과 SSR을 혼합해 사용하는 것으로 해결)
SPA는 보통 CSR로 동작하고, 그렇기 때문에 실제 HTML은 비어있는 경우가 많아 검색엔진 최적화(SEO)에서 불리한 부분이 많다
3. 보안 이슈 (프론트엔드에 비즈니스 로직 최소화)
(SSR에서는 사용자에 대한 정보를 세션으로 관리를 할 수 있다. CSR일 경우 Cookie나 localstorage에서 사용자에 대한 정보를 저장해야 하는데 이는 XSS 공격에서 취약하다.)
리액트 CSR방식의 렌더링 과정
1.브라우저에서 URL을 입력하면 서버에 HTTP Request를 통해 HTML을 다운로드한다.
2.맨 처음 다운로드한 HTML 파일은 아무것도 그려져 있지 않다. 다만 여러 JS, CSS파일을 불러올 수 있는 링크들이 있으며 이 링크를 통해 JS, CSS를 다운로드한다.
3.브라우저가 JS코드를 실행한다. 이 JS코드 안에서 React가 구동되며 이 React가 VirtualDOM에 콘텐츠를 렌더링 한다.
4.VirtualDOM 구성이 완료되면 이를 브라우저의 DOM에 붙인다. (기본적으로는"root"의 하위)
5.브라우저가 렌더 트리 구성, 페인트, 플로우 등의 과정을 거쳐 페이지를 그린다
6.브라우저에 페이지가 나타나게 된다
Next.js + express
next.js는 /like/:id와 같은 동적 주소을 처리하지 못한다.
이러한 문제를 해결할 수 있는 방법은 express를 사용하는 것이다.
연결참고
