Most of the time we all hope that the first screen speed, SEO friendly, then compared with the client rendering SPA, SSR has obvious advantages in SEO, in the previous Next. Js article, some students said to Next. Js SSR, now, it comes.

Environment to prepare

  1. Installation node. Js
  2. Install the cloud development tool @cloudBase/CLI
npm i @cloudbase/cli
Copy the code

Building a Cloud Environment

1. Start cloud development and create a new environment

2. The system automatically starts the environment initialization phase, which lasts about 2 to 3 minutes.

Initialize the project

When the environment is initialized, we can initialize the project

  1. Initialize a cloud development project using CLI tools
tcb init ? Select the associated environment XXX - [xxx-xxx]? Please enter project name nextSSR? Select template language Node? Select Hello World blue stocking to create project cloudbase-Next.Copy the code

The project directory after initialization is as follows:

NextSSR │. Editorconfig │. Gitignore │ a.t xt │ cloudbaserc. Js │ README. Md └ ─functions└ ─ app index. JsCopy the code

Enter the project:

cd nextSSR
Copy the code

Then create the next. Js application in the functions folder:

 npm init next-app functions/next
Copy the code

After initialization, there will be a next folder in the Functions folder, which will be our Next application.

Configuration next

1. Let’s go to the root directory of the next project

cd functions/next
Copy the code

2. Then install Severless-HTTP

npm install --save serverless-http
Copy the code

Create index.js in the project root /functions/next in the root directory of the next application and add the following code to it

// index.js
const next = require('next')
const serverless = require('serverless-http')

const app = next({ dev: false })
const handle = app.getRequestHandler()

exports.main = async function(... args) { await app.prepare()returnserverless((req, res) => { handle(req, res) })(... args) }Copy the code

3. Create next. Config. js in the root directory of the Next app and copy the following code into it

// next.config.js
module.exports = {
    assetPrefix: '/next'
}
Copy the code

So our project is pretty much configured.

Project construction and release

First we go to the functions/ Next directory to execute

$ npm run build
Copy the code

Then go back to the project root directory and run the CLI command to upload the code to the cloud function

$ tcb functions:deploy next
Copy the code

Next, we create an HTTP service

Use the following command

cloudbase service:create -f next -p /next
Copy the code

-f indicates the cloud function name of the HTTP Service path binding

-p indicates the Service Path and must start with a slash (/)

$ cloudbase service:create -fNext -p /next ➤ HTTP service created successfully!Copy the code

We can then access it by clicking on this address.

So where did we upload it to? Enter the cloud Development Management page:

We see that the file we just uploaded can be found in the function code of the cloud function.

We can click preview to browse the page ~ in the function configuration can trigger the cloud function to browse our page

Effect of contrast

Let’s look at it by comparison

  • Page loading speed via SSR rendering

  • Non-ssr loading speed

You can see a noticeable speed increase!

Public account: Tencent Yunyun Development

Tencent Cloud development: Cloudbase.net

The development of cloud console: console.cloud.tencent.com/tcb?from=12…

Win more wonderful scan QR code to learn more