강력한 Angular SSR! Angular 서버 사이드 렌더링 알아보기

목차

1. 서버 사이드 렌더링이란?
2. 서버 사이드 렌더링의 장점과 단점
3. 앵귤러에서의 서버 사이드 렌더링 구현 방법
4. NG Universal과 Express Engine 설치하기
5. 앵귤러 애플리케이션에서의 서버 사이드 렌더링 설정
6. 애플리케이션 코드 수정하기
7. 클라이언트와 서버에서의 코드 분리하기
8. 클라이언트 측에서의 상태 재사용하기
9. 서버 사이드 렌더링의 한계
10. 리액트와의 비교 - 장단점

앵귤러에서의 서버 사이드 렌더링 구현 방법

서버 사이드 렌더링이란?

서버 사이드 렌더링은 애플리케이션의 렌더링을 서버에서 처리하는 방식입니다. 일반적인 클라이언트 사이드 렌더링과 달리, 서버 사이드 렌더링은 애플리케이션의 초기 상태를 서버에서 미리 렌더링하여 클라이언트에게 전달합니다. 이는 초기 로딩 속도를 향상시키고, 검색 엔진 최적화(SEO)를 위해 필요한 컨텐츠를 제공하는 데 도움이 됩니다.

서버 사이드 렌더링의 장점

서버 사이드 렌더링은 다음과 같은 장점을 가지고 있습니다:

1. 초기 로딩 속도 개선: 서버에서 미리 렌더링하여 클라이언트에게 전달하기 때문에 초기 로딩 속도가 개선됩니다.
2. 검색 엔진 최적화(SEO): 서버에서 렌더링된 컨텐츠를 검색 엔진이 인식할 수 있기 때문에 SEO에 유리합니다.
3. 사용자 경험 개선: 페이지가 완전히 로드되기 전에도 사용자에게 컨텐츠를 보여줄 수 있어서 사용자 경험을 개선할 수 있습니다.

서버 사이드 렌더링의 단점

서버 사이드 렌더링은 다음과 같은 단점을 가지고 있습니다:

1. 복잡성: 클라이언트 사이드 렌더링보다 구현이 복잡하고 어려울 수 있습니다.
2. 서버 부하: 서버에서 모든 렌더링 작업을 처리하기 때문에 서버의 부하가 증가할 수 있습니다.
3. 캐싱과 데이터 싱크: 렌더링된 내용을 캐싱하고 데이터 싱크를 관리해야 하는 추가 작업이 필요합니다.

이제 앵귤러에서의 서버 사이드 렌더링 구현 방법에 대해 알아보겠습니다.

NG Universal과 Express Engine 설치하기

서버 사이드 렌더링을 구현하기 위해 NG Universal과 Express Engine 패키지를 설치해야 합니다. 다음 명령어를 사용하여 패키지를 설치할 수 있습니다.

NG add NG Universal/Express Engine

이 명령어는 package.json에 필요한 패키지를 추가하고, 서버 사이드 렌더링에 필요한 추가 파일을 생성합니다. 패키지 설치 중에 앵귤러 버전이 잘못 인식되어 패키지 설치 도중 오류가 발생할 수 있습니다. 이 경우에는 명령어 끝에 앵귤러 버전을 명시하여 다시 설치해야 합니다. 예를 들면 다음과 같습니다.

NG add NG Universal/Express Engine@버전

패키지 설치가 완료되면 package.json 파일에 NG Universal 패키지가 추가되고, 상단에 서버 사이드 렌더링을 위한 네 가지 명령어가 표시됩니다: serve, build, prerender, dev SRR 입니다.

앵귤러 애플리케이션에서의 서버 사이드 렌더링 설정

패키지 설치가 완료되면 프로젝트의 소스 폴더 안에 main.ts 대신 main.server.ts 파일이 생성됩니다. main.server.ts 파일은 main.ts와 비슷하지만, @NgModule 어노테이션 대신 @NgModuleFactory 어노테이션을 사용하는 새로운 앱 모듈을 가지고 있습니다.

또한, app.module.ts 대신 app.server.module.ts 파일을 사용하며, 여기에서는 app.module에서 사용한 것과 동일한 모듈을 import합니다. 이 모듈은 angular platform server에서 제공하는 서버 모듈입니다.

마지막으로, 라우팅에서는 server.ts 파일을 사용하여 Angular Express 서버를 시작합니다. server.ts 파일은 해당하는 Angular Express 엔진 서버를 시작하는 중요한 파일입니다.

애플리케이션 코드 수정하기

서버 사이드 렌더링을 구현하기 위해 애플리케이션 코드에 몇 가지 수정이 필요합니다. 예를 들어, 로컬 스토리지와 관련된 코드는 서버에서는 사용할 수 없기 때문에 서버와 클라이언트 간에 코드를 분리해야 합니다.

이를 위해 platformId를 주입하여 클라이언트와 서버에서 다른 코드를 실행할 수 있도록 만들 수 있습니다. 서버 렌더링에서는 특정 코드 블록을 실행하고, 클라이언트에서는 다른 코드 블록을 실행하도록 분기할 수 있습니다. 예를 들어, 로컬 스토리지를 사용하는 코드는 클라이언트에서만 실행되어야 합니다.

