Server Side Rendering 레시피 3가지

서버 사이드 렌더링을 직접 구성하는 일은 너무 까다습니다. 특히 최근에 웹팩이 버전 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/sass 및 css-module을 추가한 형태.

와 같습니다.

직접 실행시켜보시고 싶은 분들은
1. 레포지토리 클론

git clone https://github.com/leejh3224/Do-Server-Side-Rendering.git ssr && cd ssr

2. README의 Getting Started에 따라 각 패키지 실행

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

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