Colin's Blog
SSR을 활용한 사용자 데이터 관리 및 상태 저장 전략

서론

서버 사이드 렌더링(Server Side Rendering, 이하 SSR)은 웹 애플리케이션에서 사용자에게 보여지는 페이지를 서버에서 미리 렌더링하여 전달하는 방식입니다. 이러한 SSR 방식을 활용하면 사용자 데이터의 관리 및 상태 저장 전략에 대해 고려해야 합니다. 이번 블로그 포스트에서는 SSR을 활용한 사용자 데이터 관리 및 상태 저장 전략에 대해 살펴보겠습니다.

SSR과 사용자 데이터 관리

SSR은 애플리케이션의 초기 로딩 시간을 줄이고, 검색 엔진 최적화(SEO)를 향상시킬 수 있는 장점을 가지고 있습니다. 하지만 SSR에서 사용자 데이터의 관리는 몇 가지 고려사항을 필요로 합니다.

쿠키와 세션

SSR에서 사용자의 인증 상태를 유지하기 위해 쿠키와 세션을 활용할 수 있습니다. 서버에서 사용자의 인증 정보를 세션에 저장하고, 쿠키를 통해 세션 ID를 클라이언트에게 전달하여 인증 상태를 유지할 수 있습니다.

// 쿠키 설정 예시
const setUserCookie = (res, sessionId) => {
  res.cookie('sessionId', sessionId, {
    httpOnly: true,
    secure: true,
    maxAge: 604800000, // 7일
  });
};

// 세션 관리 예시
const handleLogin = (req, res) => {
  // 사용자 인증 로직

  // 세션 생성 및 쿠키 설정
  const sessionId = generateSessionId();
  setUserCookie(res, sessionId);

  // 세션에 사용자 정보 저장
  req.session.userId = userId;
};

클라이언트 측 상태 관리

SSR에서는 클라이언트 측에서 사용자 상태를 관리하기 위해 JavaScript 프레임워크(예: React, Vue)의 상태 관리 라이브러리(예: Redux, Vuex)를 사용할 수 있습니다. 이를 활용하여 사용자의 로그인 상태, 애플리케이션 내의 필요한 데이터 등을 관리할 수 있습니다.

// Redux를 사용한 상태 관리 예시
import { createStore } from 'redux';

// 애플리케이션의 초기 상태 정의
const initialState = {
  loggedIn: false,
  userData: null,
};

// 액션 타입 정의
const LOGIN = 'LOGIN';
const LOGOUT = 'LOGOUT';

// 액션 생성 함수 정의
const loginAction = () => ({
  type: LOGIN,
});

const logoutAction = () => ({
  type: LOGOUT,
});

// 리듀서 함수 정의
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGIN:
      return {
        ...state,
        loggedIn: true,
      };
    case LOGOUT:
      return {
        ...state,
        loggedIn: false,
        userData: null,
      };
    default:
      return state;
  }
};

// 스토어 생성
const store = createStore(userReducer);

// 로그인 액션 디스패치
store.dispatch(loginAction());

// 상태 조회
console.log(store.getState());

SSR과 사용자 데이터 상태 저장 전략

SSR에서는 사용자 데이터의 상태를 서버에서 클라이언트로 전달해야 합니다. 이를 위해 다음과 같은 전략을 활용할 수 있습니다.

데이터 프리페칭

SSR은 서버에서 페이지를 렌더링하여 전달하는 방식이므로, 필요한 사용자 데이터를 미리 서버에서 불러오는 데이터 프리페칭 전략을 활용할 수 있습니다. 예를 들어, 사용자가 로그인한 상태인 경우, 사용자 정보를 서버에서 가져와서 렌더링 시에 함께 전달하는 것입니다.

클라이언트에서 초기 데이터 로딩

SSR의 초기 로딩 후, 클라이언트에서 추가적인 데이터를 로딩하는 방식을 사용할 수 있습니다. 이를 활용하여 초기 데이터를 서버에서 렌더링하여 전달하고, 클라이언트에서 이후에 필요한 데이터를 로딩하는 것입니다. 이 방식은 사용자 경험을 향상시키고, 데이터의 동적 로딩을 지원할 수 있습니다.

마무리

SSR을 활용한 사용자 데이터 관리 및 상태 저장은 웹 애플리케이션의 개발 시 고려해야 할 중요한 요소입니다. 쿠키와 세션을 이용한 사용자 인증, 클라이언트 측 상태 관리를 위한 JavaScript 프레임워크와 상태 관리 라이브러리 활용, 그리고 데이터 프리페칭과 클라이언트에서 초기 데이터 로딩 전략 등의 방법을 사용하면 효과적인 사용자 데이터 관리를 구현할 수 있습니다.

© 2018 Colin. All rights reserved.