Vue에서 SSR을 사용하여 애플리케이션의 첫 번째 화면 로딩 속도 향상-View.js-php.cn

Vue에서 SSR을 사용하여 애플리케이션의 첫 번째 화면 로딩 속도 향상

WBOY

풀어 주다： 2023-07-19 10:07:47

원래의

1654명이 탐색했습니다.

Vue에서 SSR을 사용하여 애플리케이션의 첫 화면 로딩 속도를 향상시키세요

프런트엔드 기술의 지속적인 발전과 함께 프런트엔드 애플리케이션의 성능 최적화도 개발자의 초점이 되었습니다. 최신 프런트 엔드 개발에서는 단일 페이지 애플리케이션(SPA)이 주류가 되었으며 Vue 및 React와 같은 프레임워크의 인기로 인해 점점 더 많은 개발자가 이러한 프레임워크를 사용하여 애플리케이션을 구축하기로 선택하고 있습니다. 하지만 SPA 애플리케이션은 처음 로딩할 때 많은 양의 자바스크립트 코드를 다운로드하고 파싱해야 하기 때문에 첫 화면 로딩 속도가 느려진다. 이 문제를 해결하기 위해 SSR(서버사이드 렌더링)을 사용하여 애플리케이션 첫 화면의 로딩 속도를 향상시킬 수 있습니다.

Vue는 공식적으로 지원되는 서버 측 렌더링 솔루션을 제공합니다. 이를 통해 Vue 애플리케이션의 렌더링 로직을 서버 측에 배치하여 실행하고 렌더링 결과를 브라우저에 직접 보낼 수 있으므로 브라우저가 렌더링하는 데 걸리는 시간이 단축됩니다. JavaScript를 구문 분석하여 앱의 첫 번째 화면 로딩 속도를 향상시킵니다.

다음은 Vue에서 서버 측 렌더링을 사용하여 애플리케이션의 첫 번째 화면 로딩 속도를 향상시키는 방법을 보여주는 간단한 예입니다.

먼저 vue-cli 스캐폴딩 도구를 설치하고 새 프로젝트를 만들어야 합니다.

npm install -g @vue/cli
vue create my-app

로그인 후 복사

그런 다음 프로젝트에 필요한 몇 가지 종속성을 설치해야 합니다.

cd my-app
npm install vue-server-renderer express

로그인 후 복사

server.js 파일을 만들고 여기에 작성합니다. 서버 -side logic의 코드는 다음과 같습니다.

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      message: 'Hello, Vue SSR!'
    },
    template: '<div>{{ message }}</div>'
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }

    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000')
})

로그인 후 복사

다음으로 package.json에 명령을 추가하여 서버를 시작합니다.

{
  "scripts": {
    "serve": "node server.js"
  }
}

로그인 후 복사

마지막으로 다음 명령을 실행하여 서버를 시작할 수 있습니다.

npm run serve

로그인 후 복사

이 시점에서, 서버 렌더링 결과를 보려면 http://localhost:3000에 액세스할 수 있습니다. 렌더링 결과가 브라우저에 직접 반환되고, 로딩 지연 문제가 없어 애플리케이션 첫 화면의 로딩 속도가 향상되는 것을 확인할 수 있습니다.

위의 예를 통해 Vue의 서버 측 렌더링 기술을 사용하면 애플리케이션의 첫 화면 로딩 속도가 크게 향상될 수 있음을 알 수 있습니다. 그러나 서버 측 렌더링의 도입으로 인해 추가적인 복잡성이 발생하므로 개발 과정에서 일부 특수한 부분에 주의를 기울여야 합니다. 예를 들어 서버 측 렌더링에서는 브라우저의 전역 개체(예: 창 및 문서)를 직접 사용할 수 없으며 대신 Vue에서 제공하는 특수 전역 개체를 사용해야 합니다. 또한 개발 과정에서 호환성 및 성능 문제에도 주의를 기울여야 합니다.

요약하자면 Vue의 서버 측 렌더링 기술은 애플리케이션 첫 화면의 로딩 속도를 향상시키는 데 도움이 되는 강력한 도구입니다. 그러나 사용 중에 고려해야 할 몇 가지 특별한 고려 사항이 있으며 몇 가지 추가적인 복잡성이 도입됩니다. 애플리케이션에 빠른 첫 화면 로딩 속도가 필요한 경우 서버 측 렌더링을 사용하는 것이 좋은 선택입니다.

위 내용은 Vue에서 SSR을 사용하여 애플리케이션의 첫 번째 화면 로딩 속도 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!