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

來(lái)源: TencentServerless
作者:Tina
時(shí)間:2020-11-23
17810
近期,騰訊云Serverless團(tuán)隊(duì)發(fā)布了Serverless SSR產(chǎn)品,支持將Next.js,Nuxt.js等框架的應(yīng)用快速部署和托管,那么,今天我們就通過(guò)一個(gè)Next.js官方案例一起,來(lái)了解下該產(chǎn)品有哪些特性吧!

近期,騰訊云Serverless團(tuán)隊(duì)發(fā)布了Serverless SSR產(chǎn)品,支持將Next.js,Nuxt.js等框架的應(yīng)用快速部署和托管,那么,今天我們就通過(guò)一個(gè)Next.js官方案例一起,來(lái)了解下該產(chǎn)品有哪些特性吧!

一、寫(xiě)在前面:Next.js&SSR是什么關(guān)系?

Server-Side-Rendering(SSR)泛指服務(wù)端渲染的技術(shù),指的是在Server端將HTML渲染好,再返回給Client端。并且SSR是在對(duì)頁(yè)面每個(gè)請(qǐng)求發(fā)出時(shí),都會(huì)重新抓取和生成頁(yè)面(和SSG靜態(tài)頁(yè)面生成相比,是更加動(dòng)態(tài)的渲染方式)。

Next.js是一個(gè)輕量級(jí)的React服務(wù)端渲染應(yīng)用框架。支持多種渲染方式,包括客戶(hù)端渲染、靜態(tài)頁(yè)面生成、服務(wù)端渲染。使用Next.js可以方便的實(shí)現(xiàn)SSR,即頁(yè)面的服務(wù)端渲染。

二、服務(wù)端渲染SSR(Server Side Render)

Next.js框架支持客戶(hù)端渲染CSR(Client Side Render),靜態(tài)頁(yè)面生成SSG(Static Site Generation)以及服務(wù)端渲染SSR(Server Side Render)。用戶(hù)可以針對(duì)不同的場(chǎng)景,選用不同的渲染方式。

由于SSR可以動(dòng)態(tài)渲染頁(yè)面并加載內(nèi)容,因此主要有以下兩個(gè)優(yōu)勢(shì):

·首屏開(kāi)啟時(shí)間更快,SEO更加友好

·支持生成用戶(hù)相關(guān)內(nèi)容,不同用戶(hù)結(jié)果不同

在Next.js框架中,SSR的實(shí)現(xiàn)主要通過(guò)getServerSideProps方法獲取內(nèi)容,之后在后端調(diào)用renderToString()的方法,把整個(gè)頁(yè)面渲染成字符串。

三、基于Next.js SSR的博客系統(tǒng)搭建

接下來(lái)我們可以通過(guò)實(shí)戰(zhàn)來(lái)驗(yàn)證下效果。通過(guò)Next.js官方的博客搭建教程,可以很詳細(xì)的了解到框架的使用原理,并且涉及了豐富的功能點(diǎn),如下所示:

·搭建單頁(yè)應(yīng)用

·頁(yè)面之間相互導(dǎo)航

·Next.js對(duì)靜態(tài)資源,元數(shù)據(jù)和CSS的處理

·預(yù)加載(SSR和SSG)及數(shù)據(jù)獲取

·動(dòng)態(tài)頁(yè)面的路由

·API路由(Serverless函數(shù))

·和Github Actions等CI打通

接下來(lái),我們可以將這個(gè)博客快速部署到Serverless SSR平臺(tái)中,由于教程前半部分主要是對(duì)Next.js框架的教學(xué),本文中直接將博客倉(cāng)庫(kù)代碼下載并部署,步驟如下。

1.【下載代碼】通過(guò)下列命令將代碼下載到本地,并進(jìn)行少許更改。

npx create-next-app nextjs-blog--use-npm--example"https://github.com/vercel/next-learn-starter/tree/master/basics-final"

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

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

·在pages/index.js中,把<p>[Your Self Introduction]</p>改成自己的個(gè)人簡(jiǎn)介

2.【新建】登錄騰訊云,打開(kāi)Serverless SSR控制臺(tái),如果是全新客戶(hù)會(huì)有個(gè)授權(quán)的流程,授權(quán)完成后,點(diǎn)擊新建應(yīng)用,如下圖所示。

640.webp.jpg

SSR新建

3.【配置】在新建頁(yè)面中,填入博客項(xiàng)目名稱(chēng),由于我本地已有部署好的next.js博客及倉(cāng)庫(kù),因此可以直接選擇「導(dǎo)入已有項(xiàng)目」。選擇對(duì)應(yīng)的代碼托管方式,并進(jìn)行一鍵授權(quán)。

640.png

導(dǎo)入項(xiàng)目

