1. 서론

동적인 웹 애플리케이션 개발이 일반화됨에 따라, 개발자들은 사용자 경험을 극대화하기 위해 다양한 렌더링 기법을 활용하고 있습니다. 그 중 가장 대표적인 방법이 바로 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)입니다. 본 글에서는 이 두 가지 렌더링 방식의 개념과 차이점을 상세히 설명한 후, 각각의 구현 방법을 Nest.js와 Next.js를 사용하여 살펴보겠습니다.

2. 서버 사이드 렌더링(SSR) 개념

서버 사이드 렌더링(SSR)은 웹 애플리케이션의 모든 콘텐츠가 서버에서 렌더링되어 클라이언트(브라우저)로 전송되는 방식을 말합니다. 사용자가 페이지를 요청하면, 서버는 해당 페이지의 HTML을 생성하여 클라이언트에게 제공합니다. 이러한 접근 방식은 초기 로딩 시 사용자에게 빠르게 콘텐츠를 보여줄 수 있는 장점이 있습니다.

SSR의 주요 이점은 다음과 같습니다:

• SEO 친화적: 검색 엔진 크롤러가 HTML 콘텐츠를 쉽게 인식할 수 있어 SEO에 유리합니다.
• 빠른 초기 로딩 시간: 사용자에게 빠르게 페이지를 제공할 수 있어 사용자 경험을 개선합니다.
• 소셜 미디어 공유: 사전 렌더링된 콘텐츠를 소셜 미디어 플랫폼에서 미리 보여줄 수 있습니다.

3. 클라이언트 사이드 렌더링(CSR) 개념

클라이언트 사이드 렌더링(CSR)은 웹 애플리케이션의 콘텐츠가 사용자의 브라우저에서 렌더링되는 방식을 의미합니다. 사용자가 페이지를 요청하면, 서버는 빈 HTML 파일과 필요한 JavaScript 파일을 제공하고, 브라우저는 JavaScript를 실행하여 실제 콘텐츠를 생성합니다.

CSR의 주요 이점은 다음과 같습니다:

• 상호작용 향상: 동적인 데이터 업데이트 및 사용자와의 상호작용이 매끄럽게 처리됩니다.
• 부분 업데이트 가능: 페이지의 일부분만을 업데이트할 수 있어 재렌더링이 덜 발생합니다.
• 서버 부하 감소: 클라이언트 측에서 렌더링이 이루어지므로 서버의 부담이 줄어듭니다.

4. SSR과 CSR의 차이점

SSR과 CSR은 각각 고유한 장단점을 가지고 있으며, 사용자의 요구에 따라 적합한 렌더링 방식을 선택해야 합니다. 두 렌더링 방식의 주요 차이점은 다음과 같습니다.

5. Nest.js를 활용한 SSR 구현

Nest.js는 프로그레시브 Node.js 프레임워크로, 서버 사이드 애플리케이션 개발에 적합합니다. SSR을 구현하기 위해 Nest.js와 동일하게 Angular 기반의 플랫폼을 통합할 수 있습니다. 다음은 Nest.js에서 SSR을 구현하기 위한 기본적인 단계입니다.

5.1 프로젝트 설정

Nest.js 프로젝트를 생성하고 Angular Universal을 설치합니다. Angular Universal은 Angular 애플리케이션을 서버 사이드에서 렌더링할 수 있도록 도와주는 라이브러리입니다.

nest new my-ssr-app

cd my-ssr-app

npm install @nestjs/platform-express @nestjs/core angular-universal

5.2 기본 모듈 생성

Angular 애플리케이션을 설정한 후, Nest.js 모듈을 생성하여 Angular의 SSR을 사용할 수 있도록 연결합니다. 아래는 기본 모듈 설정 예입니다.

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { AngularUniversalModule } from 'angular-universal';

@Module({
    imports: [AngularUniversalModule.forRoot({
        viewsPath: join(process.cwd(), 'dist/server/views'),
    })],
    controllers: [AppController],
    providers: [AppService],
})
export class AppModule {}
            

5.3 서버 설정

서버를 설정하여 Angular 애플리케이션이 SSR을 통해 렌더링하도록 구성합니다. 아래와 같이 서버 파일을 수정합니다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    await app.listen(3000);
}
bootstrap();
            

5.4 테스트 실행

Nest.js 애플리케이션을 실행하여 서버 사이드 렌더링을 테스트합니다. 브라우저에서 http://localhost:3000을 열어 결과를 확인합니다.

npm run start

6. Next.js를 활용한 SSR 구현

Next.js는 React 애플리케이션에서 SSR을 쉽게 구현할 수 있는 매우 인기 있는 프레임워크입니다. 이 부분에서는 Next.js를 사용하여 SSR을 구현하는 방법에 대해 살펴보겠습니다.

6.1 프로젝트 설정

Next.js 애플리케이션을 생성하고 필요한 패키지를 설치합니다.

npx create-next-app my-next-app

cd my-next-app

6.2 페이지 생성

Next.js에서는 각 페이지가 기본적으로 SSR을 지원합니다. 아래는 간단한 페이지 만들기 예시입니다.

import React from 'react';

const HomePage = () => {
    return 
Hello, Server Side Rendering!
;
};

export async function getServerSideProps() {
    // 여기서 서버 사이드에서 데이터 fetching을 할 수 있습니다.
    return {
        props: {}, // 페이지에 필요한 props
    };
}

export default HomePage;
            

6.3 테스트 실행

Next.js 애플리케이션을 실행하여 SSR을 테스트합니다. 브라우저에서 http://localhost:3000을 열어 결과를 확인합니다.

npm run dev

7. 결론

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)은 각기 다른 그들의 장단점을 가지고 있습니다. SSR은 초기 로딩 속도와 SEO에 유리한 반면, CSR은 사용자 인터랙션과 동적인 데이터 관리에서 강력한 성능을 발휘합니다. Nest.js와 Next.js는 각각의 요구 사항에 맞춰 SSR과 CSR을 쉽게 구현할 수 있도록 도와주는 훌륭한 도구입니다. 최적의 선택은 프로젝트의 요건, 사용자 경험 및 SEO 전략에 따라 달라질 수 있습니다.