gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 06:21:56 26 4
gpt4 key购买 nike

结合 CSR 和 SSR 的正确方法是什么?基本上我有一个网站,其中一些路由(主要是网络的外部/展示部分 - 如主页、关于、定价等)需要 SS 呈现,主要是出于 SEO 原因。然后我有一个应用程序部分,我想让它呈现 CS。当 SSR 需要“ReactDOM.hydrate()”时,我该如何实现这一点,而 CSR 并不真正起作用(如果我理解正确的话)。

最佳答案

我采用的混合方法如下:

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

关于javascript - 在 React 应用程序中结合 SSR 和 CSR,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52640892/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com