Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2 ssr #12

wants to merge 34 commits into
base: 1-code-splitting

2 ssr #12

wants to merge 34 commits into from


Copy link

SoYoung210 commented Nov 1, 2019


Code Splitting 적용 후 ServerSideRendering을 구현했습니다.
이 프로젝트에는 두 개의 Route가 있습니다.

  • /user : CSR
  • /org : SSR


/org 에서 헤더 영역으로 잡았던 Org: Facebook 페이지 부분을 SSR영역으로 잡았습니다.

server에서 api fetch후 스토어까지 내려주는 것은 세번째 PR에서 진행됩니다.



최초에 헤더 영역이 완벽히 그려진 상태로 렌더 되는 것을 볼 수 있습니다. 이는 네트워크 탭에서 /org(document) 영역의 Response를 보면 <h1>Org: Facebook 페이지</h1><div>Loading</div> 형태가 내려오는 것을 통해 명확히 확인할 수 있습니다.



잘 보이지 않지만 미묘하게 헤더 영역이 깜빡거립니다. 네트워크 탭에서 확인해보면 <div id='root></div> 형태와 같이 빈 div가 내려오는 것을 확인할 수 있습니다.

변경사항 요약

loadable-components를 이용했으며, #1 과 크게 달라진 점은 다음과 같습니다. (다른 기타 변경사항도 많으니 꼭 FileChanged를 보시는 것을 추천드립니다.)

  1. webpack파일을 두 가지로 나누고 webpack.client.js에서는 멀티모듈형태로 사용했습니다.
    webpack.server.js는 단순히 app.tsx 를 트랜스파일하기 위한 파일입니다.
    webpack.client.js에는 nodeRender(SSR)용 설정과 webRender(CSR)용 설정이 있습니다.
    SSR을 수행할 때, Server에서 해석가능한 형태로 웹 프로젝트를 빌드하기 위함입니다.

참고: @loadable/webpack-plugin

  1. hydrate
    ReactDOM.render 를 loadableReady와 hydrate로 변경하였습니다. server에서 렌더된 내용을 client에서 re-render하지 않도록 하기 위함입니다.
@SoYoung210 SoYoung210 changed the base branch from master to 1-code-splitting Nov 1, 2019
@SoYoung210 SoYoung210 force-pushed the 1-code-splitting branch from 56dd3ad to 0e888a4 Nov 2, 2019
@SoYoung210 SoYoung210 force-pushed the 1-code-splitting branch 2 times, most recently from cc022f9 to f0d776a Nov 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

1 participant
You can’t perform that action at this time.