Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to do Serverless SSR". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian slowly and deeply to study and learn "how to do Serverless SSR" together.

Although making a Serverless SSR is not a problem like putting an elephant in a refrigerator, it also makes many developers daunting_because there are too many tutorials on SSR and Serverless on the Internet, which are often very long and many steps. Let beginners have no way to start, even if they learn it again, they may encounter such problems, which takes a lot of effort.

But now, developers can have a "refrigerator elephant" way to complete a Serverless SSR:

You need to have an SSR frame: Next.js

You need to have a Serverless framework: Serverless Framework

Then, simply load your SSR framework into Serverless Framework in one step!

Follow me and complete a Serverless SSR pattern in a few minutes:

First, you need to have an SSR framework, below we create and initialize a Next.js project.

We create a Next.js project locally and initialize:

$ mkdir serverless-next && cd serverless-next$ npm init next-app src

Then, you need to have a Serverless framework, the following code will install serverless cli globally via npm

$ npm install -g serverless

Create a serverless.yml file in the project root directory:

$ touch serverless.yml

The following configuration is made in it:

component: nextjs # (required) Component name, here nextjsname: nextjsDemo # (required) Instance name org: orgDemo # (optional) Used to record organization information, default value is your Tencent Cloud (Cloud) account appidapp: appDemo # (optional) The next.js application name stage: dev # (optional) Used to distinguish environment information, default value is devinputs: src: ./ src functionName: nextjsDemo region: ap-guangzhou runtime: Nodejs10.15 exclude: - .env apigatewayConf: protocols: - http - https environment: release

More configuration instructions: github.com/serverless-components/tencent-nextjs/blob/v2/docs/configure.md

Finally, load your SSR framework into a Serverless framework and deploy

$ npm run build

Run the following command in the directory under serverless.yml file to deploy:

$ sls deploy

After deployment, scan QR code to authorize login to Tencent Cloud (Cloud)

After successful deployment, the command line prints the deployment address of Next.js (see red box). Copy it into your browser and open it, and we'll see the welcome page for Next.js. Here, you have successfully deployed Serverless SSR!

View and manage your SSR projects

In the previous steps, we completed the Serverless deployment of the Next.js framework. So how do I view and manage the Next.js project I just deployed?

Tencent Cloud Serverless provides a one-stop Dashboard for visual project management and follow-up operations. Visit address: serverless.cloud.tencent.com

As you can see, the Next.js project we just deployed is already in Dashboard. Click on the item to view the detailed information of the item and perform subsequent operations.

Thank you for reading, the above is the content of "how to do Serverless SSR", after the study of this article, I believe everyone has a deeper understanding of how to do Serverless SSR, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.