미리 알면 좋은 개념

TTFB(Time To First Byte) - 서버의 응답 시간

FP(First Paint) - 1픽셀이라도 화면에 렌더링된 시간

FCP(First Contentful Paint) - 페이지 콘텐츠의 일부가 화면에 렌더링된 시간

TTI(Time To Interactive) - 주요 자원들의 로드를 마치고 사용자의 인풋에 안정적으로 응답할 수 있는 시간

SSR (Server Side Rendering)

빠른 TTI

서버에서 렌더링을 하면서 필요한 로직을 실행하기 때문에 클라이언트에서 많은 자바스크립트를 실행시킬 필요가 없다. 즉 브라우저에 페이지가 보이고 나서 메인 스레드에서 이루어지는 일이 별로 없기 때문에 사용자의 반응에 반응할 수 있는 시간은 빨라진다.

느린 TTFB

서버는 요청 받을 때마다 그에 맞는 HTML을 생성해서 주기 때문에 처리할 것이 많은 서버의 응답 시간은 느려질 것이다.

Static SSR (Static Site Generation)

빠른 TTFB

서버는 미리 각 URL에 맞는 HTML을 생성해 놓기 때문에 서버의 응답 시간이 빠르다.

CSR (Client Side Rendering)

느린 TTI

자바스크립트에 의존도가 높기 때문에 어플리케이션이 클수록 자바스크립의 양은 매우 커진다. 참고로 자바스크립트는 같은 크기의 이미지, 폰트 보다 브라우저가 처리하는 비용이 더 많이 든다. 그리고 자바스크립트를 실행하는 동안 메인 스레드는 블락되기 때문에 사용자의 반응에 응답할 수 있는 시간 더 늦어지게 된다.

좋지 않은 SEO

처음에 내용이 없는 HTML을 로드하기 때문에 크롤러가 얻을 수 있는 정보가 별로 없다. 그렇기 때문에 SEO가 좋지 못하다. 열심히 서비스를 만들었는데 검색 노출이 되지 않을 수도 있는 것이다. 요즘엔 자바스크립트를 실행시킬 수 있는 크롤러가 등장하고 있긴 하지만 아직 일반적이진 않다.

언제 무엇을 쓰는 것이 좋을까

"사용자의 요청 전에 페이지를 미리 만들어 두어도 되나?"

위 질문에 yes라면 사용자의 요청이 무엇이든 내용은 동일하다는 것이므로 Static SSR을 사용한다. 대표적으로 블로그, 도움말 페이지가 될 수 있다.

위 질문에 no라면 사용자의 요청에 따라 동적으로 내용이 달라진다는 것이므로 SSR 혹은 CSR을 사용한다. 요청을 할 때마다 최신의 데이터를 보여주어야하는 페이지에 적합하다. 대표적으로 SSR은 (자주 바뀌는) 상품 리스트 페이지, CSR은  사용자 개인 정보 페이지가 될 수 있다.

도움이 된 자료

Rendernig on the Web, (2022.03.10), https://web.dev/rendering-on-the-web/

JavaScript Start-up Optimization, (2022.03.10), https://web.dev/optimizing-content-efficiency-javascript-startup-optimization/

pre-rendering and Data Fetching, (2022.03.10), https://nextjs.org/learn/basics/data-fetching/two-forms