노드 및 laravel 프로젝트의 사전 렌더링된 vue.js 애플리케이션-View.js-php.cn

노드 및 laravel 프로젝트의 사전 렌더링된 vue.js 애플리케이션

서버 측 렌더링은 현재 매우 인기가 있습니다. 그러나 결함이 없는 것은 아닙니다. 사전 렌더링은 대안이며 경우에 따라 더 나을 수도 있습니다. vue.js 애플리케이션을 사전 렌더링하는 방법을 살펴보겠습니다.

이 기사에서는 vue.js에서 사전 렌더링이 어떻게 작동하는지 살펴보고 node.js 프로젝트와 laravel 프로젝트의 두 가지 예를 살펴보겠습니다.

추천 관련 튜토리얼: node js tutorial, vue.js tutorial, laravel tutorial

1. 서버 측 렌더링

자바스크립트 기반 애플리케이션의 단점은 브라우저가 서버로부터 수신된 페이지는 기본적으로 비어 있습니다. Javascript가 다운로드되어 실행될 때까지 DOM을 구축할 수 없습니다.

이는 사용자가 아무것도 보기 전에 더 오래 기다려야 함을 의미합니다. 크롤러가 페이지 콘텐츠를 빠르게 볼 수 없는 경우 SEO에 영향을 미칠 수도 있습니다.

서버 측 렌더링(SSR)은 페이지가 로드될 때(Javascript가 실행되기 전이라도) 클라이언트가 전체 DOM 콘텐츠를 수신할 수 있도록 서버에서 애플리케이션을 렌더링하여 이 문제를 극복합니다.

서버에서 이를 수신하는 브라우저 대신:

<head> ... </head>
<body>
<div id="app">
  <!--This is empty, Javascript will populate it later-->
</app>
</body>

로그인 후 복사

전체 콘텐츠 페이지를 수신하는 SSR 사용:

<head> ... </head>
<body>
<div id="app">
  <div class="container">
    <h1>Your Server-Side Rendered App</h1>
    <div class="component-1">
      <p>Hello World</p>
      <!--etc etc. This was all rendered on the server-->
</app>
</body>

로그인 후 복사

서버 측 렌더링 단점

애플리케이션이 서버에서 실행 가능해야 합니다. 따라서 코드를 "범용"으로 설계해야 합니다. 즉, 브라우저와 노드 서버 전반에서 작동합니다.
애플리케이션은 서버에 대한 모든 요청에 대해 실행되어 기존 로드와 느린 응답을 추가합니다. 캐싱을 사용하면 이러한 상황을 부분적으로 완화할 수 있습니다.
SSR은 Node.js로만 할 수 있습니다. 메인 백엔드가 Laravel, Django 등인 경우 SSR을 처리하려면 메인 백엔드에서 노드 서버를 실행해야 합니다.

2. 사전 렌더링

빈 페이지 문제를 해결하는 또 다른 방법이 있습니다: 사전 렌더링입니다. 이 접근 방식을 사용하면 애플리케이션을 배포하기 전에 실행하고, 페이지 출력을 캡처하고, HTML 파일을 캡처된 출력으로 바꿉니다.

라이브 서버가 아닌 개발 환경에 사전 배포된다는 점만 제외하면 기본적으로 SSR과 개념이 동일합니다.

사전 렌더링은 일반적으로 PhantomJS와 같은 헤드리스 브라우저를 사용하여 수행되며 Webpack, Gulp 등을 사용하여 빌드 흐름에 통합될 수 있습니다.

사전 렌더링의 장점

추가 서버 로드가 없어 SSR보다 빠르고 저렴함
프로 cedural 코드이므로 덜 발생합니다. 오류
Node.js 프로덕션 서버가 필요하지 않음

사전 렌더링의 단점

.g. 테이블), 그렇지 않습니다. 잘 작동하지 않습니다.
사용자 개인정보가 포함된 계정 페이지 등 특정 사용자 콘텐츠가 포함된 페이지에는 적용되지 않습니다. 그러나 이러한 유형의 페이지는 사전 렌더링에 그다지 중요하지 않으며 빠르게 제공하고자 하는 자주 사용되는 주요 페이지입니다.
앱에서 각 경로를 개별적으로 사전 렌더링해야 합니다.

