terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

apply css on server rendering

Browse source
This commit is contained in:
nkzawa 2016-10-09 18:50:41 +09:00
parent 0a0bb2e673
commit 3e721b6878
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/next.js
View file

@ -1,12 +1,13 @@
import { createElement } from 'react'
import { render } from 'react-dom'
import HeadManager from './head-manager'
import { StyleSheet } from '../lib/css'
import Router from '../lib/router'
import DefaultApp from '../lib/app'
import evalScript from '../lib/eval-script'
const {
__NEXT_DATA__: { app, component, props }
__NEXT_DATA__: { app, component, props, classNames }
} = window
const App = app ? evalScript(app).default : DefaultApp
@ -17,4 +18,5 @@ const headManager = new HeadManager()
const container = document.getElementById('__next')
const appProps = { Component, props, router, headManager }
StyleSheet.rehydrate(classNames)
render(createElement(App, { ...appProps }), container)

4
lib/document.js
View file

@ -30,7 +30,7 @@ export function Head (props, context) {
.map((h, i) => React.cloneElement(h, { key: '_next' + i }))
return <head>
{h}
<style data-aphrodite>{css.content}</style>
<style data-aphrodite dangerouslySetInnerHTML={{ __html: css.content }} />
</head>
}
@ -40,7 +40,7 @@ export function Main (props, context) {
const { html, data } = context._documentProps;
return <div>
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
<script dangerouslySetInnerHTML={{ __html: '__NEXT_DATA__ = ' + htmlescape(data) }}></script>
<script dangerouslySetInnerHTML={{ __html: '__NEXT_DATA__ = ' + htmlescape(data) }} />
</div>
}

6
server/render.js
View file

@ -34,7 +34,11 @@ export async function render (path, ctx, { dir = process.cwd(), dev = false } =
html,
head,
css,
data: { component, props },
data: {
component,
props,
classNames: css.renderedClassNames
},
hotReload: false,
dev
})