또한, 서버에서 클라이언트로 상태를 전달하는 방법도 알아보겠습니다. 서버에서 렌더링된 데이터를 클라이언트에게 전달하여 네트워크 요청을 줄일 수 있습니다. 이를 위해 전송 상태(transfer state)를 사용하여 서버 측에서 상태를 저장하고, 클라이언트 측에서 이를 재사용할 수 있습니다.

클라이언트와 서버에서의 코드 분리하기

서버와 클라이언트 간에 코드를 분리하여 서로 다른 환경에서 동작하도록 할 수 있습니다. 예를 들어, 브라우저 환경에서는 로컬 스토리지와 관련된 코드를 실행할 수 있지만, 서버 환경에서는 실행할 수 없습니다.

이를 위해 platformId를 사용하여 코드 블록을 조건부로 실행하고, 서버와 클라이언트 간에 코드를 분기시킬 수 있습니다. 예를 들어, 클라이언트에서는 로컬 스토리지를 사용하고, 서버에서는 실행하지 않도록 조건을 지정할 수 있습니다.

클라이언트 측에서의 상태 재사용하기

서버 사이드 렌더링을 통해 렌더링된 데이터를 클라이언트에서 재사용할 수 있습니다. 예를 들어, 서버에서 렌더링된 사용자 목록을 클라이언트로 전달한 후에는 다시 네트워크 요청을 보내지 않고 이를 재사용할 수 있습니다.

클라이언트 측에서는 transfer state를 사용하여 서버 상태를 가져올 수 있습니다. 이를 사용하여 이미 렌더링된 데이터를 클라이언트에서 사용할 수 있으며, 서버에 대한 추가 요청이 필요하지 않습니다.

서버 사이드 렌더링의 한계

서버 사이드 렌더링은 다음과 같은 한계가 있습니다:

1. 복잡성: 서버 사이드 렌더링은 클라이언트 사이드 렌더링보다 구현이 복잡하고 어려울 수 있습니다.
2. 서버 부하: 서버에서 렌더링 작업을 처리하는 것이기 때문에 서버의 부하가 증가할 수 있습니다.
3. 캐싱과 데이터 싱크: 렌더링된 내용을 캐싱하고 데이터 싱크를 관리하는 추가 작업이 필요할 수 있습니다.

리액트와의 비교 - 장단점

리액트와 앵귤러의 서버 사이드 렌더링은 각각 장단점이 있습니다. 리액트의 경우, renderToString 메서드를 통해 간단하게 서버 사이드 렌더링을 할 수 있으며, 리액트 생태계에서는 Next.js와 같은 프레임워크를 사용하여 보다 쉽게 구현할 수 있습니다. 반면, 앵귤러의 서버 사이드 렌더링은 구현이 복잡하며, 많은 내부 작업이 필요합니다. 앵귤러는 복잡한 애플리케이션에 적합하며, 더 많은 기능과 유연성을 제공합니다.

하이라이트

• 서버 사이드 렌더링은 앵귤러 애플리케이션의 초기 로딩 속도와 SEO를 개선할 수 있는 방법입니다.
• 앵귤러에서 서버 사이드 렌더링을 구현하기 위해서는 NG Universal과 Express Engine 패키지를 설치해야 합니다.
• 서버 사이드 렌더링을 위해 애플리케이션 코드에 수정이 필요하며, 서버와 클라이언트 간에 코드를 분리하여 동작하도록 할 수 있습니다.
• 서버에서 렌더링된 상태를 클라이언트로 전달하기 위해 전송 상태(transfer state)를 활용할 수 있습니다.
• 서버 사이드 렌더링은 구현이 복잡하고 서버 부하가 증가할 수 있으며, 데이터 캐싱과 싱크에 대한 추가 작업이 필요합니다.

자주 묻는 질문 (FAQ)

Q: 서버 사이드 렌더링을 사용하면 모든 앵귤러 애플리케이션에서 적용할 수 있나요? A: 서버 사이드 렌더링은 일부 복잡한 애플리케이션에서만 적용할 수 있습니다. 단일 페이지 애플리케이션보다는 다중 페이지 애플리케이션에서 더 유용합니다.

Q: 서버 사이드 렌더링을 사용하면 초기 로딩 속도가 개선될까요? A: 예, 서버 사이드 렌더링을 사용하면 초기 로딩 속도가 개선될 수 있습니다. 서버에서 렌더링된 마크업을 전달하기 때문에 사용자는 빠르게 컨텐츠를 볼 수 있습니다.

Q: 서버 사이드 렌더링을 사용하면 SEO가 개선될까요? A: 예, 서버 사이드 렌더링을 사용하면 검색 엔진이 애플리케이션 컨텐츠를 인덱싱할 수 있기 때문에 SEO가 개선될 수 있습니다.

Q: 서버 사이드 렌더링을 구현하기 위해 NG Universal과 Express Engine 외에 다른 옵션이 있을까요? A: 일부 개발자들은 Angular Universal 대신 Next.js와 같은 프레임워크를 사용하여 서버 사이드 렌더링을 구현하기도 합니다.

Q: 서버 사이드 렌더링을 사용하면 어떤 장단점이 있나요? A: 서버 사이드 렌더링은 초기 로딩 속도와 SEO를 개선할 수 있지만, 구현이 복잡하고 서버 부하가 증가할 수 있으며, 데이터 캐싱과 싱크에 대한 추가 작업이 필요합니다.