비교표

	클라이언트 렌더링 전용	서버 렌더링	사전 렌더링
프로덕션 서버	Any/none	Node.js 전용	Any/none
추가 서버 로드	아니요	예	아니요
개인화된 사용자 데이터?	N/A	예	아니요

三、Vue.js预渲染示例

让我们做一个简单的例子来预渲染一个vue.js应用程序，一次在node.js环境中，一次在laravel环境中。

在这些示例中，我们将使用webpack和pre render spa插件来执行预渲染。

1、Vue和Node

第1步：项目安装

我们将使用vue-cli和webpack-simple模板。

$ vue init webpack-simple vue-node-pr-test
$ cd vue-node-pr-test
$ npm install

로그인 후 복사

我们还需要另外三个模块，后面还有解释。

$ npm install --save-dev http-server html-webpack-plugin prerender-spa-plugin

로그인 후 복사

第2步：在Webpack构建中包含index.html

Webpack -simple模板在Webpack构建输出中不包含index.html文件。然而，当我们预渲染应用程序时，我们需要覆盖我们的索引。因此，让我们将它添加到输出中，以免破坏原始的。

在我们的Webpack .config.js文件中使用html-webpack-plugin将文件包含在Webpack构建中:

var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);

module.exports.plugins.push(
  new HtmlWebpackPlugin({
    template: &#39;./index.html&#39;,
    inject: false
  }),
);

로그인 후 복사

现在我们改变了我们的Webpack公共路径，因为index.html现在和其他静态资产在同一个文件夹中:

