ReactでSSRする際に、DOCTYPEを書く方法がわからず、しばらくハマりました。
解決方法が見つかったので、備忘録的に記しておきます。
Html.tsx
import * as React from 'react'
import App from '../containers/App'
interface Props {}
const Html: React.SFC<Props> = (props: Props) => {
return (
<html>
<head>
<title>App</title>
</head>
<body>
<div id="app">
<App />
</div>
<script src="/client.bundle.js" />
</body>
</html>
)
}
export default Html
このようにHtmlコンポーネントを書いている場合、
serverRoutes.tsx
import * as path from 'path'
import * as express from 'express'
import { Request, Response } from 'express';
import * as React from 'react'
import * as ReactDOMServer from 'react-dom/server'
import { Provider } from 'react-redux'
import { StaticRouter } from 'react-router-dom'
import configureStore from '../store/configureStore'
import Html from '../components/Html'
const store = configureStore()
const router: express.Router = express.Router()
router.get('/client.bundle.js*', (req: Request, res: Response): void => {
res.sendFile(path.resolve(`./dist${req.url}`))
})
router.get('*', (req: Request, res: Response): void => {
res.write('<!DOCTYPE html>') // ← これを書く!!
const context: { url?: string } = {}
ReactDOMServer.renderToNodeStream(
<Provider store={store}>
<StaticRouter location={req.url} context={context} >
<Html />
</StaticRouter>
</Provider>
).pipe(res)
})
export default router
res.write('<!DOCTYPE html>')これを書くだけでした。
これだけで結構時間が潰れた。。。