在React應用程序中結合SSR和CSR

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 個解決方案

解決方案1
0 2018-10-06 07:08:51

在React應用程序中結合SSR和CSR

問題描述

1 個解決方案

解決方案1 0 2018-10-06 07:08:51

解決方案1
0 2018-10-06 07:08:51