| preface

Hello everyone, I eat watermelon but don’t spit the seeds, and it is my goal to explain the front-end content in the most popular words. As I am accustomed to SPA, I will do a preliminary study of SSR and Nuxt3 today. I hope the articles in the following days can help those who are not very familiar with Nuxt3.

Pre – work

What is the SSR

Nuxt is an SSR (server-side rendering) application that distinguishes it from SPA(single-page application), which is widely used on the market. Vue2 uses the new Vue instance to bind to the app root node, Vue3 uses the CreateApp API instance to bind to the app root node, Vue3 uses the CreateApp API instance to bind to the app root node, Vue2 uses the new Vue instance to bind to the app root node, Vue3 uses the CreateApp API instance to bind to the app root node, Vue2 uses the new Vue instance to bind to the app root node, Vue3 uses the CreateApp API instance to bind to the app root node. Through ajax to complete the page rendering, the biggest feature is the appearance of a blank screen. SSR pages are rendered on the server and returned to the browser in HTML text format. The difference between the two can be distinguished by examining the source code of the web page with a browser debugger.

Why use SSR

We have already explained that the difference between SPA and SSR results in different nodes in the HTML template. The search engine will be sensitive to some HTML tags when it crawls information, such as A tag, etc. The technology for search engine optimization is called SEO. The purpose of SEO is to give the applications we build a higher “visibility”, especially for applications like official websites and shopping malls. To this end, different from the single root element of SPA application, can more efficiently respond to the application technology of SEO ————SSR, is what we must.

Experience Nuxt3

Nuxt3 is a new technology that differentiates Nuxt2 from its predecessor, using the Vue3 framework as its base, integrating TS syntax and Rollup’s scripting tools. Make web development more simple and efficient.

Use Nuxt3 to implement Hello World

Preparations:Nuxt3 requires node versions on V14 or V16

Building engineering

npx nuxi init nuxt3-app
Copy the code

Nuxt3 first needs to install the Nuxi tool to initialize a Nuxt3 application

npm install
Copy the code

Go to the nuxt3-app directory and run NPM install to install dependencies

npm run dev -- -o
Copy the code

After the dependency installation is complete, run the NPM run dev command to start the application. The default address is http://localhost:3000

The page is displayed as shown above

Modify the code

Find the app.vue file, which is the main file entry for the application, and replace it with Hellow World

conclusion

The advantages and disadvantages

SPA: The entire Web has only one page and switches between components using routing mechanisms.

Advantages: client rendering, small amount of data transfer, reduced server stress, fast interaction/response speed, complete separation of front and back ends.

Disadvantages: Slow first screen loading, SEO unfriendly, not conducive to search engine snapshot.

SSR: Components or pages are generated by HTML text on the server side and sent to the browser side for rendering.

Advantages: SEO friendly, fast first screen loading speed.

Disadvantages: high number of page reloading, low development efficiency, large amount of data transmission, server pressure. Nuxt3 has optimization methods for all of these problems.

Render the difference

SPA: Json objects are passed through Ajax and views are rendered by the browser. Dynamic rendering data cannot be obtained by checking the source code of web pages, which is not conducive to SEO crawlers.

SSR: Passes complete HTML to the browser rendering view. The first rendering of HTML carries all the data returned by the server, and the source code contains all the data for SEO.

Application scenarios

SPA: high requirements for project performance, fast page loading speed, client rendering requirements, low requirements for SEO. Suitable for ERP system and other management platform.

SSR: high requirements for project SEO and fast response to first opening; Suitable for the official website, mall and other high exposure sites.