서버 사이드 렌더링을 직접 구성하는 일은 너무 까다습니다. 특히 최근에 웹팩이 버전 4로 업그레이드 되면서 설정 관련해서 많은 부분이 바뀌어서 참조할만한 코드도 줄어들었습니다.

그래도 얼마간의 삽질(?) 끝에 웹팩 4 및 여러가지 스택과 함께 사용할 수 있는 보일러플레이트(boilerplate) 코드를 구상할 수 있었습니다.

코드는 링크를 참조하시면 됩니다. 레포지토리에는 평소에 써보고 싶었던 Yarn workspaces로 구성했고, packages 폴더 아래에는 스택에 따라 구분된 패키지가 들어 있습니다.

구성은

  • common: 패키지에 공통적으로 사용하는 서버의 에러 핸들러와 웹팩 설정이 들어있음.
  • hello-ssr: 가장 단순한 형태, React만으로 구성됨.
  • router-redux-ssr: 라우팅을 위한 React Router, 상태 관리를 위한 redux, redux-thunk와 스타일링을 위한 styled-components를 연동한 형태.
  • sassy-ssr: hello-ssr 패키지에 scss/sasscss-module을 추가한 형태.

와 같습니다.

직접 실행시켜보시고 싶은 분들은

  1. 레포지토리 클론

    git clone https://github.com/leejh3224/Do-Server-Side-Rendering.git ssr && cd ssr
  2. READMEGetting Started에 따라 각 패키지 실행

의 순서로 따라가시면 됩니다.

더 나은 웹팩 설정이나 코드 제안 등은 이슈, pull 리퀘스트 혹은 댓글을 통해 남겨주세요! 😀