Question

结合CSR和SSR的正确方法是什么？基本上，我有一个网站，其中的某些路线（大部分是网站的外部/演示部分，如首页，关于，定价等）需要进行SS渲染，主要是出于SEO的原因。然后我有一个应用部分，我想渲染CS。当SSR要求“ ReactDOM.hydrate（）”在CSR中无法真正起作用（如果我理解正确的话）时，该如何实现？

Answer 1

我采用并正在为我工作的混合方法如下：

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() {}
}

在React应用程序中结合SSR和CSR

1 个答案: