1) 사이드 렌더링이란

웹 개발 맥락에서 렌더링은 HTML, CSS 및 JavaScript와 같은 최종 출력을 생성하여 사용자의 웹 브라우저 또는 클라이언트 장치에 표시하는 프로세스를 말합니다. 여기에는 원시 데이터와 템플릿을 브라우저에서 해석하고 렌더링할 수 있는 시각적 표현으로 변환하는 작업이 포함됩니다.

웹에서의 렌더링은 일반적으로 서버 측 렌더링(SSR)과 클라이언트 측 렌더링(CSR)의 두 단계로 이루어집니다.

1. 서버 측 렌더링(SSR)

서버측 렌더링은 HTML 마크업을 생성하고 클라이언트에 보내기 전에 서버에서 초기 페이지 콘텐츠를 렌더링하는 프로세스를 말합니다. SSR에서 서버는 서버 측 프로그래밍 언어 및 프레임워크를 사용하여 초기 콘텐츠를 포함하여 완전한 HTML 문서를 동적으로 생성합니다. 이 접근 방식을 통해 서버는 완전히 렌더링된 HTML 응답을 클라이언트에 보낼 수 있으며, 이는 브라우저에 즉시 표시될 수 있습니다. SSR은 초기 페이지 렌더링에 필요한 시간을 줄여 성능을 향상시키고 검색 엔진 크롤러가 미리 렌더링된 HTML을 쉽게 인덱싱할 수 있으므로 검색 엔진 최적화(SEO)를 개선할 수 있습니다.

2. 클라이언트측 렌더링(CSR)

반면에 클라이언트 측 렌더링에는 JavaScript를 사용하여 클라이언트 장치에서 웹 페이지 콘텐츠를 렌더링하는 작업이 포함됩니다. CSR에서 서버는 필요한 CSS 및 JavaScript 파일과 함께 최소한의 HTML 구조를 클라이언트에 보냅니다. 그런 다음 브라우저는 API 또는 서버에서 데이터를 가져오고 클라이언트 측에서 동적으로 콘텐츠를 렌더링하는 JavaScript 코드를 실행합니다. 이 접근 방식은 클라이언트가 전체 페이지를 다시 로드하지 않고도 콘텐츠를 업데이트하고 수정할 수 있으므로 보다 상호 작용적이고 동적인 사용자 경험을 제공합니다. 그러나 CSR은 클라이언트 측 JavaScript를 로드하고 실행하는 데 추가 시간이 필요하므로 초기 페이지 로드 속도가 느려질 수 있습니다.

서버 측 렌더링과 클라이언트 측 렌더링에는 모두 장점과 고려 사항이 있습니다. SSR과 CSR 사이의 선택은 애플리케이션의 복잡성, 성능 요구 사항, SEO 고려 사항 및 상호 작용 요구 사항과 같은 요소에 따라 달라집니다. 일부 애플리케이션은 사용자 경험을 최적화하기 위해 SSR 및 CSR 기술을 결합하는 하이브리드 접근 방식을 활용할 수도 있습니다.

Next.js 및 Nuxt.js와 같은 웹 기술 및 프레임워크의 발전이 서버 측 렌더링을 용이하게 하는 솔루션을 제공하고 개발자가 특정 사용 사례에 가장 적합한 렌더링 전략을 선택할 수 있도록 한다는 점은 주목할 가치가 있습니다.