nuxt를 사용할때.. ssr과 csr을 잘 이해해야한다.

간단하게 이야기하자면,,

CSR을 통해서만 가능한 로직이 있따면

onMounted같은 라이프사이클 훅을 사용해서 client side에서 렌더링 될수 있도록 해야한다.

예를들어 request를 요청할때 알아서 브라우저 상의 language code를 accept-language라는 header로 넣어서 보내주는데..

이걸 ssr에서 request를 요청하게 되면 브라우저의 language code를 알수 없는 상황이기 때문에,

첫 vue app이 로드될때까지는 language code가 제대로 안넘어간다.

 

이 문제를 해결할수 있는 방법은 다양하겠지만..

 

1. 첫 로딩시 browser 설정 언어대신에, 서비스에서 이용할 언어를 사용자가 선택하고 해당 언어 코드를 header에 심어서 보내주는 방법

2. reqeust를 ssr이 아니라 client side에서 보낼수 있도록 해주는 것

 

나는 2번째 방법으로 해결했다.

굳이 CSR이 필요하지 않는 경우는 SSR로 해도된다.

이것은 개발자가 의도적으로 사용하면 되는것이다.

 

참고로 서버 자원이 충분한경우 보통은 SSR이 CSR보다 빠를수 밖에 없다.