Redux Thunk를 활용한 서버 사이드 렌더링 구현 방법

18 Oct 2023

redux

서버 사이드 렌더링(Server Side Rendering, SSR)은 웹 애플리케이션에서 초기 렌더링을 서버에서 처리하여 사용자에게 보다 빠른 컨텐츠 전달을 가능하게 하는 기술입니다. Redux Thunk는 Redux 미들웨어로, 비동기 액션을 처리하기 위해 사용됩니다. 이번 포스트에서는 Redux Thunk를 활용하여 서버 사이드 렌더링을 구현하는 방법에 대해 알아보겠습니다.

1. Redux Thunk 소개

Redux Thunk는 Redux 애플리케이션에서 비동기 액션을 처리하기 위한 미들웨어입니다. Redux Thunk를 사용하면 액션 생성자 함수에서 일반 객체뿐만 아니라 함수도 반환할 수 있습니다. 이렇게 반환된 함수는 Redux 스토어에서 디스패치 될 때 실행되어 비동기 작업을 수행할 수 있습니다.

2. 서버 사이드 렌더링과 Redux Thunk

서버 사이드 렌더링은 웹 애플리케이션의 초기 렌더링을 서버에서 처리하여 사용자에게 보다 빠른 컨텐츠 전달을 가능하게 합니다. Redux Thunk를 사용하면 서버에서 초기 렌더링을 수행할 때 필요한 비동기 데이터를 미리 불러와서 애플리케이션 상태에 설정할 수 있습니다.

서버 사이드 렌더링을 구현하기 위해 Redux Thunk를 사용하는 방법은 다음과 같습니다:

서버 사이드 애플리케이션에서 렌더링을 수행할 URL을 처리하는 핸들러를 작성합니다.
해당 핸들러에서 Redux 스토어를 설정하고 초기 상태를 설정합니다.
초기 상태를 생성하기 위해 Redux 액션 생성자 함수를 사용하여 데이터를 비동기로 불러옵니다. 이때 Redux Thunk를 사용하여 비동기 작업을 처리합니다.
비동기 작업이 완료되면 애플리케이션 상태를 갱신합니다.
렌더링 결과를 클라이언트로 전송합니다.

이와 같이 Redux Thunk를 사용하여 서버 사이드 렌더링을 구현하면 초기 로딩 속도를 향상시키고 사용자 경험을 개선할 수 있습니다.

3. 예시 코드

다음은 Redux Thunk를 사용하여 서버 사이드 렌더링을 구현하는 예시 코드입니다. 이 예시 코드는 React와 Redux를 기반으로 작성되었습니다.

// 액션 타입 정의
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';

// 액션 생성자 함수
const fetchDataSuccess = (data) => ({
  type: FETCH_DATA_SUCCESS,
  payload: data
});

// 비동기 액션 생성자 함수
const fetchData = () => {
  return (dispatch) => {
    return fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch(fetchDataSuccess(data)));
  };
};

// 초기 상태 설정
const initialState = {
  data: []
};

// 리듀서 함수
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA_SUCCESS:
      return {
        ...state,
        data: action.payload
      };
    default:
      return state;
  }
};

// Redux 스토어 설정
const store = createStore(reducer, applyMiddleware(thunk));

// 서버에서 초기 상태 설정 및 데이터 불러오기
app.get('/', (req, res) => {
  store.dispatch(fetchData())
    .then(() => {
      const initialState = JSON.stringify(store.getState());
      const html = renderToString(
        <Provider store={store}>
          <App />
        </Provider>
      );
      res.render('index', { html, initialState });
    });
});

위의 예시 코드에서는 fetchData 액션 생성자 함수를 사용하여 데이터를 비동기로 불러옵니다. Redux Thunk를 사용하여 비동기 작업을 처리하고, 비동기 작업이 완료되면 FETCH_DATA_SUCCESS 액션을 디스패치하여 애플리케이션 상태를 갱신합니다. 서버에서는 초기 상태와 데이터를 불러와서 렌더링 결과를 클라이언트로 전송합니다.

서버 사이드 렌더링을 구현하기 위해 Redux Thunk를 적용하는 방법에 대해 알아보았습니다. Redux Thunk를 사용하면 비동기 액션 처리를 간편하게 할 수 있고, 초기 렌더링 시 필요한 데이터를 미리 불러와서 사용자 경험을 개선할 수 있습니다. 자세한 내용은 Redux Thunk 공식 문서를 참고하시기 바랍니다.

References:

Redux Thunk 공식 문서: https://github.com/reduxjs/redux-thunk

#redux #redux-thunk