看過這麼多靜态網站托管，這麼快的頁面渲染還是頭一次

首屏速度快+SEO友好，你值得擁有

很多時候我們都希望首屏速度快，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

☁

更多精彩

掃描二維碼了解更多