집 > 기사 > 웹 프론트엔드 > Vue에서 서버 측 렌더링을 수행하는 방법은 무엇입니까?

Vue에서 서버 측 렌더링을 수행하는 방법은 무엇입니까?

WBOY원래의: 2023-06-11 19:28:352389검색

Vue는 사용자 인터페이스를 쉽게 구축할 수 있는 도구와 구성 요소를 제공하는 인기 있는 JavaScript 프레임워크입니다. 웹 애플리케이션이 더욱 복잡해짐에 따라 서버 측 렌더링(SSR)은 더 나은 성능과 사용자 경험을 제공할 수 있습니다. Vue 2.0에는 SSR 지원이 도입되어 SSR에 Vue를 사용할 수 있습니다. 이 문서에서는 Vue에서 서버 측 렌더링을 수행하는 방법을 설명합니다.

서버사이드 렌더링이란 무엇인가요?

일반적인 클라이언트 측 렌더링 애플리케이션에서 브라우저는 HTML 페이지와 JavaScript 파일을 로드합니다. 사용자가 애플리케이션과 상호 작용할 때 JavaScript는 서버에 요청을 보내고, 데이터를 얻고, 페이지를 업데이트합니다. 이 접근 방식은 뛰어난 사용자 경험을 제공할 수 있지만 몇 가지 단점도 가져올 수 있습니다. 첫째, 검색 엔진 크롤러는 일반적으로 JavaScript를 실행하지 않으므로 애플리케이션의 모든 페이지를 포함하지 못할 수도 있습니다. 둘째, 브라우저는 인터페이스 렌더링을 시작하기 전에 JavaScript가 다운로드되어 실행될 때까지 기다려야 하기 때문에 초기 로드 시간이 느릴 수 있습니다.

서버 측 렌더링은 이러한 문제를 해결합니다. SSR에서 서버는 페이지를 렌더링할 때 HTML과 JavaScript를 함께 브라우저에 보냅니다. 이는 검색 엔진이 사이트를 쉽게 크롤링할 수 있고 브라우저가 렌더링을 시작하기 전에 JavaScript가 다운로드될 때까지 기다릴 필요가 없기 때문에 초기 페이지 로드 시간이 더 빨라진다는 것을 의미합니다. 또한 SSR은 강력한 JavaScript 엔진이 부족한 저가형 장치에서 애플리케이션 성능을 향상시킬 수 있습니다.

Vue에서 SSR을 사용하는 이유는 무엇인가요?

Vue는 클라이언트 측 렌더링 프레임워크입니다. 가상 DOM과 비동기 구성 요소를 사용하여 엄청나게 빠른 페이지 응답 시간을 제공합니다. 그러나 애플리케이션이 더욱 복잡해짐에 따라 클라이언트 측 렌더링에는 몇 가지 단점이 발생합니다. 예:

긴 초기 로드 시간: 브라우저가 JavaScript 파일을 다운로드하고 실행해야 하기 때문에 애플리케이션의 초기 로드 시간이 길어질 수 있습니다.
제한된 SEO 지원: 검색 엔진은 일반적으로 JavaScript를 실행하지 않으므로 모든 페이지를 색인화하지 못할 수도 있습니다.
저사양 기기에는 적합하지 않음: 일부 저가형 기기는 많은 양의 JavaScript를 처리하지 못해 앱이 느려지거나 충돌할 수 있습니다.
크롤러에게는 좋지 않습니다. 검색 엔진은 JavaScript를 실행할 수 없기 때문에 크롤러가 페이지를 올바르게 색인화하지 못할 수도 있습니다.

SSR은 위의 문제를 해결하고 더 나은 성능과 사용자 경험을 제공할 수 있습니다. 따라서 Vue는 SSR 지원을 제공하여 서버 측에서 Vue 애플리케이션을 렌더링할 수 있습니다.

Vue에서 SSR을 수행하는 단계

Vue에서 SSR을 수행하는 것은 다음 단계로 나뉩니다.

Vue 애플리케이션 인스턴스를 만듭니다.
서버(Node.js)를 생성하고 구성합니다.
Vue 애플리케이션을 처리하도록 서버를 구성합니다.
페이지 경로를 처리할 경로를 만듭니다.
서버에서 Vue 애플리케이션을 렌더링합니다.

이제 SSR을 더 잘 이해하기 위해 각 단계를 단계별로 살펴보겠습니다.

1단계: Vue 애플리케이션 인스턴스 생성

먼저 Vue 인스턴스를 생성하고 애플리케이션의 템플릿을 정의해야 합니다. 클라이언트 측을 렌더링할 때 일반적으로 index.html 파일에 애플리케이션의 템플릿을 정의합니다. 하지만 SSR에서는 서버 측에서 생성해야 합니다. 간단한 예는 다음과 같습니다.

// app.js
import Vue from 'vue';
import App from './App.vue';

export function createApp() {
  return new Vue({
    render: h => h(App)
  });
}

위 코드는 새 Vue 인스턴스를 생성하고 반환하는 createApp라는 함수를 내보냅니다. 이 예에서는 루트 구성 요소 App.vue를 사용하여 애플리케이션을 렌더링합니다. createApp 的函数，该函数创建并返回一个新的 Vue 实例。这个实例使用我们的根组件 App.vue 来渲染应用程序。

步骤2：创建和配置一个服务器

