Next.js
- 리액트를 베이스로한 프레임워크이다.
- 웹/앱을 개발하는데 리액트만으로는 힘든 것들을 가능하게 해준다.
- 가장 큰 특징으로는 Server Side Rendering 이다.
CSR(Client Side Rendering)
- 렌더링 하는 주체가 client. 웹 client에서 client가 가리키는 것은 브라우저이다. 즉 브라우저가 렌더링 하는 것
- 애플리케이션에서 필요한 HTML, 라이브러리, 소스코드 이 모든 것들을 client측에서 server로부터 다운로드해서 client에서 DOM 요소로 변환하여 브라우저에 표기하는 것이다.
과정
리액트로 만든 웹/앱일 경우
1. client와 server가 있을 때 client에서 server에 웹페이지를 달라고 요청한다.
2. server에서 텅텅 빈 HTML을 보내준다.
3. 리액트 자체 라이브러리 소스코드와 컴포넌트로 만든 JS 소스코드를 server에서 다운로드 한다.
4. 브라우저에 화면을 보여준다.
장점
- 최초 로딩 후 사용자가 빠르게 애플리케이션을 사용할 수 있다.
- 한 패이지 내에서 애플리케이션을 사용하며 부분적으로 데이터를 가져와 서버의 부하가 작다.
문제점
- 사용자가 처음 화면을 볼 때 까지 로딩시간이 길다.
- HTML에 UI 코드가 아무것도 없기 때문에 자바스크립트 코드 활성화가 필수이다.
- SEO 최적화에 불리하다.
- client에서 모든 내용을 다운받아 실행되기 때문에 보안에 취약하다.
이런 React.js의 문제를 해결하기 위해 나온 것이 Next.js 프레임워크이다.
또한 CSR이 가진 문제점을 보완하고 해결하기 위해 나온 것이 SSG, SSR이다.
SSR (Sever Side Rendering)
- 렌더링 주체자가 server이며 요청시 렌더링 된다.
- 미리 렌더링을 하는게 아니라 client가 요청할 때 서버에서 렌더링을 해서 렌더링 결과를 client에 보낸다.
장점
- server에서 미리 만든 HTML 파일을 가져오기 때문에 JS를 다운로드 할 때 까지 기다리지 않아 페이지 로딩시간이 빠르다.
- 웹 크롤러가 아주 빠르고 효율적으로 페이지를 확인해 SEO 최적화가 좋다.
- 불필요하게 코드를 client에 보내지 않아 보안이 뛰어나다.
- 요청할 때 마다 렌더링을 하기 때문에 요청자가 누구냐에 따라 사용자에게 맞는 데이터를 제공할 수 있기 때문에 사용자별 필요한 데이터를 사용한다.
문제점
- 요청할 때 마다 서버에서 렌더링을 한 뒤 client에 보내기 때문에 서버의 과부하가 걸릴 수 있다.
Next.js 시작하기
- 터미널에서
npx create-next-app@latest --e xperimental-app입력
- 폴더명을 입력해주고
No / Yes중 선택하면 되는데 나는 기본값으로 설정했다.
폴더 구조
- 13.2 버전부터 기존에 있던 pages폴더가 사라지고 app폴더에서 모든 설정이 가능하게 되었다.
라우팅
정적 라우팅
- app폴더에 movieList 폴더를 만든다.
- movieList 폴더안에
page.tsx파일을 만들어 준다. (페이지 생성:localhost:3000/movieList) - movieList 폴더안에 broker 폴더를 만든다.
- broker 폴더안에
page.tsx파일을 만들어 준다. (페이지 생성:localhost:3000/movieList/broker)
동적 라우팅
- react-router-dom 에서
movieList/:id같이 경로 설정을 해준 것처럼 하는 것을 동적 라우팅이라고 한다. - movieList 폴더에 동적인 라우트라고 알려주기 위해서는
[] 대괄호를 사용한다. - 아무 용어나 상관 없으나
[slug]용어를 많이 쓴다. 그 안에page.tsx파일을 만든다. - Next.js 에서 자동으로 컴포넌트에
params를props로 전달해준다.
취준 개발자