JS でフロントエンドとバックエンドの同型性を使用する方法

今回は、JS でフロントエンドとバックエンドの同型性を使用する方法と、JS でフロントエンドとバックエンドの同型性を使用する際の注意点について説明します。実際のケースを見てみましょう。

フロントエンドとバックエンドの同型性とは

3 つの概念を明確にします。「バックエンド レンダリング」は、従来の ASP、Java、または PHP レンダリング メカニズムを指します。「フロントエンド レンダリング」は、JS を使用してレンダリングすることを指します。ページのコンテンツの大部分は、一般的な SPA シングルページ アプリケーションを表します。「同型レンダリング」とは、フロント エンドとバック エンドが JS を共有し、最初のレンダリング中に HTML を直接出力するために Node.js が使用されることを意味します。一般に、同形レンダリングはフロントエンドとバックエンドの間で共通の部分です。

フロントエンドは本当に苦労しているように感じます。フロントエンドとフロントエンドの分離は、なぜ今になってフロントエンドとバックエンドを同型にする必要があるのでしょうか。

その理由は、一般的な SPA フロントエンドのシングルページ アプリケーションは比較的重く、最初のアクセス時に多くのファイルをロードする必要があるため、最初のロードが遅すぎるため、ユーザーはフロントエンドが完了するまで待つ必要があります。ページをレンダリングします。 SEO やキャッシュには適しておらず、開発には一定の限界があります。

フロントエンドとバックエンドの同型性により、テンプレートと JS ファイルを再利用することで、コードをサーバーとブラウザーで同時に実行できます。最初のレンダリングでは、nodejs を使用してページをレンダリングし、次に SPA ルーティングを使用してジャンプします。初めて訪問するユーザーの待ち時間を効果的に短縮でき、SEO に優しく、キャッシュも容易です。

プロジェクトの紹介

このフロントエンドとバックエンドの同型プロジェクトは主に 2 つの部分に分かれており、1 つは koa2 に基づくレンダリング サーバーであり、もう 1 つはネイティブ JS と zepto に基づくフロントエンド SPA です。

プロジェクトの特徴は、vueやreactなどのフレームワークを使用せず、敷居が低く、開発速度が速く、始めやすく、コアのルーター部分が100行程度と比較的軽量であることです。コードの。これは、ページの操作がほとんどなく、変更が頻繁に行われないシナリオに適しており、パフォーマンスと読み込み速度を効果的に向上させることができます。

フロントエンド部分

フロントエンド部分の中核となるのは、履歴 API またはハッシュに基づくことができます。今回は主にインターネット上の実装について説明します。
フロントエンド部分はMVC階層構造を採用しています。

ルーター層は主にルーティングの例を作成し、ルーティングの get メソッドを呼び出し、制御層からの関数を特定のページにバインドします。
フォームは次のとおりです:

import control from '../control'
//路由的构造函数支持传入渲染函数，路由的全局名称，路由跳转前调用的钩子
router = new Router(render,'ROUTER',beforeFn)
router.get('/page/a', control.pageA')

コントロール層の主な目的は、バックエンドと共有されるレンダリング テンプレートとレンダリング データをロードし、ページのレンダリング後にページ関数を実行することです。

フォームは次のとおりです。

ビューレイヤーはテンプレートであり、ここではxtplが使用されます

ページ関数の形式

ページ関数は、es6モジュールの書き込みと組み合わせて使用​​する必要があります。 webpackのオンデマンドローディング機能

let control = {
 pageA(req,res) {
  //webpack的动态加载，代码分割功能
  import(/* webpackChunkName: "pageA" */'script/pageA').then(module=> {
  // 检测该页面是否已有服务器渲染好，是的话直接运行module.default
  //否则加载模板和数据进行渲染,最后再调用页面函数
  if(this.needRender(module.default)) {
  //加载数据时访问的地址就是当前准备渲染的页面地址，只是加上了json=1的参数
   loadData('pageA').then(data => 
    res.render(xtpl,data,module.default))
  }
 }
}
// 捕捉webpack热更新，让他只进行相当于页面跳转的操作而不是刷新页面
if(module.hot) {
 module.hot.accept(['script/pageA'], () => {
  control[ROUTER.req.currentControl].call(ROUTER,null,ROUTER.res)
 })
}

バックエンド部分で使用

koa2で構築されたレンダリングサーバーは、フロントエンドからページリクエストを受信した際にAPIサーバーにデータを要求し、ページがリクエストされたかどうかを識別しますリクエストに json=1 パラメータが含まれている場合は、フロントエンドのルートがジャンプするときに使用されます。json パラメータがない場合は、フロントエンドと共有されているテンプレートをロードしてレンダリングします。データを作成し、ブラウザに送信します。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

完全なバックエンドを作成するための React+antd コンポーネント (コード付き)

React アプリケーション開発のスキャフォールディングのユースケース

以上がJS でフロントエンドとバックエンドの同型性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。