SSR (server-side rendering) brings two core advantages to SPA sites:

  • Better SEO
  • Faster first screen rendering

Many UNI-App developers are actively experimenting with SSR, but most give up without getting started due to the high technical barriers.

The official website of VUe. js describes the SSR chapter as follows:

This tutorial will be very in-depth and assumes that you are already familiar with vue.js itself and have decent experience with Node.js and Webpack.

Therefore, many UNI-App developers in the community have called on DCloud to officially provide a simpler, out-of-the-box UNI-App SSR solution.

The Uni-App team recently released out-of-the-box SSR support based on Vue 3.0 + uniCloud after completing a platform-wide upgrade to Vue 3.0. We call it the uniCloud VERSION of SSR.

Here is a uniCloud version of SSR example: news.dcloud. IO is a news system based on uni-App & uniCloud. A review of the elements reveals that the news list data is contained in the source code delivered by the server rather than the Ajax request from the client.

UniCloud SSR is relatively easy to implement and has deep integration with HBuilderX. You can get started quickly by following these steps:

Step 1: Adapt the code to the server running environment

  1. Life cycle:uni-appThe lifecycle hook function in the pageonLoad, components,beforeCreate 和 createdWill be called during server-side rendering (SSR), you need to check the timing of the data retrieval in the original project code;
  2. Platform specific API: if directly used aswindow 或 documentBrowser-only global variables are in the cloudNode.jsAn error was thrown when executing in.
  3. Data prefetch:<uniCloud-db>Components naturally support SSR, no need to adjust the code, recommended use<uniCloud-db>Query the database. If you don’t use it<uniCloud-db>Component is availableserverPrefetchTo achieve server-side data acquisition, using@dcloudio/uni-appTo provide thessrRefOr vue.js officialVuexTo achieve state synchronization;

More details and sample code, reference: uniapp.dcloud.net.cn/collocation…

Step 2: Compile and publish

Via HBuilderX’s distribution menu -> website PC-Web or mobile H5, check SSR, check deploy compiled resources to uniCloud front-end Web hosting

This process, which is as simple as clicking a button for developers, actually HBuilderX does a lot of work behind the scenes, including:

  1. compileuni-appProject, generated separatelyServer BundleandClient Bundle
  2. willClient BundleUpload to uniCloud front-end web hosting
  3. willServer BundleAs auni-ssrCloud function resources, compiled and uploaded to uniCloud service space

Step 3: Configure the URL path of the UNI-SSR cloud function

Bind a custom domain name to the UNI-SSR cloud function, then access the domain name in a browser, and you can get the server rendered page.

At this point, the uniCloud VERSION of SSR development and deployment is over, isn’t it easier than before?

conclusion

Vue. Js official website and many documents in the community, when introducing SSR, will mention that SSR is a double-edged sword, the advantages and disadvantages are very obvious (2 excellent and 3 lack, the lack is greater than the excellent). But after HBuilderX & uniCloud added SSR, it perfectly solved part of the shortcomings of SSR, turned it from lack to good, into 4 good and 1 lack, realizing the good than the lack. The specific comparison is as follows:

Welcome to uniCloud SSR!

For more information on the UNI-APP SSR program, click below to read the article.