Javascript 在React应用中结合SSR和CSR
将CSR和SSR结合起来的正确方法是什么？基本上，我有一个网站，其中一些路线（主要是外部/网页的表现部分，如主页，关于，定价等）需要被呈现，主要是由于搜索引擎优化的原因。然后我有一个应用程序部分，我想让CS渲染。当SSR需要“ReactDOM.hydrate（）”时，如何实现这一点（如果我理解正确的话），这与CSR不起作用。我采用的和正在为我工作的混合方法如下：Javascript 在React应用中结合SSR和CSR,javascript,reactjs,server-side-rendering,Javascript,Reactjs,Server Side Rendering,将CSR和SSR结合起来的正确方法是什么？基本上，我有一个网站，其中一些路线（主要是外部/网页的表现部分，如主页，关于，定价等）需要被呈现，主要是由于搜索引擎优化的原因。然后我有一个应用程序部分，我想让CS渲染。当SSR需要“ReactDOM.hydrate（）”时，如何实现这一点（如果我理解正确的话），这与CSR不起作用。我采用的和正在为我工作的混合方法如下： 1. User goes to your website using the browser 2. Server sends plai
1. User goes to your website using the browser
2. Server sends plain index.html to the client browser with the following:
router.get('/', (req, res) => {
res.send(
`<html>
<body>
<div id="homepageaboutpricing"></div>
<div id="reactcodecontrolsthisdiv"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>`);
});
3. Client browser loads bundle.js which has all your React code
index.js
import ReactDOM from 'react-dom';
import App from './App.js';
...
ReactDOM.render(
<App />,
document.getElementById('reactcodecontrolsthisdiv')
);
App.js
import React, { Component } from 'react';
class App extends Component {
constructor() {}
componentDidMount() {}
render() {}
}
1。用户使用浏览器访问您的网站
2.服务器通过以下内容向客户端浏览器发送plain index.html：
路由器.get（“/”，（请求，res）=>{
res.send(
`
`);
});
3.客户端浏览器加载bundle.js，其中包含所有代码
index.js
从“react dom”导入react dom；
从“/App.js”导入应用程序；
...
ReactDOM.render(
,
document.getElementById（'reactcodecontrolsthisdiv'））
);
App.js
从“React”导入React，{Component}；
类应用程序扩展组件{
构造函数（）{}
componentDidMount（）{}
render（）{}
}