Uniapp으로 ssr을 수행하는 방법

UniApp은 Vue.js 프레임워크를 기반으로 하는 크로스 플랫폼 애플리케이션 개발 프레임워크로, 개발자가 iOS, Android, H5 및 미니 프로그램 애플리케이션을 동시에 구축할 수 있도록 해줍니다. 따라서 높은 성능이 요구되는 시나리오에서는 렌더링 성능 문제를 해결하기 위해 SSR(Server-Side Rendering)을 사용해야 할 수도 있습니다. 이 기사에서는 UniApp에서 SSR을 구현하는 방법에 대해 설명합니다.

SSR이란 무엇인가요?
SSR은 서버 측에서 페이지의 첫 번째 렌더링을 완료하고 정적 HTML 콘텐츠를 브라우저에 반환하여 브라우저가 사용 가능한 HTML이 있는지 확인한 다음 페이지를 렌더링합니다. SSR의 장점은 첫 번째 로드 속도를 높이고 사용자 경험을 향상시킬 수 있다는 것입니다.

유니앱의 SSR 구현방식은?
UniApp의 SSR 구현 방법은 Vue.js의 SSR 구현 방법을 기반으로 하며, 이를 위해서는 Vue.js 생태계에서 일부 SSR 플러그인을 사용해야 합니다.
두 가지 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 항목 파일 생성:
   다음을 사용하여 src 아래에 Entry-ssr.js 파일을 생성합니다. 다음 콘텐츠:

   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 서버 생성:
   다음 콘텐츠로 루트 디렉터리에 server.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의 애플리케이션은 다음을 지원할 수 있습니다. 서버 사이드 렌더링을 통해 페이지 로딩 속도가 빨라지고 사용자 경험이 향상됩니다.

위 내용은 Uniapp으로 ssr을 수행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!