Next.js를 왜 쓰는가?

일단 CSR , SSR에 대한 개념을 알아야 한다.

 

CSR (Client-Side Rendering)

개념

• 클라이언트(브라우저)에서 JavaScript를 사용하여 콘텐츠를 렌더링하는 방식입니다.
• 초기 HTML 파일은 거의 비어 있고, JavaScript 파일을 로드하여 화면을 구성합니다.

장점

• 사용자 경험: 페이지 전환이 빠르고, 애플리케이션과 유사한 경험을 제공할 수 있습니다.
• 서버 부하 감소: 초기 로드 이후에는 서버와의 통신이 줄어듭니다.
• 유연성: 프론트엔드에서 다양한 기능을 쉽게 구현할 수 있습니다.

단점

• SEO 문제: 검색 엔진 크롤러가 JavaScript를 제대로 실행하지 못하면 콘텐츠를 인덱싱하기 어렵습니다.
• 초기 로드 시간: JavaScript 파일을 로드하고 실행하는 데 시간이 걸릴 수 있습니다.
• JS 의존성: 모든 페이지 렌더링이 JavaScript에 의존하기 때문에, JS가 실행되지 않으면 페이지를 볼 수 없습니다.\

이러한 문제를 해결하려고 나온 것이 Next.js라는 프레임워크다.

 

 

 

SSR (Server-Side Rendering)

개념

• 서버에서 HTML을 완전히 렌더링한 후 클라이언트에 전송하는 방식이다.
• 페이지 요청 시 서버에서 HTML을 생성하여 클라이언트에 보낸다..

장점

• SEO 친화적: 서버에서 HTML을 완전히 렌더링하여 보내기 때문에 검색 엔진이 쉽게 인덱싱할 수 있다.
• 빠른 초기 로드: 클라이언트가 완전한 HTML을 바로 받아보기 때문에 초기 로드가 빠르다.
• JS 비의존성: JavaScript가 비활성화되어도 콘텐츠를 볼 수 있.

단점

• 서버 부하: 각 페이지 요청마다 서버에서 HTML을 렌더링해야 하므로 서버 부하가 커질 수 있다.
• 개발 복잡성: 서버와 클라이언트 양쪽 모두에서 렌더링을 고려해야 하므로 개발이 복잡할 수 있다.
• 느린 페이지 전환: 각 페이지 전환 시 서버 요청이 필요하여 느려질 수 있다.

 

Next.js는 SSR을 지원하며 CSR의 단점을 보완하기 위해 사용한다.

사용방법은 React 내에서 구동하는 방식과 거의 동일하다. 몇가지 규칙이 생기는 것 외엔 말이다.

 

규칙을 알아보기 전에  Next.js가 어떤 식으로 동작하는지 알아보겠다.

 

 

 

Hydration(하이드레이션)

출처 : 수코딩

하이드레이션은 "영얍공급 , 적시다"라는 의미를 가지고 있다.

 

SSR은 렌더링을 두번한다. 

첫번째는 HTML,CSS를 서버에서 클라이언트로 전송한다.(이 작업은 무척이나 가볍다)

두번째는 무거운 자바스크립트 코드를 적셔준다.

 

CSR이라면 , 아무것도 보이지 않는 화면으로 HTML,CSS,JS을 전송해서 보여준다면

SSR은 HTML,CSS는 미리 완성하여 보내주고 JS를 적셔주는 것이다.

 

이렇게 진행하면 클라이언트는 CSR을 경험했던 것과 다르게 첫화면도 빠르게 로딩 되고

SEO(검색엔진 최적화)까지 가능하다.

 

참고로 next.js는 프레임워크 , 리액트는 라이브러리다.

라이브러리 -  "이렇게 하면 좋지만 안해도 괜찮아요"

프레임워크 -  "내 가이드대로 작성 안하면 기능 못누림"

라이브러리는 포용성이 넓지만 프레임워크는 꼭 지켜야 하는 가이드라인이라 보면 된다.

 

 

 

설치 방법은 next.js 공식 홈페이지에 있는 명령어를 치고 요구되는 선택사항을 골라주면 된다.

이런 선택은 다 취향이니까 취향껏 하면 된다.

npx create-next-app@latest

이건 next.js 최신버전 설치하는 명령어임