ユニアプリでSSRをする方法

UniApp は、Vue.js フレームワークに基づくクロスプラットフォーム アプリケーション開発フレームワークで、開発者は iOS、Android、H5、およびミニプログラム アプリケーションを同時に構築できます。したがって、高いパフォーマンス要件があるシナリオでは、レンダリング パフォーマンスの問題を解決するために SSR (サーバーサイド レンダリング) を使用する必要がある場合があります。この記事では、UniApp で SSR を実装する方法について説明します。

SSRとは何ですか？
SSR はサーバー側でのページの最初のレンダリングを完了し、静的な HTML コンテンツをブラウザーに返します。これにより、ブラウザーは使用可能な HTML があることを確認して、ページをレンダリングできるようになります。 SSR の利点は、最初のロードが高速になり、ユーザー エクスペリエンスが向上することです。

UniAppのSSR実装方法は？
UniApp の SSR 実装方法は、Vue.js の SSR 実装方法に基づいており、Vue.js エコシステム内のいくつかの SSR プラグインを使用する必要があります。
2 つの Vue.js プラグインを以下に紹介します。

1. Vue-router: リクエストを対応するコンポーネントに関連付けるルーティング管理に使用されます。
2. Vue-server-renderer: Node.js 環境でアプリケーションの HTML 文字列をレンダリングするために使用され、アプリケーションの現在の状態を表す HTML ファイルを生成します。

具体的な実装方法は次のとおりです:

1. Vue-router と Vue-server-renderer をインストールします:

   npm install vue-router vue-server-renderer --save

2. SSR エントリ ファイルを作成します:
   次の内容を含むentry-ssr.js ファイルを src の下に作成します:

   import createApp from './main'
   
   export default context => {
     return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    const { url } = context
    const fullPath = router.resolve(url).route.fullPath
   
    if (fullPath !== url) {
      return reject({ url: fullPath })
    }
   
    // 设置 server router 的位置
    router.push(url)
   
    // 等待 router 将组件渲染完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
   
      Promise.all(
        matchedComponents.map(Component => {
          if (Component.asyncData) {
            return Component.asyncData({
              store,
              route: router.currentRoute
            })
          }
        })
      )
        .then(() => {
          context.state = store.state
          resolve(app)
        })
        .catch(reject)
    }, reject)
     })
   }

3. SSR サーバーを作成します:
   サーバーの作成ルート ディレクトリ ファイル内の .js の内容は次のとおりです:

   const Koa = require('koa')
   const path = require('path')
   const fs = require('fs')
   const koaStatic = require('koa-static')
   const { createBundleRenderer } = require('vue-server-renderer')
   const serverBundle = require('./dist/vue-ssr-server-bundle.json')
   const clientManifest = require('./dist/vue-ssr-client-manifest.json')
   const template = fs.readFileSync(path.join(__dirname, './index.ssr.html'), 'utf-8')
   
   const app = new Koa()
   const renderer = createBundleRenderer(serverBundle, {
     runInNewContext: false,
     template,
     clientManifest
   })
   
   // 静态资源
   app.use(koaStatic(path.join(__dirname, './dist')))
   
   app.use(async (ctx, next) => {
     const context = { url: ctx.url }
   
     const html = await renderer.renderToString(context)
    .catch(err => {
      if (err.code === 404) {
        ctx.status = 404
        ctx.body = '404 Page Not Found'
      } else {
        ctx.status = 500
        ctx.body = '500 Internal Server Error'
        console.error(`${ctx.url}\n${err.stack}`)
      }
    })
   
     ctx.body = html
   })
   
   const port = process.env.PORT || 9090
   
   app.listen(port, () => {
     console.log(`server started at localhost:${port}`)
   })

4. ビルド構成を変更します:
   vue.config.js ファイルに次のコードを追加します:

   module.exports = {
     productionSourceMap: false,
     css: {
    extract: {
      ignoreOrder: true
    }
     },
     configureWebpack: config => {
    if (process.env.UNI_SSR) {
      config.output.libraryTarget = 'commonjs2'
      config.externals = [
        /^uni-app/,
        /^@dcloudio/,
        {
          vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue'
          }
        }
      ]
      config.plugins.push(new VueSSRServerPlugin())
    }
     }
   }

5. ルート ディレクトリの package.json ファイルを変更します。
   「scripts」の下に次のコードを追加します。

   "ssr-build": "cross-env UNI_SSR=1 vue-cli-service build --mode production --target server --dest dist && vue-cli-service build --mode production --target client --dest dist",
   "ssr-start": "cross-env NODE_ENV=production node server.js"

   npm run ssr-build を実行してビルドします。 SSR アプリケーションを起動し、npm run ssr-start を実行してアプリケーション プログラムを起動します。

この時点で、UniApp SS は正常に実行されました。

まとめ
UniApp の構造は Vue.js とよく似ているため、SSR を実装する場合、Vue.js の SSR 実装方法に従って UniApp の SSR を完成させることができ、UniApp は一連の手順 アプリケーションはサーバー側レンダリングをサポートしているため、ページの読み込み速度が速くなり、ユーザー エクスペリエンスが向上します。

以上がユニアプリでSSRをする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。