Skip to content
This repository has been archived by the owner on Sep 8, 2022. It is now read-only.

fix: use renderToString instead of renderToNodeStream #164

Merged
merged 2 commits into from
Sep 11, 2018
Merged

fix: use renderToString instead of renderToNodeStream #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15888d1
fix: use renderToString instead of renderToNodeStream
yosuke-furukawa Sep 7, 2018
a78907e
fix: remove dangerouslySetInnerHTML to use getStyleElements
yosuke-furukawa Sep 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 2 additions & 30 deletions src/server/components/Html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default compose(
content,
initialState,
clientConfig,
assets: { publicPath, scripts, stylesheets, inlineStylesheets, cssHashRaw },
assets: { publicPath, scripts, cssHashRaw },
styles,
} = props;

Expand All @@ -25,14 +25,7 @@ export default compose(
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=320,initial-scale=1.0" />
{/* TODO: Expand styles without wrapper */}
<style
type="text/css"
media="screen, projection"
dangerouslySetInnerHTML={{
__html: styles,
}}
/>
{styles && styles.map(style => style)}
{/* Install serviceWorker only modern browser */}
<script
type="module"
Expand All @@ -53,27 +46,6 @@ export default compose(
`,
}}
/>
{stylesheets &&
stylesheets.map(style => (
<link
key={style}
href={`${publicPath}/${style}`}
media="screen, projection"
rel="stylesheet"
type="text/css"
/>
))}
{inlineStylesheets &&
inlineStylesheets.map(style => (
<style
key={style.name}
type="text/css"
media="screen, projection"
dangerouslySetInnerHTML={{
__html: style.content,
}}
/>
))}
{scripts &&
scripts.map(script => (
<script
Expand Down
53 changes: 15 additions & 38 deletions src/server/middlewares/reduxApp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,7 @@ import path from "path";
import { inspect } from "util";
import React from "react";
import { ServerStyleSheet } from "styled-components";
import {
renderToNodeStream,
renderToStaticNodeStream,
renderToStaticMarkup,
} from "react-dom/server";
import { renderToStaticMarkup, renderToString } from "react-dom/server";
import { createMemoryHistory, match } from "react-router";
import { syncHistoryWithStore } from "react-router-redux";
import { loadOnServer } from "redux-async-loader";
Expand Down Expand Up @@ -211,8 +207,8 @@ function renderSSR({

const sheet = new ServerStyleSheet(); // <-- creating out stylesheet
const jsx = sheet.collectStyles(<App store={store} {...renderProps} />);
const stream = sheet.interleaveWithNodeStream(renderToNodeStream(jsx));
const styles = sheet.getStyleTags();
const content = renderToString(jsx);
const styles = sheet.getStyleElement();

const assets = getAssets({ clientStats: config.clientStats, cssChunks });

Expand All @@ -222,7 +218,7 @@ function renderSSR({
res,
status,
store,
stream,
content,
clientConfig,
assets,
timing,
Expand Down Expand Up @@ -257,7 +253,7 @@ function sendSSRResponse({
store,
clientConfig,
assets,
stream,
content,
timing,
styles,
}) {
Expand All @@ -269,27 +265,17 @@ function sendSSRResponse({

res.set("Content-Type", "text/html");

let content = "";
stream.on("data", chunk => {
content += chunk;
});
stream.on("end", () => {
timing.endTime("ssr");
const props = {
content,
assets,
styles,
initialState: JSON.stringify(store.getState()),
clientConfig: JSON.stringify(clientConfig),
};
timing.endTime("ssr");
const props = {
content,
assets,
styles,
initialState: JSON.stringify(store.getState()),
clientConfig: JSON.stringify(clientConfig),
};

res.write("<!doctype html>\n");
const htmlStream = renderToStaticNodeStream(<Html {...props} />);
htmlStream.on("end", () => {
timing.endTime("html");
});
htmlStream.pipe(res);
});
const html = renderToStaticMarkup(<Html {...props} />);
res.send(`<!doctype html>\n${html}`);
}

/*
Expand Down Expand Up @@ -341,14 +327,5 @@ function getAssets({ clientStats, cssChunks }) {
assets.cssHashRaw = mapValues(
value => (stylesheets.includes(value) ? "loaded" : value),
)(assets.cssHashRaw);

if (!__DISABLE_INLINE_CSS__) {
assets.inlineStylesheets = assets.stylesheets.map(chunkName => ({
name: chunkName,
content: cssChunks[chunkName].content,
}));
assets.stylesheets = null;
}

return assets;
}