SSR(Server-Side Rendering)의 장점과 단점

SSR(Server-Side Rendering)은 클라이언트와 서버의 역할을 분담하여 페이지를 렌더링하는 방식입니다. 이 방식은 다음과 같은 장단점이 있습니다. 장점: 초기 로딩 시간이 빠름 SSR은 서버에서 이미 페이지를 렌더링했기 때문에 초기 로딩 시간이 빠릅니다. 이는 사용자가 페이지를 보기 위해 기다리는 시간을 줄여주어 사용자 경험을 향상시킵니다. 검색 엔진 최적화(SEO) SSR은 서버 측에서 페이지를 렌더링하기 때문에 검색 엔진이 페이지의 콘텐츠를 잘 인식할 수 있습니다. 이는 검색 엔진 최적화를 위해 중요한 요소입니다. 보안성이 높음 SSR은 서버에서 페이지를 렌더링하기 때문에 보안성이 높습니다. 클라이언트에서 보안을 처리할 필요가 없기 때문입니다. 코드 유지 보수가 용이함 SSR은 클라이언..

CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)의 차이점은 무엇인가?

CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)은 모두 웹 애플리케이션의 페이지 렌더링 방식을 의미합니다. 하지만 두 방식은 다음과 같은 차이점이 있습니다. 클라이언트와 서버의 역할 분담 CSR은 클라이언트 측에서 동적으로 페이지를 렌더링하는 방식으로, 서버는 필요한 자원을 클라이언트에게 전달하는 역할만 수행합니다. 반면에 SSR은 서버 측에서 동적으로 페이지를 렌더링하고, 클라이언트는 렌더링된 페이지를 전달받아 화면에 표시하는 역할을 수행합니다. 초기 로딩 시간 CSR은 초기 로딩 시간이 느리다는 단점이 있습니다. 이는 클라이언트가 페이지를 렌더링하기 위해 필요한 자원을 모두 다운로드하고 초기화하는 시간이 필요하기 때문입니다. 반면에 SSR은 서버에서 ..

SSR(Server-Side Rendering)이란 무엇인가?

SSR(Server-Side Rendering)은 서버 측에서 동적으로 HTML 페이지를 생성하여 클라이언트에게 전달하는 기술입니다. 이는 클라이언트 측에서 동적으로 페이지를 렌더링하는 CSR(Client-Side Rendering)과는 대조적인 방식으로 작동합니다. SSR은 웹 애플리케이션의 성능을 개선하는 데 도움이 되며, 특히 초기 로딩 시간을 단축하여 사용자 경험을 향상시킵니다. 이는 클라이언트가 페이지를 렌더링하기 위해 필요한 자원을 다운로드하고 초기화하는 데 필요한 시간을 줄여줍니다. 또한 SSR은 SEO(Search Engine Optimization) 측면에서도 이점을 제공합니다. 검색 엔진은 페이지의 콘텐츠를 읽어들이기 위해 HTML 코드를 스캔하는데, CSR에서는 초기 페이지 로딩 시점..

vue sass global import - Sass 사용시 중복으로 import 안하도록 하는 방법

흔히 scss 작성시 다음과 같이 import 하여 사용한다. @import "./variables.scss"; * { margin: 0; padding: 0; color: $primary-color // variables.scss내에 선언된 변수 } 한두번은 괜찮지만 컴포넌트가 10개...100개...1000개 라면? 코드 한줄 한줄 줄이는건 우리에겐 소중하니까... 다음과 같이 설정해주자 // vue.config.js module.exports = { css: { loaderOptions: { sass: { prependData: ` @import "@/style/variables.scss"; `, }, }, }, }; 이제 다른 컴포넌트에서 자유롭게 사용하자 // exampleComponent.js..