오늘 한 일
- [내배캠] Next.js 강의
학습 내용
Next.js
Next.js란?
이제까지 React를 사용하면서 React 환경에 익숙해져 있었다. 그런데 Next.js 강의를 들으니 또 새로운 개념이라 좀 어렵게 느껴졌다. 리액트는 SPA(Single Page Application)이자 CSR(Client Server Rendering)이다. Single Page를 구현하면서 더이상 새로고침이나 깜빡거림이 없어졌다. 그러나 CSR 렌더링 방식으로써 여전히 존재하는 문제점을 보완하기 위해 Next.js를 사용한다.
Next.js의 주요 특징
1. SSR(Server-Side Rendering)
브라우저의 페이지에 접속하면 그 순간 서버에서 html을 렌더링해서 전달해주는 방식이다. 페이지를 요청할 때마다 렌더링을 하게 되어 오래 걸리지만, 클라이언트로 전송되기 전에 렌더링이 되어 성능과 SEO가 향상된다.
2. SSG(Static-Site Generation)
SSR의 경우 페이지를 요청할 때마다 서버에서 렌더링을 하지만, 정적인 페이지를 제공할 때는 그럴 필요없이 빌드 시 HTML 페이지를 생성하고, 페이지를 요청할 때 이미 렌더링된 페이지를 전역적으로 사용하여 반환한다.
3. 자동 코드 분할
자동으로 코드를 더 작은 덩어리로 분할하여 특정 페이지에 필요한 것만 로드한다.
4. 파일 기반 라우팅(File-based routing)
기존의 리액트는 라우터 기반으로 라이브러리에 의존하는 반면, Next.js는 파일 구조를 기반으로 경로가 정의되어 직관적이고 구성하기가 쉽다.
5. 동적 경로 설정 용이
동적 경로 역시 /pages 디렉토리에 파일 제목을 [id].js로 만들어 설정할 수 있다.
이렇게 생성하면 /pages/1, /pages/2 이런 식으로 경로에 접근할 수 있다.
6. 데이터 가져오기
Next.js에서는 복잡한 서버 구축 없이도 API를 가져오고 배포할 수 있다.
데이터 가져오기는 서버 측 렌더링을 위한 getServerSideProps와 정적 사이트 생성을 위한 getStaticProps와 같은 함수를 사용하여 수행할 수 있다. 이 부분은 강의 내용이 상세하게 나와있지는 않아서 사실 잘 이해를 못했다. 그냥 외워서 사용해야 하는 것인가...?
CSR vs SSR
기존의 React와 Next.js의 가장 다른점은 클라이언트 측 렌더링인지 서버 측 렌더링인지 인 것 같다.
CSR
CSR은 초기 HTML이 최소한의 컨텐츠와 함께 클라이언트에 전송되면 브라우저는 API에서 동적 데이터를 가져오고, DOM을 업데이트하여 전체 페이지를 렌더링하는 JavaScript를 로드한다.
장점
- 빠른 초기 로드 속도 : 초기 HTML이 가볍기 때문에 페이지 로드 시간이 빨라진다.
- 빠른 페이지 이동 : 초기 로드 후 브라우저는 필요한 데이터만 가져와서 업데이트하기 때문에 페이지 간 이동이 빠르다.
단점
- SEO에 부적합 : 초기 HTML에는 전체 페이지 정보가 부족하여 검색 엔진 크롤링이 어렵다.
- 초기 로드 시간 느림 : JavaScript가 실행될 때까지 사용자는 비어있거나 부분적으로 렌더링된 페이지를 보게 된다.
SSR
SSR은 서버에서 웹 페이지를 렌더링하고 완전히 렌더링된 HTML을 클라이언트에 보낸다. 서버는 요청을 처리하고, 필요한 서버 측 코드를 실행하고, 필요한 데이터를 가져오고, HTML 마크업을 동적으로 생성한다. 그러면 클라이언트는 완전한 형식의 HTML 문서를 받는다.
장점
- SEO 친화적: HTML이 미리 제공되므로 검색 엔진이 콘텐츠를 쉽게 크롤링하고 색인화할 수 있다.
- 초기 로드 성능 향상: 서버가 완전히 렌더링된 페이지를 보내면 사용자는 콘텐츠를 더 빨리 볼 수 있다.
단점
- 느린 페이지 이동: 각 탐색마다 서버 왕복이 필요하므로 페이지 전환 속도가 느려진다.
- 서버 로드 증가: 서버는 각 요청에 대해 페이지를 렌더링해야 하므로 서버 로드가 증가한다.
오늘의 회고
TypeScript와 Next.js 강의로 넘어오면서 강의 집중도가 떨어졌다. 기존의 React와 JavaScript랑은 다른 개념이라 어렵기도 하고, 강의가 완전 초보자를 대상으로 하고 있다는 느낌은 안든다. 디테일하게 들어가지 못하는 느낌이라고 할까..? 다른 강의를 조금 더 참고해야 할 듯 하다. 너무 어려워...
내일부터는 수준별 수업 베이직반 수업을 처음부터 들어보면서 다시 개념정리를 해 볼 생각이다. 확실히 과제가 없으니까 여유가 있고, 부족했던 부분을 보충할 수 있는 시간이 생겨서 좋다.
