Static Rendering vs Server Side Rendering

공통점

둘 다, 사이트 URL에 대응하는 HTML을 생성하고 SEO를 향상시킨다.

Static Rendering

차이점은 static rendering은 빌드 타임에 일어나고, server rendering은 유저가 요구할 때마다 일어난다는 것이다.

미리 빌드 타임에 각 URL에 대한 모든 HTML 파일들을 다 만들어 놓고, s3나 웹서버에 push 해놓고 유저가 요청할 때 미리 만들어둔 것을 전송한다. 예를 들어 s3 cloudfront를 사용하면 요청이 오면 cloudfront를 사용해 캐시된 버전이 있는지 확인하고 없으면 s3 요청을 한다.

장점

• 모든 요청 가능한 리퀘스트에 대응하는 응답을 다 만들어둔다. 그렇기 때문에 당연히 응답 속도가 매우 빠르다.

단점

• 요청 가능한 리퀘스트를 미리 예측할 수 없다면, 미리 만들어둘 수 없다.
  • 요청할 때마다 응답이 바뀌는 경우
  • search engine

Server Side Rendering

요청할 때마다 그때그때 만들어준다. react에서는 express나 nextjs를 실행하는 서버를 설정해서 가능하다.

장점

• 당연히 스태틱 렌더링보다 느리지만, 일반적으로 그렇게 크게 느리지 않음.
• 어떠한 요청에도 동적인 응답 가능.
• 인증되지 않는 유저에게는 선택적으로 컨텐츠를 숨길 수 있음.

서버렌더링은 SEO 목적으로 각 페이지에 specific한 HTML이 필요한 경우에 쓰면 된다. 그러나 SEO랑 무관한 앱을 만들고 있다면, 하나의 HTML만이 필요할 수도 있다.

Ref

https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering

https://frontarm.com/james-k-nelson/static-vs-server-rendering/