서버 렌더링 시 주의해야 할 점

* 주의: 생각나는 대로 추가하고 있습니다.

1. 디자인 관점이 변경되어야 합니다.

한국에서 웹 디자인은 화면 크기를 기준을 pixel 단위로 작업이 되고 있는데요. 서버 렌더링 시에 agent 정보를 알 수는 있어도 화면 크기를 알 수 있는 방법이 없습니다. 디자인이 화면 크기에 따라서 높이가 조정된다면 서버 렌더링과 실제 화면 로딩 후에 텍스트나 이미지 요소들이 이동하는 현상이 발생하게 됩니다.

예를 들어 한 줄인 경우에는 좌측 원형 이미지를 중앙에 배치하고 두 줄 이상인 경우에는 상단에 배치하는 디자인이라면 화면 크기를 알 수 없기 때문에 적용하는 스타일을 초기 상태의 가정을 통해서 정해야 하는데요. 그런 경우 화면 크기 조절에 따라서 이미지 위치가 움찔하고 바뀌게 됩니다.

case1

2. 모든 작업은 두 번 해야 합니다.

서버 렌더링을 하는 경우에는 작업을 두 번 하는 것으로 일정이 계산되어야 합니다.

예를 들어 아래 그림처럼 사용자가 로그인 한 후, 메인 페이지를 지나서 설정 페이지로 이동한 경우를 가정해 보면 현재 페이지의 모델에는 로그인한 사용자와 친구 정보와 알림 정보 메인 페이지의 데이타와 설정 페이지 데이타가 있을건데요.

case2-1

설정페이지에서 페이지를 새로고침 한 경우 이 페이지를 서버렌더링 하기 위해서는 로그인 사용자 정보, 친구 목록, 알림 정보등을 현재 페이지의 데이타와 함께 내려주는 작업이 추가가 되어야 합니다. 진입하는 경로가 두 가지로 항상 나눠서 생각해야 됩니다.

case2-2

게다가 로그인 여부에 따라서 보여주는 페이지가 달라지는 경우 (비로그인 시에도 API 호출하는 경우가 있다면) 경우의 수가 더 많아질 수 있습니다. 브라우저의 로컬 스토리지 등을 사용하면 물론 해결할 수 있는 내용입니다만 여기에 드는 작업 공수도 더 고려를 하셔야 됩니다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중