Webpack을 사용한 동형 렌더링

생각한 연습으로, Isomorphic React를 사용하여 블로깅 응용 프로그램을 만들려고했습니다.Webpack을 사용한 동형 렌더링

중간 : 현대 동형 스택 :
https://medium.com/@MoBinni/a-modern-isomorphic-stack-6609c7c9d057

blog.lunarlogic.org : 일부 구글 나는이 세 가지 튜토리얼 건너 한 검색 한 후 보편적 인 Reactjs 응용 프로그램
http://blog.lunarlogic.io/2015/how-to-create-a-universal-reactjs-application-with-bare-reactjs/

을 만드는 방법

특히 혼란스러워하는 부분은 서버 측에서 html-webpack-plugin이 어떻게 작동하는지에 있습니다. 내가 웹팩을 통해이 템플릿을 실행하려고하면

<html> 
<head> 
... 
</head> 
<body> 
... 
<%- reactOutput %> 
</body> 
</html>

그러나, 나는 reactOutput이 정의되지 않은 오류가 있음을 얻을 :이 자습서의

모두 같은 모양 템플릿을 가지고있다.

순수한 클라이언트 측 응용 프로그램에서 index.html 파일을 생성하여 클라이언트에 제공하려면 html-webpack-plugin을 사용합니다. 이 세대는 개발자와 생산을 위해 webpack에서 다른 설정을 가지고 있기 때문에 더 쉽게 만들 수 있습니다. (일반 덩어리와 그 모든 것)

서버 측 렌더링과 관련하여 생각할 필요가 있습니까? 아니면이 모든 잘못에 대해 내가 갈 건가요?

출처

2017-05-13 mikeyGlitz

템플릿을 미리 생성하는 것을 제외하고는 숫자가 html-webpack-plugin 인 것으로 생각하지 않습니다. 템플릿 콘텐츠가 있으면 reactOutput 값과 함께 렌더러에 제공합니다.

당신은 a call like shown here in line 42 to grab the rendered content합니다

var reactOutput = ReactDOMServer.renderToString(<RoutingContext {...renderProps} />);

그런 다음 당신은 템플릿과 함께이 VAR을 제공한다. In the tutorial they use ejs for templating 당신이 당신의 자신에 연결할 수 있지만 :

res.render('index', { 
    reactOutput: reactOutput) 
});

출처

2017-05-13 20:43:06 Ivo

난 당신이'res.render'를 사용하여 서버에서 제공됩니다 템플릿으로 HTML-웹팩-plugin''의 출력을 사용하여 무슨 말을하는지 얻거나 'res.send'하지만,'<% - reactOutput %>'에서 얻지 못한 에러는 어떻게 정의 할 수 있습니까? 문자열로 전체 파일을 읽은 다음 템플릿 코드를 바꿀 수있는 방법이 있다고 생각합니다.하지만 어떻게 작동합니까? – mikeyGlitz

바로 이것이 서버 측 렌더링이 작동하는 방식입니다. ReactDOMServer를 사용하면 응용 프로그램을 메모리에 렌더링 한 다음 클라이언트에 다시 제공 할 수 있습니다. "템플릿의 문자열을 메모리에 저장하려면 어떻게해야합니까?" 링크 된 튜토리얼은 템플리트 작성을 위해'ejs'를 사용하는 방법을 보여줍니다. 이것은 여러분이 가지고있는 템플릿 설정에 더 가깝습니다 : http://bitdrift.com/post/2376383378/using-mustache-templates-in-express – Ivo

'fs.readFileSync'를 사용하여 템플릿과 문자열을 읽었습니다. 바꾸기 '를 클릭하여 서버 측 반응을 템플릿에 삽입합니다. 아마도 최선의 방법은 아니지만 작동하는 것처럼 보였습니다. – mikeyGlitz

답변

관련 문제