Wie man SSR mit Uniapp macht

UniApp ist ein plattformübergreifendes Anwendungsentwicklungs-Framework, das auf dem Vue.js-Framework basiert und es Entwicklern ermöglicht, gleichzeitig iOS-, Android-, H5- und Miniprogramm-Anwendungen zu erstellen. Daher müssen Sie in Szenarien mit hohen Leistungsanforderungen möglicherweise SSR (Server-Side Rendering) verwenden, um Probleme mit der Rendering-Leistung zu lösen. In diesem Artikel wird erläutert, wie Sie SSR in UniApp implementieren.

Was ist SSR?
SSR schließt das erste Rendern der Seite auf der Serverseite ab und gibt den statischen HTML-Inhalt an den Browser zurück, sodass der Browser erkennen kann, dass HTML verfügbar ist, und dann die Seite rendern kann. Der Vorteil von SSR besteht darin, dass es den ersten Ladevorgang beschleunigen und das Benutzererlebnis verbessern kann.

UniApps SSR-Implementierungsmethode?
Die SSR-Implementierungsmethode von UniApp basiert auf der SSR-Implementierungsmethode von Vue.js, die die Verwendung einiger SSR-Plug-Ins im Vue.js-Ökosystem erfordert.
Zwei Vue.js-Plug-Ins werden unten vorgestellt:

1. Vue-Router: Wird für die Routing-Verwaltung und die Zuordnung von Anfragen zu entsprechenden Komponenten verwendet.
2. Vue-server-renderer: HTML-Zeichenfolge, die zum Rendern der Anwendung in der Node.js-Umgebung verwendet wird und HTML-Dateien generiert, um den aktuellen Status der Anwendung darzustellen.

Die spezifische Implementierungsmethode ist wie folgt:

1. Vue-Router und Vue-Server-Renderer installieren: #🎜🎜 #

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

   # 🎜🎜#
Erstellen Sie die SSR-Eintragsdatei:
2. Erstellen Sie die Datei „entry-ssr.js“ unter src mit folgendem Inhalt:

   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-Server erstellen: Erstellen Sie die Datei server.js im Stammverzeichnis mit folgendem Inhalt:

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

3. 
   Ändern Sie die Build-Konfiguration :

   in vue. Fügen Sie in der Datei config.js den folgenden Code hinzu:

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

4. 
   Ändern Sie die Datei package.json im Stammverzeichnis: #🎜 🎜#Fügen Sie unter „Skripte“ den folgenden Code hinzu:

   "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"

Führen Sie npm run ssr-build aus, um die SSR-Anwendung zu erstellen, und führen Sie dann npm run ssr-start aus, um die Anwendung zu starten.

5. 
   

   Zu diesem Zeitpunkt wurde UniApp SS erfolgreich ausgeführt.
   Zusammenfassung
Da die Struktur von UniApp der von Vue.js sehr ähnlich ist, kann bei der Implementierung von SSR die SSR von UniApp gemäß der SSR-Implementierungsmethode von Vue.js durch eine Reihe von vervollständigt werden Es ermöglicht Anwendungen in UniApp, serverseitiges Rendering zu unterstützen, wodurch eine schnellere Seitenladegeschwindigkeit erreicht und die Benutzererfahrung verbessert wird.

Das obige ist der detaillierte Inhalt vonWie man SSR mit Uniapp macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!