output: {
  path: path.resolve(__dirname, &#39;./dist&#39;),
  filename: &#39;build.js&#39;,
  publicPath: &#39;/&#39;, // was originally &#39;dist&#39;
},

로그인 후 복사

由于路径的变化，我们还需要将index.html中的更改为。

第3步：测试Webpack生成版本

现在我们建造:

$ npm run build

로그인 후 복사

我们的dist文件夹应该是这样的:

- dist
-- build.js
-- index.html
-- logo.png

로그인 후 복사

如果我们检查dist/index.html，它会是这样的:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-node-pr-test</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="/build.js"></script>
  </body>
</html>

로그인 후 복사

现在我们可以使用http-server并从dist文件夹中提供应用程序。默认情况下，它将运行在localhost:8080:

$ ./node_modules/.bin/http-server ./dist

로그인 후 복사

第4步：预渲染应用程序

现在我们的index.html文件在Webpack构建中，我们可以使用预呈现的HTML更新它。

首先，我们需要在webpack配置中添加prerender-spa-plugin。确保它在html-webpack-plugin之后。

var PrerenderSpaPlugin = require(&#39;prerender-spa-plugin&#39;);

module.exports.plugins.push(
  new PrerenderSpaPlugin(
    path.join(__dirname, &#39;./dist&#39;),
    [ &#39;/&#39; ]
  )
);

로그인 후 복사

PrerenderSpaPlugin的第一个参数是index.html文件的位置，第二个参数是应用程序中的路由列表。在这个例子中，我们只有一条路径。

现在我们再次建造：

$ npm run build

로그인 후 복사

我们的构建将比以前花费更长的时间，因为预渲染插件正在做的事情:

它创建一个Phantom JS实例并运行应用程序
获取DOM的快照
将快照输出到生成文件夹中的HTML文件

它会对每条路径重复这个过程，所以如果你有很多页面，构建应用程序可能需要相当长的时间。

在建立后，我们的dist/index.html现在应该包括所有预渲染的HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>prerender-test</title>
  <style type="text/css">#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px
  }

  h1, h2 {
    font-weight: 400
  }

  ul {
    list-style-type: none;
    padding: 0
  }

  li {
    display: inline-block;
    margin: 0 10px
  }

  a {
    color: #42b983
  }</style>
</head>
<body>
<div id="app"><img src="/logo.png?82b9c7a5a3f405032b1db71a25f67021">
  <h1></h1>
  <h2>Essential Links</h2>
  <ul>
    <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
    <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
    <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
    <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
  </ul>
  <h2>Ecosystem</h2>
  <ul>
    <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
    <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
    <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
    <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
  </ul>
</div>
<script type="text/javascript" src="/build.js"></script>

</body>
</html>

로그인 후 복사

2、Vue 和 Laravel

如果您跳过了Vue和Node示例，我建议您先回去阅读它，因为它包含了对任何常见步骤的更全面的解释。

第1步：项目安装

首先，我们将设置一个新的Laravel项目。

$ laravel new vue-laravel-pr-test
$ cd vue-laravel-pr-test
$ npm install

로그인 후 복사

我们还将增加两个我们需要的NPM模块:

$ npm install --save-dev html-webpack-plugin prerender-spa-plugin

로그인 후 복사

第2步:提供一个普通的HTML文件

默认情况下，Laravel在根URL处提供Blade模板文件。为了使示例简单，我们将使用我们将在resources / views / index.html创建的以下纯HTML文件替换它

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Laravel</title>
    <link rel="stylesheet" href="/css/app.css">
<body>
<div id="app">
  <example></example>
</div>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>

로그인 후 복사

现在，我们需要在根路径上提供该文件，而不是刀片服务器模板。将route /web.php更改为:

Route::get(&#39;/&#39;, function () {
  return File::get(public_path() . &#39;/index.html&#39;);
});

로그인 후 복사

这实际上指向我们的build文件夹，我们很快就会生成它。

第3步：将HTML文件添加到构建中

像在节点示例中一样，我们希望在Webpack构建中包含index.html，以便稍后使用预呈现的HTML覆盖它。

我们需要做一些Webpack配置。在本例中，我使用的是Laravel 5.4，它使用的是Laravel Mix。Mix没有提供本地webpack配置文件，因为它使用自己的默认文件，所以让我们从laravel-mix模块复制一个配置文件:

$ cp ./node_modules/laravel-mix/setup/webpack.config.js .

로그인 후 복사

我们还需要让我们的NPM生产脚本指向这个配置文件，因此编辑包。json，并将生产脚本更改为:

cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js 
--progress --hide-modules --config=webpack.config.js

로그인 후 복사

现在我们将html-webpack-plugin添加到webpack.config.js文件中。把这个添加到文件的底部上面的混合定型部分:

var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);

module.exports.plugins.push(
  new HtmlWebpackPlugin({
    template: Mix.Paths.root(&#39;resources/views/index.html&#39;),
    inject: false
  });
);

로그인 후 복사

第4步：测试Weback生成版本

现在让我们为生产和服务:

$ npm run production
$ php artisan serve

로그인 후 복사

不过，在运行应用程序时，浏览器中可能会出现错误，因为我们从未为window.Laravel.csrfToken设置值。对于这个简单的例子，注释掉会更快，所以像这样修改resources/assets/js/bootsta .js:

window.axios.defaults.headers.common = {
  &#39;X-Requested-With&#39;: &#39;XMLHttpRequest&#39;
  // &#39;X-CSRF-TOKEN&#39;: window.Laravel.csrfToken;
};

로그인 후 복사

第5步：预渲染应用程序

我们现在需要在webpack配置中使用prerender spa插件来执行预渲染。确保它在HTML网页包插件之后。

var PrerenderSpaPlugin = require(&#39;prerender-spa-plugin&#39;);

module.exports.plugins.push(
  new PrerenderSpaPlugin(
    Mix.output().path,
    [ &#39;/&#39; ]
  )
);

로그인 후 복사

现在我们可以做一个生产构建:

$ npm run production

로그인 후 복사

如果您选中build文件夹，dist/index.html现在应该如下所示，并使用预渲染HTML完成:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Laravel</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app">
    <div>
        <div>
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div>Example Component</div>
                    <div>
                        I&#39;m an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/app.js"></script>
</body>
</html>

로그인 후 복사