如果沒(méi)有Github倉(cāng)庫(kù)也沒(méi)關(guān)系,可以直接通過(guò)本地「文件夾上傳」的方式,把第一步下載的文件夾上傳并導(dǎo)入。

配置完成后,點(diǎn)擊部署,在「部署日志」頁(yè)面查看和等待即可。

在這個(gè)過(guò)程中,Serverless SSR會(huì)自動(dòng)執(zhí)行CI流程,做環(huán)境的初始化,安裝Serverless CLI,對(duì)項(xiàng)目進(jìn)行npm run build構(gòu)建,并且自動(dòng)通過(guò)layer層對(duì)依賴(lài)進(jìn)行分離,從而提升部署速度。

4.【訪問(wèn)】等待約一分鐘后,可以看到部署成功,跳轉(zhuǎn)到了配置詳情頁(yè)面。此時(shí)點(diǎn)擊對(duì)應(yīng)的URL或者「訪問(wèn)應(yīng)用」按鈕,即可訪問(wèn)并打開(kāi)博客了!

640 (1).png

訪問(wèn)頁(yè)面

至此,一行代碼都沒(méi)有改,我把博客無(wú)縫部署到了騰訊云Serverless SSR平臺(tái)上托管。

最終的頁(yè)面展示如下所示,一個(gè)基于Next.js SSR的博客頁(yè)面就快速上線完成了!

640 (2).png

頁(yè)面展示

立即登錄,閱讀全文
版權(quán)說(shuō)明:
本文內(nèi)容來(lái)自于TencentServerless,本站不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。文章內(nèi)容系作者個(gè)人觀點(diǎn),不代表快出海對(duì)觀點(diǎn)贊同或支持。如有侵權(quán),請(qǐng)聯(lián)系管理員(zzx@kchuhai.com)刪除!
相關(guān)文章
騰訊云數(shù)據(jù)庫(kù)PostgreSQL全面支持PG 17
騰訊云數(shù)據(jù)庫(kù)PostgreSQL全面支持PG 17
即日起,騰訊云PostgreSQL全面支持PostgreSQL 17.0。所有用戶(hù)可使用大版本升級(jí)能力升級(jí)至最新的PostgreSQL 17.0進(jìn)行體驗(yàn),也可以在產(chǎn)品購(gòu)買(mǎi)頁(yè)直接購(gòu)買(mǎi)。
騰訊云
云服務(wù)
2024-12-152024-12-15
高可用這個(gè)問(wèn)題,加機(jī)器就能解決?
高可用這個(gè)問(wèn)題,加機(jī)器就能解決?
互聯(lián)網(wǎng)服務(wù)的可用性問(wèn)題是困擾企業(yè)IT人員的達(dá)摩克利斯之劍:防于未然,體現(xiàn)不出價(jià)值。已然發(fā)生,又面臨P0危機(jī)。就更別提穩(wěn)定性建設(shè)背后顯性的IT預(yù)算問(wèn)題與隱性的人員成本問(wèn)題。
騰訊云
云服務(wù)
2024-11-252024-11-25
TDSQL TDStore引擎版替換HBase:在歷史庫(kù)場(chǎng)景中的成本與性能優(yōu)勢(shì)
TDSQL TDStore引擎版替換HBase:在歷史庫(kù)場(chǎng)景中的成本與性能優(yōu)勢(shì)
HBase憑借其高可用性、高擴(kuò)展性和強(qiáng)一致性,以及在廉價(jià)PC服務(wù)器上的低部署成本,廣泛應(yīng)用于大規(guī)模數(shù)據(jù)分析。
騰訊云
云服務(wù)
2024-11-042024-11-04
復(fù)雜查詢(xún)性能弱,只讀分析引擎來(lái)幫忙
復(fù)雜查詢(xún)性能弱,只讀分析引擎來(lái)幫忙
隨著當(dāng)今業(yè)務(wù)的高速發(fā)展,復(fù)雜多表關(guān)聯(lián)的場(chǎng)景越來(lái)越普遍。但基于行式存儲(chǔ)的數(shù)據(jù)庫(kù)在進(jìn)行復(fù)雜查詢(xún)時(shí)性能相對(duì)較弱。
騰訊云
云服務(wù)
2024-11-022024-11-02
優(yōu)質(zhì)服務(wù)商推薦
更多
掃碼登錄
打開(kāi)掃一掃, 關(guān)注公眾號(hào)后即可登錄/注冊(cè)
加載中
二維碼已失效 請(qǐng)重試
刷新
賬號(hào)登錄/注冊(cè)
個(gè)人VIP
小程序
快出海小程序
公眾號(hào)
快出海公眾號(hào)
商務(wù)合作
商務(wù)合作
投稿采訪
投稿采訪
出海管家
出海管家