서버 사이드 렌더링의 동적 HTML webpack bundle.js 이름을 초기 HTML 렌더링 반응 요소에 주입하는 방법은 무엇입니까?

전적으로 클라이언트 측 렌더링 된 React-Redux 프로젝트를 서버 측 렌더링을 포함하도록 변형 중입니다. reduxJS 매뉴얼 (http://redux.js.org/docs/recipes/ServerRendering.html)는 클라이언트 측에 렌더링 할 템플릿으로 초기 성분 HTML 초기 상태를 분사 일반적인 보일러 함수에 따라 은 다음과 같다 :서버 사이드 렌더링의 동적 HTML webpack bundle.js 이름을 초기 HTML 렌더링 반응 요소에 주입하는 방법은 무엇입니까?

function renderFullPage(html, preloadedState) { 
    return ` 
    <!doctype html> 
    <html> 
     <head> 
     <title>Redux Universal Example</title> 
     </head> 
     <body> 
     <div id="root">${html}</div> 
     <script> 
      // WARNING: See the following for security issues around embedding JSON in HTML: 
      // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations 
      window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')} 
     </script> 
     <script src="/static/bundle.js"></script> 
     </body> 
    </html> 
    ` 
}

을 따라서 명백하게 끝에 함수 script-tag에는 클라이언트 측 응용 프로그램 용 bundle.js 파일이 포함됩니다.

/bundle.32528d8bc783fafd2585.js 
/vendor.29ce638d0bba925f3e21.js 
/vendor2.da60e4a86c0ac5f28a03.js

어떻게 것 : 내 웹팩은 단순히 하나의 bundle.js을 만들 수 있지만하지 않는 경우 오히려 동적 파일처럼 CommonsChunkPlugin를 통해 이름과 함께 번들 파일 세트를 출력 무엇 : 여기

내 질문에 온다 나는 <script src="/static/bundle.js"></script> 태그를 대체하는 위의 파일을 renderFullPage() 함수에 "동적으로 삽입"합니까?

HtmlWebpackPlugin 템플릿을 사용하면 여기에 옵션이없는 것 같습니다.

출처

2017-10-05 uess

글쎄, 당연히 순수 클라이언트 측 React App을 SSR React App으로 전송하는 것이 당연하다고 생각했던 것처럼 간단하지는 않습니다. 고려해야 할 사항이 많으며 Server Side Rendering에 대한 개요를 제공하는 자습서를 찾기가 어려웠습니다. 그러나 지금 내가 추천 할 수있는 UDEMY에 하나 있습니다.

https://www.udemy.com/server-side-rendering-with-react-and-redux

출처

2017-10-20 17:23:40 uess

이 패키지를 사용해야합니다 : https://github.com/thejameskyle/react-loadable 예를 들어 스피너를 사용하여 가장 작은 것을 html로 가져오고 마지막으로로드 할 수있는 다운로드가 완료되면 마지막으로 구성 요소를 변경하십시오.

출처

2017-10-05 14:57:29 Ortee

감사합니다, Ortee 답장을 보내 : 내가 SSR의 초보자를위한 지금까지 발견 한 가장 (또는 유일한) 포괄적 인 하나입니다! React-Loadable은 컴포넌트 기반 코드 분할을 수행하는 데는 좋지만 내 프로젝트의 경우에는 완전히 다시 프로그래밍해야합니다. 그러나 여러 번들 파일은 공급 업체 라이브러리를 분할 한 결과 일뿐입니다. 그래서 저는이 시점에서 컴포넌트 기반 코드 분할로 전환 할 필요가없는보다 쉬운 솔루션을 기대했습니다. – uess

서버 사이드 렌더링의 동적 HTML webpack bundle.js 이름을 초기 HTML 렌더링 반응 요소에 주입하는 방법은 무엇입니까?

답변

관련 문제