QCon全球软件开发大会8折优惠倒计时最后3天,购票立减¥1760!了解详情 >>> 了解详情
写点什么

不改一行代码!快速部署 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:191322

评论

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

跳槽涨薪必备秘籍!阿里内部面试突击手册,满满的全是精华

互联网架构师小马

Java 面试 软件开发 求职 找工作

如何隐藏融云输入框语音按钮

融云 RongCloud

集成融云 SDK 怎么实现多端同步未读数

融云 RongCloud

飞桨框架2.0正式版重磅发布,一次端到端的“基础设施”革新

百度大脑

AI 分布式 框架 #百度#

给融云的输入框上方加个功能按钮,怎么整?

融云 RongCloud

唠一唠融云的消息补偿机制

融云 RongCloud

融云会话页面刷新不及时问题

融云 RongCloud

关于融云 SDK 在使用 p8 证书的坎坷~

融云 RongCloud

大作业

eva

文档 用例

融云自定义消息不显示

融云 RongCloud

融云 Web SDK 如何实现表情的收发 ?

融云 RongCloud

如何开好每日晨会?

石云升

项目管理 28天写作 职场经验 管理经验 3月日更

作为小白接融云 IM SDK 新路体验~

融云 RongCloud

应对“角色爆炸”,PBAC 真香!

龙归科技

权限控制 管理系统 权限管理

融云 IMKit 音频录制参数

融云 RongCloud

如何利用融云 IMLib 来实现一个阅后即焚功能

融云 RongCloud

几张图解释明白 Istio!

xcbeyond

Service Mesh istio 3月日更

Web 端使用融云 SDK 集成实现滑动加载历史消息

融云 RongCloud

集成融云 IMLib 时,如何实现一套类似于 IMKit 的用户信息管理机制

融云 RongCloud

使用融云 IM 点击最近聊天记录时跳转到 @ 自己的消息

融云 RongCloud

融云IM SDK web 端集成 — 表情采坑篇

融云 RongCloud

桶排序,计数排序,基数排序

一个大红包

3月日更

干货分享——使用融云通讯能力库 IMLib 实现单群聊的阅读回执

融云 RongCloud

微信小程序集成融云 SDK (即时通讯) 集成必备条件

融云 RongCloud

融云 Web SDK 如何实现语音的收发 ?

融云 RongCloud

为融云聊天页面的输入框添加 Placeholder

融云 RongCloud

融云 IM SDK 如何插入消息

融云 RongCloud

自定义融云会话列表 cell 选中背景

融云 RongCloud

融云 SDK 如何实现群组操作

融云 RongCloud

Web 端集成融云 SDK 如何发送正确图片消息给移动端展示?

融云 RongCloud

使用融云 IM SDK 实现 H5 直播聊天

融云 RongCloud

移动应用开发的下一站

移动应用开发的下一站

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