Nuxt.js는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 프레임워크
process 라는 전역객체는 서버와 클라이언트 어디서 실행 중인지 판별하기 위해 추가된 속성이다.
process.(env) 에서 (env)에서 client, server 로 분기처리를 나눌 수 있다.
if (process.client) {
// 클라이언트 사이드에서 실행되는 코드
console.log('This is running on the client side');
}
if (process.server) {
// 서버 사이드에서 실행되는 코드
console.log('This is running on the server side');
}
서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)은 웹 애플리케이션의 렌더링 방식에 대한 개념이다.
서버 사이드 렌더링 (SSR):
서버에서 초기 페이지를 완전히 렌더링하고, 클라이언트에게 전달
클라이언트가 페이지를 요청할 때마다 서버는 요청에 응답하여 페이지를 생성
HTML, CSS, JavaScript 등의 리소스가 서버에서 생성되어 클라이언트에게 전달되므로, 초기 로딩 속도가 빠름
검색 엔진 최적화(SEO)에 유리하며, 초기 페이지 로딩 전에 컨텐츠가 검색 가능
서버의 부하가 증가할 수 있으며, 클라이언트 측에서 상호작용에 대한 추가 요청이 필요할 수 있다.
>> 초기 로딩 속도와 검색엔진에 강점
클라이언트 사이드 렌더링 (CSR):
초기 페이지 템플릿은 서버에서 제공되지만, 페이지의 내용은 클라이언트에서 JavaScript를 사용하여 동적으로 렌더링.
클라이언트는 초기 페이지 템플릿과 필요한 데이터를 받은 후, JavaScript를 실행하여 페이지를 완성.
초기 로딩 속도는 느릴 수 있으나, 이후의 렌더링은 클라이언트에서 처리되므로 빠른 전환 및 상호작용이 가능.
검색 엔진은 초기 페이지 로딩 시에는 컨텐츠를 제대로 파악하지 못할 수 있으며, 추가적인 SEO 대책이 필요.
서버 부하가 적고, API를 통해 데이터를 가져와 동적으로 화면을 갱신할 수 있다.
>> 동적인 상호작용과 빠른 전환을 제공하는데 유리
대부분의 일반적인 JavaScript 프레임워크 및 라이브러리에서 사용된다.
nuxt2 문서에는 baseUrl에 환경변수를 작성하여 서버 측 환경변수와 동일한 속성을 만들거나, 그렇지 않은 경우 baseUrl 클라이언트 측과 같게 만든다...
export default {
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
}
}이 예시를 사용하여 axios 객체를 생성하고,인스턴스의 기본 URL을 설정하여 모든 요청의 기본 URL을 설정하고, Nuxt.js의 환경 변수를 동적으로 제어하기 위함이라고 한다...
화면 상에서 동작하는 스크립트를 클라이언트 환경에서만 사용하기 위해 if(process.client)를 사용하는 건 nuxt 문서에선 맞지만... 제대로 운용할 수 있는지에 대해선 좀 더 공부를 한 뒤에 고민해야겠다...
[참고]
