[Next.js] Dynamic rendering / Static rendering

💡 Build 작업

Next.js 로 만든 서버를 다른 곳에 배포하기 위해 터미널에 

npm run build

 

위 코드로 build 를 하면 리액트 문법으로 작성한 코드들을 친화적인 html, css, js 파일로 바꿔주는 작업을 한다.

그 다음에

npm run start

 

명령어를 통해서 실제로 유저 요청을 처리할 수 있는 Next.js 서버가 완성된다.

실제로 운영하는 사이트라면 클라우드에 올려서 npm run start 를 실행시킨다.

 

💡 Dynamic rendering / Static rendering

- Dynamic rendering

기본적으로 Next.js 는 페이지를 하나 만들면 기본적으로 static rendering 식으로 페이지를 보여준다.

npm run build 시 생성한 html 을 보여주는 걸 static rendering 이라고 하는데 페이지가 정적이어서 매번 html  페이지를 새로 만들 필요가 없으니 그냥 그대로 보내는 것이다.

매우 빠르게 페이지 전송이 가능하다는 장점이 있다.

 

- Static rendering

fetch, useSearchParams(), cookies(), headers(), [dynamic rout] 등을 사용하면 dynamic rendering 으로 페이지를 보여준다.

npm run build 로 페이지를 만들었지만 유저가 접속할 때 마다 html 에 변동사항이 들어가기 때문에 유저가 페이지에 접속할 때마다 html 페이지를 서버에서 다시 그려준다는 것이다.

 

- rendering type 강제 변환

npm run build 를 하면 위처럼 λ (람다) 표시와 ㅇ 표시가 나오는데,

λ (람다) 표시는 dynamic rendering, ㅇ 표시는 static rendering 을 해준다는 말이다.

 

가끔 의도와 다르게 되는 경우가 있으니 한 번 확인을 해야한다.

위에서도 보다시피 /list 페이지는 매번 바뀌어야하는 dynamic rendering 이 되어야한다.

그럴 때에는 /list 의 page.js 파일 상단에 

 

이처럼 지정을 해주면 된다.

 

결론은 배포 전에 npm run build 를 통해 페이지들이 원하는대로 동작중인지 잘 살펴봐야한다.