Reactのサーバーサイドレンダリング例の詳細な説明
レンダリング時間をできるだけ速く、ページの応答速度を速くする必要がある場合、この記事では主に React のサーバーサイド レンダリングを使用します。興味のある方は学習してください。
1. はじめに なぜサーバーサイドレンダリングが必要なのでしょうか?サーバーサイドレンダリングはどのような状況で実行されますか?著者は、レンダリング時間をできるだけ速くし、ページの応答速度を速くする必要があり (利点)、ページを「オンデマンド」 (最初のロード/最初の画面) でレンダリングする必要がある場合にサーバー レンダリングが使用されると考えています。 」。サーバー側レンダリングの利点は、中間層 (ノード) がクライアントの初期データを要求し、ノードがページをレンダリングすることです。クライアント側レンダリングとサーバー側レンダリングの違いは何ですか?サーバーサイドのレンダリングはどれくらい速いですか?
2. 理由とアイデアクライアント側のレンダリング ルート: 1. HTML をリクエストします -> 2. サーバーは HTML を返します -> 3. ブラウザは HTML 内の js/css ファイルをダウンロードします-> 4. js ファイルのダウンロード
が完了するまで待ちます -> 5. js がロードされ初期化されるまで待ちます -> 6. js コードが最終的に実行可能になり、js コードがバックエンド (ajax/fetch) -> 7. バックエンド データが返されるのを待ちます -> 8. 反応ダム (クライアント) がデータを最初から応答ページにレンダリングして完了します 注: はい、同じコンポーネントについて、サーバーは「視覚的」部分 (コードの render/componentWillMount 部分) をレンダリングします。には完全なライフサイクル
とイベント処理 があるため、クライアントはそれを再度レンダリングする必要があります。つまり、サーバー側のレンダリングでは、実際にはクライアントが二次レンダリングを再度実行する必要がありますが、オーバーヘッドはほとんどありません。 時間消費量の比較:
1. データリクエスト: クライアントの代わりにサーバーがデータをリクエストします。これが「高速」の主な理由の 1 つです。サーバーはイントラネット上でリクエストを行うため、データの応答速度が高速です。クライアントは異なるネットワーク環境でデータ要求を行い、外部ネットワークの http 要求はコストがかかるため、時間差が生じます (主な理由)。
2. 手順: サーバーは最初にデータをリクエストし、次に「ビジュアル」部分をレンダリングします。一方、クライアントはjs コードがダウンロードされるのを待ち、ロードが完了してからデータをリクエストしてレンダリングします。つまり、サーバー側レンダリングでは、データをリクエストする前に JS コードがダウンロードされるのを待つ必要がなく、コンテンツがすでに含まれているページが返されます。
3. レンダリング パフォーマンス: サーバーのパフォーマンスがクライアントよりも高く、レンダリング速度が速くなります (このデータは不明です)。 4. コンテンツのレンダリング: サーバー側のレンダリングでは、最初に「視覚的な」部分がレンダリングされ、それが部分的なレンダリングのためにクライアントに渡されます。クライアント側のレンダリングは最初から開始され、完全なレンダリング手順が必要になります。
3.
と質問 ０．答え: ノード側: Express、react-dom/server、webpack。フロントエンド: React、mobx (より良い redux)、React-router、webpack1. フロントエンド/ノードエンドはコードのどの部分を共有しますか?回答: ノード/フロントエンドには独自の
エントリー ファイル、server.js/client.js があり、react-router のルーティング
設定ファイル// routes.js
module.exports = (
<Route path="/" component={ IComponent } >
<Route path="/todo" component={ AComponent }>
</Route>
</Route>
) // webpack.client.config.js
plugins: [
new webpack.DefinePlugin({
'isServer': false,
'isClient': true
})
]
// webpack.server.config.js
plugins: [
new webpack.DefinePlugin({
'isServer': true,
'isClient': false
})
]
// xxx.js
if( isServer ) {
...
}else { ... }
5.回答: まずノード側のデータに基づいてレンダリングし、次にそのデータをページとともにフロントエンドに返します。その後、React がデータに基づいてレンダリングと校正を実行します (フロントエンドとバックエンドのレンダリング結果が異なる場合)一貫性がない場合、エラーが報告されます)。コンポーネントは、componentWillMount でローカル データを同期できるようにする必要があります
// 组件.js
componentWillMount() {
if( isClient ) {
this.todoStore.todos = window.initTodos;
}
}
// node端返回
`
<!doctype html>
<html lang="utf-8">
<head>
<script> window.initTodo = ${...}</script>
</head>
<body> ... </body>
<script src="/static/vendor.js"></script>
<script src="/static/client.bundle.js"></script>6. 前端/node端“入口文件”通过webpack构建有什么不同？答：前端是为了解析JSX与es6代码（包括mobx的es6 decorator），node端除了以上，还需要加入babel-plugin-transform-runtime，是为了在node良好地运行es7 async / awatit
7. 如何保证node端能够先请求数据然后再渲染？答：es7的async / await语法
8. 前端的react-router路由与node端路由如何配合？node如何知道该路由是渲染哪个数据呢？答：前端是以前的react-router配置，node端是react-router的match/RouterContext// 共享文件routes.js
const routes = (
<Route path="/" component={ IComponent } >
<Route path="/todo" component={ AComponent }>
</Route>
</Route>
)
// 前端入口文件client.js
render(
<Router routes={ routes } history={ browserHistory } />,
ele
)
// node端入口文件server.js
let app = express();
app.get('/todo', (req, res) => {
match({ routes: routes, location: req.url }, async (err, redirect, props) => {
// match会帮我们找到要渲染的组件链，注：上面一行使用了async语法，因此可以在render之前使用await运行拉取数据的代码
let html = renderToString(<RouterContext {...props} />)
res.send( indexPage(html) )
}
})
// node端返回
let indexPage = (html)=>{
return `
<!doctype html>
<html lang="utf-8">
<head>
<script>
</script>
</head>
<body>
<section id="hzpapp" >${html}</section>
</body>
<script src="/static/vendor.js"></script>
<script src="/static/client.bundle.js"></script>
</html>
}9. client.js中是否还能继续使用webpack的require.ensure ? 答：可以。但闪白明显，且node端返回html后会有报错，在加载脚本后该错误能忽略。
10. 若我使用的是mobx，该如何实例化store ? 答：每一个node请求，都应该返回一个新的独立的store实例，而不是每个node请求共用一个store实例（笔者易犯）。
本demo地址( 前端库React+mobx+ReactRouter )：github.com/Penggggg/react-ssr
以上がReactのサーバーサイドレンダリング例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには?
Mar 15, 2024 pm 05:48 PM
PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには?インターネット技術の継続的な発展に伴い、フロントエンド フレームワークは Web 開発において重要な役割を果たしています。 PHP、Vue、React は 3 つの代表的なフロントエンド フレームワークであり、それぞれに独自の特徴と利点があります。使用するフロントエンド フレームワークを選択するとき、開発者はプロジェクトのニーズ、チームのスキル、個人の好みに基づいて情報に基づいた決定を下す必要があります。この記事では、PHP、Vue、React の 3 つのフロントエンド フレームワークの特徴と用途を比較します。
Java フレームワークとフロントエンド React フレームワークの統合
Jun 01, 2024 pm 03:16 PM
Java フレームワークと React フレームワークの統合: 手順: バックエンド Java フレームワークをセットアップします。プロジェクト構造を作成します。ビルドツールを設定します。 React アプリケーションを作成します。 REST API エンドポイントを作成します。通信メカニズムを構成します。実際のケース (SpringBoot+React): Java コード: RESTfulAPI コントローラーを定義します。 React コード: API によって返されたデータを取得して表示します。
PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする
Dec 18, 2023 pm 03:39 PM
インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する 株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
jsとvueの関係
Mar 11, 2024 pm 05:21 PM
js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。
JavaScript で HTTP ステータス コードを簡単に取得する方法
Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
現在のページを更新する js メソッド
Jan 24, 2024 pm 03:58 PM
現在のページを更新する js メソッド: 1. location.reload(); 2. location.href; 3. location.assign(); 4. window.location。詳細な紹介: 1. location.reload()、location.reload() メソッドを使用して現在のページを再読み込みします; 2. location.href、location.href 属性などを設定することで現在のページを更新できます。
