2
私はサーバーサイドレンダリングを設定したアプリケーションを持っています。すべてがうまくいき、コンポーネントがサーバー上でレンダリングされます。問題は、コンポーネントを画面上に2回レンダリングすることです。 1つはサーバレンダリングに使用している<div id="content"><%- content %></div>から来ており、1つは<script src="http://localhost:3001/bundle.js"></script>から来ています。私はwebpackを使って自分のサーバーとクライアント用に2つのバンドルを作成します。なぜこれが起こっているのですか？これをどのように修正できますか？リアクションコンポーネントがサーバーサイドレンダリングを使用して2回レンダされる
ビュー/ index.ejs
<body>
<div id="app"></div>
<div id="content"><%- content %></div>
<script src="http://localhost:3001/bundle.js"></script>
</body>
index.js
app.use(Express.static(path.join(__dirname, '../', 'dist')))
app.use(serverRenderer)
app.get('*', (req: Object, res: Object) => {
res.render('index', {content: req.body})
})
serverRender
import React from 'react'
import ReactDOM from 'react-dom/server'
import { match, RouterContext } from 'react-router'
import routes from '../client/routes.js'
async function render (component) {
const content = ReactDOM.renderToString(component)
return content
}
async function getMatchParams (routes, currentUrl) {
return new Promise((resolve, reject) => {
match({routes: routes, location: currentUrl}, (err, redirect, props) => {
if (err) {
return reject(err)
}
return resolve(props)
})
})
}
export default async(req, res, next) => {
const renderProps = await getMatchParams(routes, req.url)
if (renderProps) {
const component = (
<RouterContext {...renderProps} />
)
req.body = await render(component)
next()
}
}