Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "sample analysis of server-side rendering in Vue components", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let me lead you to study and learn the article "sample analysis of server-side rendering in Vue components".

Now, front-end separation and client rendering have become the mainstream mode of front-end development, and most front-end applications are suitable for this way of development, especially the development of React, Vue and other component technology, which makes this way deeply rooted in the hearts of the people.

However, in some applications, client-side rendering will encounter some problems:

SEO (search engine Optimization) is required, but there is little information available in the client-side rendered html

The first screen needs to load quickly, but the client rendering usually loads animation or white screen for a long time.

If we can effectively combine the component technology of client rendering (React, Vue, etc.) with the traditional back-end rendering, it will be perfect.

So, this time, let's talk about server-side rendering of Vue components.

According to some existing programs in the community, combined with their own practice, according to the different technical strength of the team, talk about the priority of choosing solutions in different application scenarios.

1. NodeJs rendering middle layer

Generally speaking, the workflow of front and back end is back-end-> front-end.

The traditional backend rendering mode is that the backend is responsible for url, interface, template rendering, etc., and the front end is coupled with the backend. Of course, this way is slowly withdrawing from the stage of history.

The mainstream client rendering is that the backend only provides the interface (if necessary, you can provide the necessary url), the front end and the back end only exchange data through the interface, routing and rendering are completed in the front end.

The workflow for NodeJs rendering middle tier is back-end-> NodeJs-> front-end (NodeJs rendering middle tier is controlled by front-end developers).

In this mode, the backend only provides interfaces, while traditional server-side routing (url) and template rendering are all taken over by the NodeJs layer. In this way, front-end developers are free to decide which components need to be rendered on the server side and which components can be placed on the client side, which are completely decoupled, but retain the function of server-side rendering.

The most mature of this kind of solution is nuxt.js.

If necessary, you can go to the nuxt.js official documentation to see the specific usage and detailed functions.

It should be said that this approach is the most perfect solution at present, but there are also some hidden dangers:

With the addition of a NodeJs middle layer, the application performance will be reduced.

It not only increases the complexity and instability of the architecture, but also reduces the security of applications.

For highly concurrent applications, the NodeJs layer can easily form a bottleneck

The requirements of developers are much higher.

Therefore, this method is suitable for pages that do not have high requirements for concurrency, security and stability, but need to do SEO or the first screen to load quickly.

Of course, if you can adapt the relevant tools yourself, it's a different matter.

two。 Preserve backend template rendering

When the NodeJs middle layer can not be used, and to achieve the purpose of fast response between SEO and the first screen, on the basis of the traditional back-end template rendering, the front-end page needs to be properly modified.

2.1 Fast response on the first screen

The fast response of the first screen means that the data required for the first screen rendering is reached to the browser along with the HTML file, which is currently embedded in the HTML page by the back-end template engine.

Take Java's freemarker template engine as an example:

(in html, the data of the template is obtained in the way of script, so that even if you debug and develop locally, you will not report an error.)

Window.globalData = {stringValue:'${stringValueTplName}', intValue: parseInt ('${intValueTplName}', 10),}

If it is complex Json data or other complex template data (such as list data), you can receive it as follows:

Window.tmpData = {jsonValue: ${jsonValueTplName},}; try {eval (document.getElementById ('tpl-script-json') .innerText);} catch (e) {window.tmpData = {jsonValue: {}};} window.globalData = {jsonValue: window.tmpData.jsonValue,}

In this way, you can use window.globalData data in the component without using another interface to obtain the data, so as to speed up the rendering of the first screen, and local development and debugging will not report errors.

If you use the local data Mock feature, it can also be easily combined with this approach, with a little modification:

Define the local environment and the server environment in the code. The local environment uses Mock data and the server environment uses window.globalData.

See-ajax and see-fetch can be used to simplify development in this way.

In addition, there are some measures to further speed up the first screen rendering:

Minimize the size of the script file loaded on the first screen, and other scripts can be loaded on demand

If necessary, you can inject CSS and JS content into HTML, so that only one request will be initiated and loading speed can be accelerated.

2.2 SEO optimization

On the basis of loading the first screen rendering above, the SEO optimization can also be modified accordingly.

In fact, while client-side rendering has gradually become the mainstream development mode, search engines are also following this change.

Up to now, Google and Bing can index synchronous JavaScript applications very well, that is, even for client rendering, as long as synchronous data rendering (non-Ajax data acquisition, such as template data), the search engine can grab the corresponding HTML fragments.

(domestic Baidu search and 360 search have not followed up yet.)

But in order to be compatible with all search engines, it can be modified like the following:

First, some HTML fragments are rendered by the back-end template engine, which are only crawled by the search engine, not as the page shown to the user.

Then the client renders the synchronous or asynchronous data to show the user the real page

/ / receive synchronization data window.globalData = {stringValue:'${stringValueTplName}', intValue: parseInt ('${intValueTplName}', 10),}

3. Export static html

If the page does not have dynamic data, it is easy to export the component directly to a static html, which is then activated by the client.

You can refer to the official documentation for the specific process.

The better thing about this scheme is the nuxt.js generate static HTML file.

Directory structure:

-pages/ # Page structure directory-index.vue-second.vue -...-nuxt.config.js # configuration file-package.json- dist # default directory for exporting static HTML files

Export a static HTML file

Npx nuxt generate

If you have multiple pages in a project, you can build it like this:

Directory structure:

-nuxt.config.js # configuration file-package.json- src/-home/ # home page-pages/ # page structure directory-index.vue-second.vue -...-dist # default directory for exported static HTML files-about/ # about page-pages/ # page structure directory- Index.vue-second.vue -...-dist # default directory for exporting static HTML files

Export a static HTML file

Npx nuxt generate src/home-c. /.. / nuxt.config.js # home page npx nuxt generate src/about-c. /.. / nuxt.config.js # about page

In addition to the methods mentioned above, there are, of course, other ways, such as:

Use Chrome Headless mode to get the static HTML of a component

The above is all the contents of the article "sample Analysis of Server-side rendering in Vue components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.