- pre-rendering을 쉽게 할 수 있다.
- 자동으로 코드 스플리팅, pre-fetching 을 해준다.
- 파일시스템 기반 라우팅이 가능하다.
- vercel로 서버 호스팅이 쉽다.
- 이밖의 이점.
1. pre-rendering을 쉽게 할 수 있다.
클라이언트 사이드 렌더링만 가지고 개발한 사이트는 맨 처음에는 텅 빈 화면이 나온다.
이후 자바스크립트 실행 -> 리액트 동작 과정을 거친 후 화면이 보이기때문에 초기 로딩이 느리다.
또한, 맨 처음에 텅 빈 화면이 나오기때문에 검색엔진에 제공할 수 있는 정보가 적어서 검색 엔진 최적화가 되지 않는다.
따라서 사용자경험과 검색엔진 최적화를 위해 pre-rendering을 할 수 있다.
프리렌더링 : 화면의 컴포넌트나 데이터를 미리 렌더링해서 html으로 저장해두거나, 서버가 해당 html을 내려주는 것.
2. 자동으로 코드 스플리팅, pre-fetching 을 해준다.
Code Splitting
필요한 코드들만을 분리해 놓는 작업.
next는 기본적으로 모든 페이지를 코드스플리팅해준다.
Pre-fetching
사용자가 다음 행동에 필요한 코드들을 미리 가져와서 빠르게 로드하는 것을 말한다.
next에서는 화면에 Link태그가 보이면 링크를 클릭하기 전에 해당 링크로 이동할 페이지의 자바스크립트만을 미리 다운받아둔다.
서버사이드렌더링으로 페이지를 구현하더라도, 맨 처음 페이지에 접속할 때에는 프리렌더링된 html을 보여주지만
Link를 클릭해서 페이지를 이동하는 경우, javascript코드와 json Data만 받아서 화면을 렌더링한다.
따라서 Link로 화면을 전환하면 빠르게 로드된다.
(그러니 반드시 a태그가 아닌 Link태그를 사용하자)
이 두 작업으로, 모든 페이지와 데이터를 한번에 모두 가져와서 전부 새로 렌더링하는 것이 아니라, 일부 데이터와 컴포넌트만을 가져와서 변경해주므로 효율적으로 화면을 렌더링해준다. 따라서 우리는 최적화된 서버를 사용할 수 있게된다.
3. 파일시스템 기반 라우팅이 가능하다.
파일 시스템 기반 라우팅 : 파일의 경로가 주소에 매칭되는 라우팅 방식.
기존 html만으로 개발하던 방식과 같다.
위와같은 폴더 경로가 있을 때,
localhost:3000/search
localhost:3000/products/3이러한 url주소를 입력하면 별다른 설정 없이도 해당 페이지로 이동한다.
따라서 코드 구조를 직관적으로 알 수 있다.
4. vercel로 서버 호스팅이 쉽다.
vercel은 Next.js에서 공식적으로 제공하는 호스팅 사이트이다.
Next.js에 최적화되어있기때문에 배포가 쉽다. (git 연결만 하면 됨)
5. 이밖의 이점.
- next의 Image 컴포넌트로 이미지 최적화.
- 파일시스템 라우팅, 리다이렉트, 스타일링을 위한 환경 설정(Sass, Css Modules, Tailwind 등)등을 제공해 좋은 개발자 경험을 제공.
참조
https://daily-life-of-bigone.tistory.com/40
https://velog.io/@sa02045/NextJS-%EC%BD%94%EB%93%9C%EC%8A%A4%ED%94%8C%EB%A6%BF%EA%B3%BC-prefetch
'React > Next.js' 카테고리의 다른 글
| next.js SSR 실행 과정 (0) | 2023.12.01 |
|---|
