TIL 02.01

CSR(Client Side Rendering) 

장점 : 서버에서 새로운 html을 내려 받지 않고 클라이언트에서 그리기 때문에 (bundle.js)

화면 깜빡임 없이 앱과 같은 경험으로 웹사이트를 사용할 수 있다.

 

단점1 : 번들링된 js 파일의 크기가 크기 때문에 사용자가 웹사이트를 처음 들어왔을 때 화면에 뭔가 그려지는 것을 보는데까지 시간이 오래 걸린다.(화면에 그려지는 타이밍 = interaction을 할 수 있는 타이밍)

-> code splitting으로 어느정도 해결할 수 있음 -> URL마다 각각의 번들링된 js 파일을 만들 수 있다

 

단점2 : SEO(검색 엔진 최적화) 대응이 힘들다.

 

Next.js => SSR(Server Side Rendering) + CSR(Client Side Rendering)

서버에서 html파일을 랜더링해줌 (SSR) // 서버에서 단순히 정적인 웹 페이지를 내려준다

next/link, next/router를 통해 내부적으로 CSR을 동작하게 함

 

처음에 사용자가 웹사이트에 들어왔을 때는 SSR

그 뒤로는 CSR로 동작하게 하는 방식