ユニアプリでSSRをする方法-uni-app-php.cn

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

PHPz

リリース： 2023-04-14 13:55:36

オリジナル

2368 人が閲覧しました

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 プラグインを以下に紹介します。

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

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

Vue-router と Vue-server-renderer をインストールします:
```
npm install vue-router vue-server-renderer --save
```
ログイン後にコピー

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

ログイン後にコピー

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}`)
})

ログイン後にコピー

ビルド構成を変更します:
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())
 }
  }
}

ログイン後にコピー

ルートディレクトリの 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 サイトの他の関連記事を参照してください。