NextJs

1. NextJs 란?

React를 위해 만든 오픈소스 자바스크립트 웹 프레임워크이다.

 

아래와 같은 기능을 제공한다.

• SSR ( Server Sied Rendering ) : 서버 사이드 렌더링
• SSG( Static Site Generation) : 정적 사이트 생성
• ISR ( Incremental Static Regeneration) 증분 정적 재생성

 

2. SSR

각 요청에 대해 서버에서 HTML 페이지를 생성하여 초기 렌더링에 필요한 모든 데이터와 마크업을 포함 시킨다.

이렇게 만들어진 HTML은 사용자에게 페이지를 빠르게 보여준다.

HTML을 불러온 후에는 필요한 JS 코드를 불러온다.

 

장점

1. SEO ( Search Engine Optimization ) 개선
   검색 엔진은 페이지의 콘텐츠를 분석하여 색인화하는데,
   CSR 방식에서는 초기 HTML에 콘텐츠가 없기 때문에 검색 엔진이 페이지를 적절히 인덱싱하기 어렵다.
   SSR을 사용하면 초기 HTML에 콘텐츠가 포함되어 검색 엔진 최적화를 개선할 수 있다.
2. 퍼포먼스 개선
   CSR은 초기 로딩 시간이 길고, 사용자가 페이지를 보기 전에 클라이언트에서 JS를 다운로드하고 실행해야 한다. SSR은 서버에서 페이지를 완전히 렌더링하여 클라이언트로 보내기 때문에 초기 로딩 속도가 개선되고,
   사용자가 더 빠르게 콘텐츠를 볼 수 있다.
3. 사용자 경험 향상
   CSR 방식은 초기 로딩 시간이 길어 사용자가 페이지를 기다려야 하는 단점이 있다.
   SSR은 초기 로딩 시간을 단축하여 사용자 경험을 향상시킨다.
4. 소셜 미디어 공유 개선
   소셜 미디어 플랫폼은 웹 페이지를 스크랩하여 미리보기를 생성하는데, 
   CSR 방식에서는 초기 HTML에 콘텐츠가 없어 미리보기가 제대로 표시되지 않을 수 있다.
   SSR을 사용하면 초기 HTML에 콘텐츠가 포함되어 미리보기가 정상적으로 표시된다.

 

단점

1. 허나 렌더링을 해줘야하는 서버가 느리다면 웹사이트가 급격히 느려질 수 있다.
2. 서버 부하가 CSR에 비해 비교적 많다.
3. 페이지를 이동할 때마다 화면이 깜박거린다.

 

3. NextJs의 주요 기능

1. Hot Module Reloading
   코드 수정시 새로고침을 하지 않아도 업데이트 시켜준다.
2. Automatic Code Splitting (자동 코드 분할)
   각 페이지에서 사용되는 컴포넌트를 기반으로 코드를 자동으로 작은 번들로 분할하여,
   사용자가 현재 페이지에 필요한 코드만 다운로드할 수 있게 해준다.
   페이지 로딩 시간이 단축되고 성능 향상을 볼 수 있다.
3. Automatic Routing
   pages 폴더에 있는 파일들은 해당 파일의 이름으로 자동 라우팅 된다.
   public 폴더도 자동 라우팅이 가능하지만, 모든 사람들이 접근할 수 있기에 조심해야 한다.
4. Single File Components
   Style Jsx 를 사용해서 컴포넌트 내부에 해당 컴포넌트만을 스코프하는 Css를 만들 수 있다.
5. Hybrid Rendering
   SSR과 SSG를 모두 지원하여, 가장 적합한 방식을 선택하거나 두 기술을 결합 할 수 있게 해준다.
6. 통합된 API 개발
   서버리스 API 경로를 쉽게 생성할 수 있도록 지원하여,
   개발 프로세스를 간소화 하고 FE와 BE 간의 통신을 원활하게 해준다.
7. 배포 옵션
   다양한 호스팅 및 배포 옵션 (Vercel, AWS, Google Cloud 등)을 지원하여 배포가 간편하다.