Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

Nuxt3- Road to Learning 01, Understanding CSR-SSR

The introduction

This series will introduce and begin learning about Nuxt3 with my understanding.

The middle will insert their own links to the messy knowledge points.

introduce

We know that after Vue3 was released, there was a rush to learn Vue3.

After we had a good understanding of Vue3, we tried to start the project through Vue3. Then we tried to upgrade the project in Vue2 to Vue3 and add TS from it to further constrain the specification of the project.

Nuxt3 is a hybrid development framework based on Vue3

And what do we mainly do with Nuxt3? To develop our server-side rendering also known as SSR rendering.

By the way, if there is a server-side SSR rendering, there will be a client-side rendering called CSR. What are the differences and connections between the two? Here are the explanations.

CSR and SSR

The difference between client rendering CSR and server rendering SSR.

CSR

Our Vue3 project, packaged with plug-ins or Vite tools without any WebPack installed, generates a dist folder directory as follows. Inside is the index.html and compressed CSS and JS ICONS.

We can also look at the body tag in the index.html file and see that there is only one tag

.

  • Here’s the idea

    Notice that the script tag on the page has a crossorigin attribute. What does it do?

We all know that Vue3 does this by mounting the page component app. vue to the Dom node whose ID is App.

  • Here’s another point:

    Why do we need to duplicate the mount method in createApp()?

Thus, the client rendering process of the CSR is as follows:

  • When we access a website through a URL request, the server returns this index.html file

  • The client browser loads the parsed HTML file

    • It was found that there was only one tag with the ID app in the body tag.

    • The page will be blank

  • Then it encounters the script reference JS file and requests the server again to get the JS file.

  • The client then executes the JS file code, and then the page will display information and relevant data for rendering.

SSR

The process of server rendering SSR is as follows:

  • The server still returns the index.html file when we request access to the site through the URL

    • However, the contents of the tags and data in our index. HTML will be populated by a server

    • And send it to the client browser

  • The client receives the HTML file and parses it.

    • It turns out there’s something in there

    • It is equivalent to reducing the number of processes required to request and parse the JS file.

    • Reduces the amount of time a white screen appears

Note: The server rendering SSR described here is a concept that will be implemented step by step through Nuxt3.

conclusion

The advantage of SSR is to take the rendering that should be handled by CSR and hand it over to you.

  • Advantages:

    • Users in the request, will reduce the existence of a page blank screen time, if this time coupled with caching, lazy loading, CDN and other optimization means, will achieve second open.

    • SEO friendly

  • Disadvantages:

    • The pressure on the server side increases

    • Learning costs will be higher (if you are a god, that is another topic)