对中国开发者最具吸引力的科技企业有哪些?快来为你 pick 的企业投票! 了解详情
写点什么

不改一行代码!快速部署 Next.js 博客到 Serverless SSR

2021 年 3 月 18 日

不改一行代码!快速部署 Next.js 博客到 Serverless SSR

近期,腾讯云 Serverless 团队发布了 Serverless SSR 产品,支持将 Next.js,Nuxt.js 等框架的应用快速部署和托管,那么,今天我们就通过一个 Next.js 官方案例一起,来了解下该产品有哪些特性吧!


一、写在前面:Next.js & SSR 是什么关系?


Server-Side-Rendering(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 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> 改成自己的个人简介


  1. 【新建】登录腾讯云,打开 Serverless SSR 控制台,如果是全新客户会有个授权的流程,授权完成后,点击新建应用,如下图所示。



  1. 【配置】在新建页面中,填入博客项目名称,由于我本地已有部署好的 next.js 博客及仓库,因此可以直接选择「导入已有项目」。选择对应的代码托管方式,并进行一键授权。


如果没有 Github 仓库也没关系,可以直接通过本地「文件夹上传」的方式,把第一步下载的文件夹上传并导入。


配置完成后,点击部署,在「部署日志」页面查看和等待即可。


在这个过程中,Serverless SSR 会自动执行 CI 流程,做环境的初始化,安装 Serverless CLI,对项目进行 npm run build 构建,并且自动通过 layer 层对依赖进行分离,从而提升部署速度。


  1. 【访问】等待约一分钟后,可以看到部署成功,跳转到了配置详情页面。此时点击对应的 URL 或者 「访问应用」 按钮,即可访问并打开博客了!



至此,一行代码都没有改,我把博客无缝部署到了腾讯云 Serverless SSR 平台上托管。


最终的页面展示如下所示,一个基于 Next.js SSR 的博客页面就快速上线完成了!




头图:Unsplash

作者:Tina

原文:https://mp.weixin.qq.com/s/1wVi1JkFtPefaOaUG1VqyA

原文:不改一行代码!快速部署 Next.js 博客到 Serverless SSR

来源:TencentServerless - 微信公众号 [ID:ServerlessGo]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021 年 3 月 18 日 00:191037

评论

发布
暂无评论
发现更多内容

数字信封加密

莫问

Mock服务设计与实现:MySQL驱动字节码修改增强

华为云开发者社区

MySQL 数据库 sql

用废旧纸箱DIY智能宠物喂食器!旅行在外远程投喂“二狗子”

智能物联实验室

物联网 DIY 智能硬件

函数式编程:如何高效简洁地对数据查询与变换

华为云开发者社区

编程 面向对象 数据处理

重磅发布!Flink Forward Asia 2020 在线峰会预约开启!

Apache Flink

flink

HTTP 前世今生

大导演

HTTP 前端进阶训练营

【涂鸦物联网足迹】涂鸦云平台数据类型和取值约束说明

IoT云工坊

人工智能 云计算 物联网 云平台 数据类型

架构师训练营 1 期 - 第八周作业(vaik)

行之

charles的使用方法

Yolanda_trying

手把手教你撸一个能生成抖音风格动图的gif制作平台

徐小夕

Java css3 GitHub GIF 开源项目

企业级软件的核心价值

Learun

敏捷开发 快速开发 企业开发 企业应用

微服务下,使用 ELK 进行日志采集以及统一处理

华为云开发者社区

微服务 Kibana ELK

熔断原理与实现Golang版

Kevin Wan

go microservice

直播预告 | 云原生在CloudQuery中的应用与实践

CloudQuery社区

数据库 sql 容器 云原生 工具软件

Week 8 命题作业

阿泰

企业级软件的核心价值

Marilyn

敏捷开发

分布式集群如何实现高效的数据分布

vivo互联网技术

分布式 DHT hash 数据存储

接口测试文件上传(python+requests)

测试人生路

Python 接口测试

决策树算法-实战篇

比伯

Java 大数据 编程 架构 算法

阿里P10带你深度剖析:淘宝网是如何基于Spring Cloud微服务框架搭建大型电商平台设计

Java架构追梦

Java 架构 面试 微服务 SpringCloud

简要分析近几年商业软件开发平台的现状

Marilyn

快速开发 企业开发

自己写歌怎么编曲?4款超好用编曲软件推荐

奈奈的杂社

编曲 音频制作 midi daw

简要分析近几年商业软件开发平台的现状

Learun

企业 企业开发 企业应用

重大活动网络攻击面前,京东智联云的攻防之道

京东科技开发者

云计算 网络安全 云安全

架构师第一期作业(第8周)

Cheer

作业

usdt支付系统开发方案,币支付交易系统搭建

WX13823153201

数字货币合约交易所系统开发技术

薇電13242772558

区块链 数字货币

极客大学 - 架构师训练营 第九周作业

9527

数据库建表、SQL、索引规范

Bruce Duan

MySQL sql 建表 规范

高性能IO模型:为什么单线程Redis能那么快?

小Q

Java redis 学习 架构 面试

飞书的「背道而驰」

ToB行业头条

华为云 TechWave 全球技术峰会

华为云 TechWave 全球技术峰会

不改一行代码!快速部署 Next.js 博客到 Serverless SSR-InfoQ