不改一行代碼快速部署Next.js博客到騰訊云Serverless SSR,next js快速入門

不改一行代碼快速部署Next.js博客到騰訊云Serverless SSR

近期，騰訊云Serverless團隊發布了Serverless SSR產品，支持將Next.js，Nuxt.js等框架的應用快速部署和托管，那么，今天我們就通過一個Next.js官方案例一起，來了解下該產品有哪些特性吧

一、寫在前面：Next.jsSSR是什么關系

ServerSideRendering（SSR）泛指服務端渲染的技術，指的是在Server端將HTML渲染好，再返回給Client端。并且SSR是在對頁面每個請求發出時，都會重新抓取和生成頁面（和SSG靜態頁面生成相比，是更加動態的渲染方式）。

Next.js是一個輕量級的React服務端渲染應用框架。支持多種渲染方式，包括客戶端渲染、靜態頁面生成、服務端渲染。使用Next.js可以方便的實現SSR，即頁面的服務端渲染。

二、服務端渲染SSR（Server Side Render）

Next.js框架支持客戶端渲染CSR(Client Side Render)，靜態頁面生成SSG（Static Site Generation）以及服務端渲染SSR(Server Side Render)。用戶可以針對不同的場景，選用不同的渲染方式。

由于SSR可以動態渲染頁面并加載內容，因此主要有以下兩個優勢：

·首屏開啟時間更快，SEO更加友好

·支持生成用戶相關內容，不同用戶結果不同

在Next.js框架中，SSR的實現主要通過getServerSideProps方法獲取內容，之后在后端調用renderToString()的方法，把整個頁面渲染成字符串。

三、基于Next.js SSR的博客系統搭建

接下來我們可以通過實戰來驗證下效果。通過Next.js官方的博客搭建教程，可以很詳細的了解到框架的使用原理，并且涉及了豐富的功能點，如下所示：

·搭建單頁應用

·頁面之間相互導航

·Next.js對靜態資源，元數據和CSS的處理

·預加載（SSR和SSG）及數據獲取

·動態頁面的路由

·API路由（Serverless函數）

·和Github Actions等CI打通

接下來，我們可以將這個博客快速部署到Serverless SSR平臺中，由于教程前半部分主要是對Next.js框架的教學，本文中直接將博客倉庫代碼下載并部署，步驟如下。

1.【下載代碼】通過下列命令將代碼下載到本地，并進行少許更改。

npx createnextapp nextjsblogusenpmexamplehttps://github.com/vercel/nextlearnstarter/tree/master/basicsfinal

·在public/images/profile.jpg中將圖片換為自己的頭像

·在components/layout.js中，把const name=[Your Name]替換成自己的名字

·在pages/index.js中，把p[Your Self Introduction]/p改成自己的個人簡介

2.【新建】登錄騰訊云，打開Serverless SSR控制臺，如果是全新客戶會有個授權的流程，授權完成后，點擊新建應用，如下圖所示。

SSR新建

3.【配置】在新建頁面中，填入博客項目名稱，由于我本地已有部署好的next.js博客及倉庫，因此可以直接選擇「導入已有項目」。選擇對應的代碼托管方式，并進行一鍵授權。

導入項目

如果沒有Github倉庫也沒關系，可以直接通過本地「文件夾上傳」的方式，把第一步下載的文件夾上傳并導入。

配置完成后，點擊部署，在「部署日志」頁面查看和等待即可。

在這個過程中，Serverless SSR會自動執行CI流程，做環境的初始化，安裝Serverless CLI，對項目進行npm run build構建，并且自動通過layer層對依賴進行分離，從而提升部署速度。

4.【訪問】等待約一分鐘后，可以看到部署成功，跳轉到了配置詳情頁面。此時點擊對應的URL或者「訪問應用」按鈕，即可訪問并打開博客了

訪問頁面

至此，一行代碼都沒有改，我把博客無縫部署到了騰訊云Serverless SSR平臺上托管。

最終的頁面展示如下所示，一個基于Next.js SSR的博客頁面就快速上線完成了

頁面展示

特別聲明：以上文章內容僅代表作者本人觀點，不代表ESG跨境電商觀點或立場。如有關于作品內容、版權或其它問題請于作品發表后的30日內與ESG跨境電商聯系。