Server Side Rendering (Server-side Rendering)
The purpose of SSR is to solve the problem of SEO for single-page applications. It has little impact on general websites, but it is fatal for forum and content websites. Search engines cannot crawl page-related content, which means that users cannot search for relevant information on this website.
principle
Render the html on the server, synthesize the complete html file and output it to the browser.
Applicable scenarios
- The client's network is slower
- The client runs on an old or directly without a JavaScript engine
NUXT
The function is to further encapsulate and then eliminate the steps of building a server-side environment. We only need to follow some rules of this library to easily implement SSR.
It can run on the server as an application, or it can directly compile the entire site into static HTML. In addition, this framework supports automatic routing generation, which is a very good choice for writing display pages.
What can NUXT do for us
- No need to worry about routing division anymore, you just need to create .vue files according to the corresponding folder level
- No need to consider data transfer issues, nuxt will request data asynchronously before the template output (the axios library needs to be introduced), and there is further encapsulation of vuex
- Built-in webpack, eliminating the step of configuring webpack. Nuxt will package the corresponding files according to the configuration.
Installation process
$ npm install -g vue-cli $ vue init nuxt/starter <project-name> $ cd <project-name> $ npm install $ npm run dev
It will listen to changes in the pages directory, and there is no need to restart the service when adding a new page.
The team from Zeit built on React's foundation and component model, and also provided a key extension: By using a component lifecycle hook method called getInitialProps(), the framework is able to initial rendering on the server and continue rendering on the client if needed. However, this advanced feature is additionally provided by a small but powerful framework.
Next provides a very rich ecological environment, especially its example, which contains source code in various situations, making it easy for learners to build a multi-function Next framework, with basically all the things that the client has and the server.
- The various configurations of webpack, Next integrates many configurations of webpack, hot updates are a must-have, and it also supports the provided methods to import your own defined configurations.
- You can use less, scss, style-in-Component, css and other styles to write.
- Supports redux, redux-saga, or not.
- Support for various images is included in webpack.
- Supports custom babelrc configuration.
- Support for react versions is also constantly updated during maintenance of maintainers.
- Supports preact.
It is simple and easy to use, just like writing PHP, one file and one page, but the disadvantages are also obvious. In fact, it by changing the normal code writing habits of React + webpack to bypass the pit of front-end and back-end isomorphism, so some new problems have been introduced:
- Static files such as pictures can only be placed in the static directory and cannot be introduced through require, which means that there is no way to modular management through webpack. If each component has pictures that depend on, it can only be placed in the static directory, and it is difficult to implement version management to control the browser cache.
- Styles cannot be modularly managed through webpack, and can only be embedded or directly inlined through style tags.
Simply put, it is very suitable for quickly building simple sites, but the degree of freedom is not high, and React components with styles or pictures cannot be used directly. My personal opinion is a framework that exchanges freedom and versatility for ease of use.
Other methods
Google can crawl and render a pure js dynamically generated website normally, and upload sitemap.
Directly generate static pages distributed by CDN. Some new technologies can also support pwa in static gen, such as gatsbyjs.
Nuggets is a user who is not logged in to use SSR, which is a good idea.
You need to distinguish when to use mvvm. mvvm is actually a modelview that is very convenient to define various logic of the page and change page data. If it is a traditional website and there is no logic in the front-end, there is no need to go to mvvm
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.