在步骤1中，我们创建了一个可以用于在服务器端渲染我们的 Vue 应用程序的 Vue 实例。现在，我们需要创建一个服务器来运行这个实例。我们使用 Node.js 来创建服务器。

以下是我们可以使用的基本服务器模板：

// server.js
const express = require('express');
const app = express();

// The port number to use.
const PORT = process.env.PORT || 3000;

// Serve static assets.
app.use(express.static('public'));

// Start the server.
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

上面的代码创建了一个简单的 Express 服务器，并让它监听本地端口 3000。这个服务器还可以使用 express.static 中间件来提供静态文件访问支持。

步骤3：配置服务器以处理我们的 Vue 应用程序

我们已经创建了服务器，现在需要配置服务器以处理我们的 Vue 应用程序。为此，我们需要使用 vue-server-renderer 依赖项。下面是完整的代码示例：

// server.js
const express = require('express');
const app = express();

// Include the Vue SSR renderer.
const renderer = require('vue-server-renderer').createRenderer();

// Import the createApp function from app.js.
const { createApp } = require('./app');

// The port number to use.
const PORT = process.env.PORT || 3000;

// Serve static assets.
app.use(express.static('public'));

// Handle all GET requests.
app.get('*', (req, res) => {
  // Create a new Vue app instance.
  const app = createApp();

  // Render the Vue app to a string.
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }

    // Send the HTML response to the client.
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Vue SSR App</title>
        </head>
        <body>
          ${html}
        </body>
      </html>
    `);
  });
});

// Start the server.
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

上面的代码创建了一个完整的 Express 服务器，将请求和 Vue 实例关联起来，并使用 vue-server-renderer 包的 renderToString

2단계: 서버 생성 및 구성

1단계에서는 Vue 애플리케이션을 서버 측에서 렌더링하는 데 사용할 수 있는 Vue 인스턴스를 만들었습니다. 이제 이 인스턴스를 실행할 서버를 생성해야 합니다. Node.js를 사용하여 서버를 만듭니다.

사용할 수 있는 기본 서버 템플릿은 다음과 같습니다.

// app.js
import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';

export function createApp() {
  const router = createRouter();

  return new Vue({
    router,
    render: h => h(App)
  });
}

위의 코드는 간단한 Express 서버를 생성하고 로컬 포트 3000에서 수신 대기하도록 합니다. 이 서버는 express.static 미들웨어를 사용하여 정적 파일 액세스 지원을 제공할 수도 있습니다. 🎜🎜3단계: Vue 애플리케이션을 처리하도록 서버 구성 🎜🎜서버를 만들었으므로 이제 Vue 애플리케이션을 처리하도록 서버를 구성해야 합니다. 이를 위해서는 vue-server-renderer 종속성을 사용해야 합니다. 전체 코드 예는 다음과 같습니다. 🎜

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  });
}

🎜위 코드는 완전한 Express 서버를 생성하고 요청을 Vue 인스턴스와 연결하며 vue-server-renderer 패키지의

renderToString 메소드는 Vue 애플리케이션을 HTML로 렌더링합니다. 🎜🎜4단계: 경로 만들기 🎜🎜이제 Vue 애플리케이션을 서버 측에서 렌더링할 수 있습니다. 이제 페이지 경로를 서버측 경로와 연결하는 경로를 생성해야 합니다. 우리는 Vue Router를 사용하여 경로를 만듭니다. 🎜🎜다음은 간단한 예입니다.🎜<pre class='brush:javascript;toolbar:false;'>// app.js
import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';

export function createApp() {
  const router = createRouter();

  return new Vue({
    router,
    render: h =&gt; h(App)
  });
}</pre><pre class='brush:javascript;toolbar:false;'>// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  });
}</pre><p>上面的代码分别在 <code>app.js

和 router.js 文件中定义了我们的路由。在 app.js 文件中，我们创建了一个新的 Vue 实例并将路由器与其关联。在 router.js 文件中，我们使用 createRouter 函数来导出一个新的路由实例。

步骤5：在服务器中渲染我们的 Vue 应用程序

我们已经准备好工作了，现在需要在服务器中渲染我们的 Vue 应用程序。我们将使用步骤3中的代码，其中渲染器将 Vue 应用程序渲染为 HTML，最后将其发送回客户端。

现在让我们建立应用程序本身的代码。以下是我们简单的应用程序：

<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

在上面的组件中，我们定义了一个带有文本消息的标题。我们还使用 Vue Router 将组件关联到应用程序路径。

最后，在服务器上启动我们的应用程序。使用以下命令：

node server.js

现在，在浏览器中导航到 http://localhost:3000 应该显示我们的 Vue 应用程序。客户端和服务器端路由都应该正常工作。

结论

在本文中，我们了解了服务器端渲染 (SSR) 的概念。我们还了解了在 Vue 中执行服务器端渲染的步骤。我们了解了为什么在 Vue 中使用 SSR 很重要，以及如何使用 Node.js 和 vue-server-renderer 执行服务器端渲染。现在，你应该能够为你的下一个 Vue 应用程序使用 SSR 来提供更好的性能和用户体验。

위 내용은 Vue에서 서버 측 렌더링을 수행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：사용자 정의 지침을 사용하여 Vue에서 DOM 작업을 구현하는 방법다음 기사：사용자 정의 지침을 사용하여 Vue에서 DOM 작업을 구현하는 방법