app.get('/',function(req, res, next){
let preloadState = {
text : 'Server-Side Rendering'
};
let renderProps = {
preloadState: `window.__PRELOADED_STATE__ =${JSON.stringify(preloadState).replace(/</g, '\\u003c')}`,
script: 'http://localhost:3000/build/client.bundle.js',
appComponent: ReactDOMServer.renderToString(<App data={preloadState}/>)
};
const html = ReactDOMServer.renderToStaticMarkup(<Html {...renderProps}/>); // server-side Rendering
res.send(`<!doctype html>${html}`);
});
let preloadState = {
text : 'Server-Side Rendering'
};
let renderProps = {
preloadState: `window.__PRELOADED_STATE__ =${JSON.stringify(preloadState).replace(/</g, '\\u003c')}`,
script: 'http://localhost:3000/build/client.bundle.js',
appComponent: ReactDOMServer.renderToString(<App data={preloadState}/>)
};
const html = ReactDOMServer.renderToStaticMarkup(<Html {...renderProps}/>); // server-side Rendering
res.send(`<!doctype html>${html}`);
});
출처: http://dev-momo.tistory.com/entry/React-Server-Side-Rendering [Programming Note]
위에는 그냥 긁어온 거구여.
1. renderToString이랑 renderToStaticMarkup이 state tree 같은 거 알아서 타고 들어가면서 재귀적으로 html 다 그려주는 거에영?
2. 서버사이드 렌더링 하는게 존나 현실적으로 SEO때문에 하는건가여 아님 진짜 존나 빠른가여?
멀로공부함? velopert? - dc App
ㄴㄴ 그건 안봄
1 님이 생각하는거 맞는데 둘은 조금 다름
2 그냥하면 좆도 안빠름, 컴퍼넌트가 준비되는 과정에서 서버랑 통신하는게 있을때 그거 전부 ssr에 때려박으면 눈에띄게 빨라짐, seo는 구글같은곳은 안해도 잘되는데 네이버 이런대는 ssr안박으면 검색이 안됨
2 상태없이 주소로만 ssr하면 그거 통째로 cdn에 캐시해버릴수있음
ㄳㄳ 근데 생각해보면 페이지 로딩 속도 같은 거는 꽤 빨라질 것 같긴한데, 이미 만들어놓은거 그냥 주기만 하면 되니까. 맞아영?
답글다는데 또 달렸넹 ㄳㄳ
상태없이 주소로만 ssr해서 캐싱한다는게 한다는게 예를 들어 /home 이면 그걸 그냥 cdn에 때려박고 불러오기만 한다는 뜻인가영?
보통 리액트 앱 만들면 react-router 이런거 쓰는데 이런거보면 req에 딸려오는 주소를 파라미터로 줘서 렌더링을 다르게하는데 그거랑 별개로 express 수준에서 캐시컨트롤을 결정할 수 있음
같은 파라미터로 같은 결과가 나오면 굳이 매번 렌더링을 새로할 필요가 없으니까 캐싱할수있는거고 캐싱해서는 안되면 다르게 할수있는거고
오ㄳㄳ