Pre-rendered vue.js application in node and laravel projects
Server-side rendering is very popular right now. But it's not without its flaws. Pre-rendering is an alternative and may even be better in some cases. Let's take a look at how to pre-render a vue.js application.
In this article, we will explore how prerendering works with vue.js and look at two examples: one a node.js project and one a laravel project.
Recommended related tutorials: node js tutorial, vue.js tutorial, laravel tutorial
##1. Server-side rendering
One disadvantage of JavaScript-based applications is that the page the browser receives from the server is basically empty. The DOM cannot be built until the Javascript is downloaded and run. This means users have to wait longer before seeing anything. It can also have an impact on SEO if the crawler cannot quickly view the page content. Server-side rendering (SSR) overcomes this problem by rendering the application on the server so that the client receives the full DOM content when the page is loaded (even before the Javascript is run). Instead of the browser receiving this from the server:<head> ... </head> <body> <div id="app"> <!--This is empty, Javascript will populate it later--> </app> </body>
<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>Server Side Rendering Disadvantages
- Your application needs to be executable on the server, so you need to design your code to be "universal", that is, it can be browsed Works on server and node servers.
- Your application will run on every request to the server, adding a traditional load and slow responses. Caching can partially alleviate this situation.
- You can only do SSR with Node.js. If your main backend is Laravel, Django, etc. then you have to run a node server on the main backend to handle SSR.
2. Pre-rendering
There is another One way to solve the empty page problem: pre-rendering. Using this approach, you run the application before deploying it, capture the page output and replace the HTML file with the captured output.
Advantages of pre-rendering
No additional server load, so Faster and cheaper than SSR
Simpler production setup and simpler application code, therefore Less error-prone
No Node.js production server required
Disadvantages of pre-rendering
Not good for pages that display changing data (such as tables) work.
#Does not apply to pages with specific user content, such as account pages containing the user's personal information. However, these types of pages are not that important to pre-render anyway; these are our main, frequently used pages that we want to serve fast.
#You need to prerender each route individually in your application.
Chart
| Client-side rendering only | Server-side rendering | Pre-rendering | |
|---|---|---|---|
| Production Server | Any/none | Node.js only | Any/none |
| Additional server load | No | Yes | No |
| Personalized user data? | N/A | Yes | No |
三、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('html-webpack-plugin');
module.exports.plugins.push(
new HtmlWebpackPlugin({
template: './index.html',
inject: false
}),
);现在我们改变了我们的Webpack公共路径，因为index.html现在和其他静态资产在同一个文件夹中:
output: {
path: path.resolve(__dirname, './dist'),
filename: 'build.js',
publicPath: '/', // was originally 'dist'
},由于路径的变化，我们还需要将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('prerender-spa-plugin');
module.exports.plugins.push(
new PrerenderSpaPlugin(
path.join(__dirname, './dist'),
[ '/' ]
)
);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('/', function () {
return File::get(public_path() . '/index.html');
});这实际上指向我们的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('html-webpack-plugin');
module.exports.plugins.push(
new HtmlWebpackPlugin({
template: Mix.Paths.root('resources/views/index.html'),
inject: false
});
);第4步：测试Weback生成版本
现在让我们为生产和服务:
$ npm run production $ php artisan serve
不过，在运行应用程序时，浏览器中可能会出现错误，因为我们从未为window.Laravel.csrfToken设置值。对于这个简单的例子，注释掉会更快，所以像这样修改resources/assets/js/bootsta .js:
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
// 'X-CSRF-TOKEN': window.Laravel.csrfToken;
};第5步：预渲染应用程序
我们现在需要在webpack配置中使用prerender spa插件来执行预渲染。确保它在HTML网页包插件之后。
var PrerenderSpaPlugin = require('prerender-spa-plugin');
module.exports.plugins.push(
new PrerenderSpaPlugin(
Mix.output().path,
[ '/' ]
)
);现在我们可以做一个生产构建:
$ 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'm an example component!
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/js/app.js"></script>
</body>
</html>相关推荐：
更多编程相关知识，请访问：编程入门！！
The above is the detailed content of Pre-rendered vue.js application in node and laravel projects. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
Is vue.js hard to learn?
Apr 04, 2025 am 12:02 AM
Vue.js is not difficult to learn, especially for developers with a JavaScript foundation. 1) Its progressive design and responsive system simplify the development process. 2) Component-based development makes code management more efficient. 3) The usage examples show basic and advanced usage. 4) Common errors can be debugged through VueDevtools. 5) Performance optimization and best practices, such as using v-if/v-show and key attributes, can improve application efficiency.
Is Vue used for frontend or backend?
Apr 03, 2025 am 12:07 AM
Vue.js is mainly used for front-end development. 1) It is a lightweight and flexible JavaScript framework focused on building user interfaces and single-page applications. 2) The core of Vue.js is its responsive data system, and the view is automatically updated when the data changes. 3) It supports component development, and the UI can be split into independent and reusable components.
Vue.js vs. React: Project-Specific Considerations
Apr 09, 2025 am 12:01 AM
Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.
How to get the return code when email sending fails in Laravel?
Apr 01, 2025 pm 02:45 PM
Method for obtaining the return code when Laravel email sending fails. When using Laravel to develop applications, you often encounter situations where you need to send verification codes. And in reality...
How to implement the custom table function of clicking to add data in dcat admin?
Apr 01, 2025 am 07:09 AM
How to implement the table function of custom click to add data in dcatadmin (laravel-admin) When using dcat...
Laravel Redis connection sharing: Why does the select method affect other connections?
Apr 01, 2025 am 07:45 AM
The impact of sharing of Redis connections in Laravel framework and select methods When using Laravel framework and Redis, developers may encounter a problem: through configuration...
Laravel multi-tenant extension stancl/tenancy: How to customize the host address of a tenant database connection?
Apr 01, 2025 am 09:09 AM
Custom tenant database connection in Laravel multi-tenant extension package stancl/tenancy When building multi-tenant applications using Laravel multi-tenant extension package stancl/tenancy,...
Laravel Eloquent ORM in Bangla partial model search)
Apr 08, 2025 pm 02:06 PM
LaravelEloquent Model Retrieval: Easily obtaining database data EloquentORM provides a concise and easy-to-understand way to operate the database. This article will introduce various Eloquent model search techniques in detail to help you obtain data from the database efficiently. 1. Get all records. Use the all() method to get all records in the database table: useApp\Models\Post;$posts=Post::all(); This will return a collection. You can access data using foreach loop or other collection methods: foreach($postsas$post){echo$post->
