[ Next.js 공부하기 ] 03. pages 와 static pre rendering

[ 이전 공부 내용 ]

2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 )

2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 02. Library와 Framework

 

---

1. pages

- 이전 Library와 framework에서도 말했듯이, pages에 있는 index 파일명은 home이 되고, test.tsx 파일은, /test 경로를 가지게 된다.

파일의 이름이 경로명으로 설정이 된다는 것을 알 수 있다.

 

- 또한 규칙은, typescript는 문제가 없지만, javascript는, export default는 무조건 붙여줘야만 경로 설정이 가능해진다는 것을 주의하자!

 

2. static pre rendering

- react.js는 CSR 이라고, Client Side Rendering 이라는 것을 기본적으로 가지고 있는데

react.js외 next.js는, jsx 방식으로, html 및 function들을 만들어서 사용하는 것을 알 것이다.

하지만 react.js는, 만약 느린 인터넷 환경에서 새로고침을 하게 된다면, 모든 것을 불러와야만 html 파일과 css / javascript 가 불러와져서 현재 렌더링 되고 있는건지 아닌 것인지를 알 수가 없다. 흰 화면에서 점점 조금씩 불러와서 렌더링 해주는 식이기 때문이다.

 

하지만 next.js는, html 파일이 미리 불러와져 있기 때문에, react.js 보다 빠르게 렌더링이 가능해진다.

같은 인터넷 환경에서 같은 코드라고 한다면, 속도 차이에서 엄청난 차이가 생기기 때문에, 빠르게 렌더링을 하고 싶다면, next.js가 좋은 선택이 될 수 있다.

 

 

[ 정리 ]

- 쉽게 정리를 해보자면, next.js는 static pre-rendering이 가능해지기 때문에, 초기 상태의 html 파일을 가지고 있다.  만약 새로고침을 해도 초기 상태의 html 파일을 빠르게 렌더링을 해준다.

 

- react.js는 pre-rendering을 하지 않기 때문에, 모든 데이터들이 불러와져야만 그 때서, html / css / javascript 가 실행이 된다.

그렇기 때문에, next.js에 비해 react.js가 느릴 수 밖에 없다고 볼 수 있다.