[Coding Apple] 1장 Next.js 많이 쓰는 이유를 알아보자

Client-side Rendering의 시대가 가고, Server-side Rendering의 시대가 오고 있다.

 

html을 서버에서 만드는 것: Server-side Rendering

React나 Vue 라이브러리를 사용하여 브라우저가 실시간으로 만들어주는 것: Client-side Rendering

 

Client-side Rendering은 단점이 아래 두가지가 있는데, 이는 사이트 수익성에 악영향을 끼친다.

1. 구글 검색 노출이 낮다. (되긴 하는데 오래 걸림)
2. 페이지 로딩 속도가 낮다.

Server-side Rendering은 html을 웹 페이지를 서버에서 다 만들고 보내기 때문에 유저에게 js 코드를 많이 보내지 않기에 가볍다.

다음은 Server-side Rendering의 장점이다.

1. 위의 단점들이 사라진다.
2. 원하는 곳에서는 client-side rendering이 가능하다.

 

Next.js 요약

풀스택 프레임워크로써, 프론트엔드 + 백엔드 모두 가능하다.

HTML/CSS -> JavaScript -> React -> Next.js

 

장점1. 캐싱 쉬움

장점2. 폰트나 이미지 최적화됨

 

Next.js 관리하는 Vercel은 언플의 신임

 

단점

폴더 기반 라우팅을 해주다 보니 예약 파일이 많아져서 프로젝트가 복잡해질 수 있다.

React의 미완성 기능을 도입해놔서 귀찮아진다.

Server component와 Client Component를 구분해서 짜는게 귀찮다.

Websocket, webRTC는 다른 node.js 서버를 만들고 연결해야 한다.

 

그냥 HTML 렌더링만 잘할 뿐인데, 그게 가장 중요한 것이기 때문이다.

 

 

앞으로 해볼 프로젝트는 총 2개로 다음과 같다.

프로젝트 1. 문법 학습용 쿠팡후레쉬

프로젝트 2. 여러 기능 있는 게시판 같은거

• DB 기능
• 글 수정삭제
• 회원기능
• 댓글
• 이미지
• 애니메이션
• 캐싱
• 클라우드 배포