NextJs 렌더링 방식

YANG쓰·2023년 4월 26일
post-thumbnail

서론...

NextJs를 공부하는 와중에

npm run build를 하여 최적화를 진행했습니다.

.next 폴더가 생기고 Nextjs 서버로 띄어줄수가 있다

렌더링의 방식


Route (app)                                Size     First Load JS
┌ ○ /                                      176 B          79.8 kB
├ ○ /api/hello                             0 B                0 B
├ λ /detail/[...id]                        4.96 kB        79.1 kB
├ λ /edit/[...id]                          137 B          74.2 kB
├ ○ /favicon.ico                           0 B                0 B
├ ○ /list                                  1.22 kB        80.8 kB
└ ○ /write                                 2.33 kB        76.4 kB

여기서 나오는
O는 보통은 static redering을 첫페이지에서 해준다.
Npm run build할때 만든 html페이지는 그대로 유저에게 보내준다.

장점은 전송이 빨라져서 좋다. 완성본이 만들어져 있기에 바로 보내주기만 하면 되는것이라
빠르다는점이다.

λ(람다) 는 다이나믹 렌더링(dynamic rendering)을 해준다.
유저가 페이지를 접속마다 Html을 새로 만들어서 보내주는 방식이다.

Fetch, useSerchParams, cookies, headers,[dynamic route]
사용시에는 자동으로 다이나믹 렌더링을 해주니 알아두자.

profile
양쓰

0개의 댓글