Next (SSG vs SSR) vs React 무얼 쓸까?

 

 Next vs React

 

Next.js

- 장점 : next는 SSR이다. 

서버에서 이미 렌더링 해줘서 브라우저에 전달하기 때문에

초기 로딩 시간이 단축된다.  

SEO에 유리함

 

- 단점 : 서버에서 렌더링 해준 후 전달되기 때문에 화면 전환이 느리다. 

페이지를 요청할 때마다 새로고침 되어 UX가 떨어진다.

서버에서 전체 앱을 미리 렌더링하기 때문에 로딩시 빈화면을 볼 수도 있다. 

간단한 데이터 수정에도 서버 과부하가 걸릴 수 있다. 

특정 규칙과 구조를 따라야 하여 유연성의 제한이 있음

학습곡선이 존재함.

 

- 보완 : 

SSG(SSR필요없는 경우), 자동 정적 최적화(필요할때만 SSR 가능한경우 정적페이지),

이미지 최적화(Image 컴포넌트),

코드 스플리팅 레이지로딩, 프리패칭 

 

SSR vs SSG ?

 

SSG 

웹페이지를 미리 생성해놓음 

검색 엔진이 크롤링하기 적합한 구조 (마케팅 페이지에 적합)

빌드시점에 HTML 웹페이지 전체를 다시 만들어냄 (빌드시간이 긴 단점)

이후에는 CDN으로 캐시되고 요청마다 HTML을 재사용

 

SSR

웹페이지를 요청에 따라서 생성하게 됨 

유저마다 다른 경험을 제공하기 용이함

자체 DB서버나 클라우드 플랫폼에 데이터를 저장하는 경우가 많음

SPA SSG 대비 느리고 무거움

 

상황마다 적절한 렌더링 방식

SEO 적용이 크게 중요하지 않거나 데이터 pre-rendering이 필요없다면 CSR
정적 문서로 충분한 화면이면서 빠른 HTML 문서 반환이 필요하다면 SSG
컨텐츠가 동적이지만 자주 변경되지 않는 경우 ISR
매 요청마다 화면이 달라지면서 서버 사이드로 렌더링을 하고자 한다면 SSR

 

 

React.js

- 장점 :  react는 CSR이다. 

사용자 요청에 따른 화면 전환이 빠르다.

한번 초기로딩을 기다리고 나면 필요한 리소스만 서버에 요청하면 되므로 화면전환 속도가 빠르며

서버 부하가 줄어든다.

라이브러리이므로 다른 도구와 라이브러리를 자유롭게 조합해 사용할 수 있다. 

거대한 컴퓨니티와 생태계. 튜토리얼, 라이브러리, 도구, 커뮤니티 지원을 받을 수 있다. 

코드의 재사용성과 유지보수성을 향상시킬 수 있다.  

 

- 단점 : 자바스크립트를 모두 분석해야 화면이 로딩되므로 초기화면 로딩 시간이 늦춰지는 단점이 있어서 

사용자 경험이 저하될 수 있다.

검색엔진이 분석하는 페이지가 빈 페이지 이므로 

SEO방식에 불리하다 

 

- 보완 : SEO에 불리한 것을 보완하기 위해 Helmet을 활용한다 

초기 로딩시간 단축을 위해 lazy메서드를 활용한 코드 스플리팅을 통해 필요한 파일만 제공한다. 

 

CSR(React)과 SSR(Next)의 차이 그리고 SEO

SPA와 SSG, 그리고 SSR

Next.js의 렌더링 방식 이해하기 - SSR, SSG, ISR

CSR vs SSR vs SSG - 콥 노트