Server Side Rendering 레시피 3가지

leejh3224·2018년 12월 13일
7
post-thumbnail

서버 사이드 렌더링을 직접 구성하는 일은 너무 까다습니다. 특히 최근에 웹팩이 버전 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
  1. READMEGetting Started에 따라 각 패키지 실행

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

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

profile
다양한 것들을 시도합니다

3개의 댓글

comment-user-thumbnail
2018년 12월 13일

코드스플리팅과 데이터 로딩 적용한 프로젝트입니다:
https://github.com/vlpt-playground/react-ssr-sample

시간이 없어서 따로 포스트 작성은 못하고있네요 :(

나중에 코드스플리팅도 적용하게 되실때 혹시 참고할게 있으면 확인해보세용~

1개의 답글
comment-user-thumbnail
2018년 12월 17일

오 감사합니다!

답글 달기