不改一行代码快速部署Next.js博客到腾讯云Serverless SSR,next js快速入门-ESG跨境

不改一行代码快速部署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跨境电商联系。