看过这么多静态网站托管,这么快的页面渲染还是头一次

很多时候我们都希望首屏速度快,SEO友好,那么相比于客户端渲染的 SPA,SSR 在 SEO 方面有明显的优势,在之前的 Next.js 的文章中,就有同学说要 Next.js 的 SSR,现在,它来了。

环境准备

  1. 安装node.js
  2. 安装云开发工具@cloudbase/cli
npm i @cloudbase/cli

搭建云环境

1.首先在打开云开发并新建环境

看过这么多静态网站托管,这么快的页面渲染还是头一次

2.创建完成后会自动进入环境初始化阶段,这个阶段大概持续2-3分钟。

看过这么多静态网站托管,这么快的页面渲染还是头一次

初始化项目

当环境初始化完成后我们就可以进行初始化项目啦~

  1. 使用 CLI 工具初始化一个云开发项目
tcb init
? 选择关联环境 xxx - [xxx-xxx]
? 请输入项目名称 nextSSR
? 选择模板语言 Node? 选择云开发模板 Hello World
✔ 创建项目 cloudbase-next 成功!

初始化结束后的项目目录如下:

nextSSR
  │  .editorconfig
  │  .gitignore
  │  a.txt
  │  cloudbaserc.js
  │  README.md
  └─functions
      └─app
           index.js

进入到项目中:

cd nextSSR

然后在 functions文件夹下创建next.js应用:

 npm init next-app functions/next

等待初始化完成后,会在 functions文件夹下会多出一个next的文件夹,这个便是我们的next应用。

配置next

1.先我们进入到next项目的根目录

cd functions/next

2.然后安装severless-http

npm install --save serverless-http

在next应用的根目录下 项目根目录/functions/next应用根目录 新建index.js,并将下列代码添加进去

// 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()
    return serverless((req, res) => {
        handle(req, res)
    })(...args)
}

3.在next应用的根目录中新建next.config.js并将下列代码拷入

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

这样我们的项目就配置差不多了。

项目的构建与发布

首先我们进入到functions/next目录中执行

$ npm run build

然后回到项目根目录中,运行cli命令将代码上传到云函数

$ tcb functions:deploy next

随后,我们创建一个http服务

使用如下命令

cloudbase service:create -f next -p /next

-f表示HTTP Service路径绑定的云函数名称

-p表示Service Path,必须以"/"开头

$ cloudbase service:create -f next -p /next
✔ 云函数 HTTP service 创建成功!

看过这么多静态网站托管,这么快的页面渲染还是头一次

随后我们便可以通过点击这个地址进行访问啦。

那我们上传到了哪里了呢?我们进入到云开发管理页面:

看过这么多静态网站托管,这么快的页面渲染还是头一次

我们看到在云函数的函数代码中可以找到我们刚才上传的文件。

我们点击预览即可浏览页面啦~在函数配置可以通过触发云函数来进行浏览我们的页面

看过这么多静态网站托管,这么快的页面渲染还是头一次

看过这么多静态网站托管,这么快的页面渲染还是头一次

效果对比

我们通过对比查看

  • 通过SSR渲染的页面加载速度

看过这么多静态网站托管,这么快的页面渲染还是头一次

  • 非SSR的加载速度

看过这么多静态网站托管,这么快的页面渲染还是头一次

可以看到有明显的速度提升!

公众号:腾讯云云开发

腾讯云云开发:https://cloudbase.net

云开发控制台:https://console.cloud.tencent.com/tcb?from=12304


更多精彩
扫描二维码了解更多

看过这么多静态网站托管,这么快的页面渲染还是头一次

上一篇:水牛的es6日记第二天【箭头函数Arrow Functions】


下一篇:了解 Azure 中的无服务器计算