{"componentChunkName":"component---src-templates-blog-detail-tsx","path":"/blog/2020-04-13-serverless-next.js-ssr","result":{"data":{"currentBlog":{"id":"e218778b-22f8-5931-8475-c0ad8a0165ed","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020523/1590205117399-16201.jpg","authors":["XaDon"],"categories":["user-stories"],"date":"2020-04-13T00:00:00.000Z","title":"在云函数 SCF 里为 Next.js 跑 SSR","description":"很多时候我们都希望首屏速度快，SEO 友好，那么相比于客户端渲染，SSR 渲染将是这方面的优势。","authorslink":["https://cloud.tencent.com/developer/article/1612986"],"translators":null,"translatorslink":null,"tags":["云函数","Serverless SSR"],"keywords":"Serverless,Serverless SSR,Serverless应用","outdated":null},"wordCount":{"words":130,"sentences":49,"paragraphs":49},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-04-13-serverless-next.js-ssr.md","fields":{"slug":"/blog/2020-04-13-serverless-next.js-ssr/","keywords":["java","next.js","node.js","nodejs","serverless","客户端渲染","云函数","serverless","serverlesscloud","初始化","根目录"]},"html":"

很多时候我们都希望首屏速度快，SEO 友好，那么相比于客户端渲染，SSR 渲染将是这方面的优势。Next.js、Nuxt.js 都是 SSR 框架。本篇文章将介绍 Next.js。

\n

通常我们在部署 SSR 的时候，会担心运维等问题，但如果我们把它部署在云开发上就可以不必担心~

\n

试试看看喽~

\n

环境准备

\n
    \n
  1. 安装node.js
    2. \n
  2. 安装云开发工具 @cloudbase/cli
    3. \n
\n
npm i @cloudbase/cli
\n

搭建云环境

\n
    \n
  1. 首先在打开云开发并新建环境
    2. \n
  2. 创建完成后会自动进入环境初始化阶段，这个阶段大概持续 2~3 分钟。
    3. \n
\n

初始化项目

\n

当环境初始化完成后我们就可以进行初始化项目啦~

\n
    \n
  1. 使用 CLI 工具初始化一个云开发项目 $ tcb init
    2. \n
\n\n \n 复制代码\n \n \n
tcb init\n? 选择关联环境 xxx - [xxx-xxx]\n? 请输入项目名称 nextSSR\n? 选择模板语言 Node\n? 选择云开发模板 Hello World\n✔ 创建项目 cloudbase-next 成功！
\n

初始化结束后的项目目录如下：

\n\n \n 复制代码\n \n \n
nextSSR\n└─.\n    │  .editorconfig\n    │  .gitignorev1\n    │  a.txt\n    │  cloudbaserc.js\n    │  README.md\n    │\n    └─functions\n        └─app\n                index.js
\n

然后我们进入到项目中

\n
$ cd nextSSR
\n

在 functions 文件夹下创建 next.js 应用：$ npm init next-app functions/next

\n

等待初始化 next.js 项目...

\n

初始化完成后在 functions 文件夹下会多出一个 next 的文件夹，这个便是我们的 next 应用

\n

配置 next

\n
    \n
  1. 首先我们进入到 next 项目的根目录 $ cd functions/next
    2. \n
  2. 然后安装 severless-http $ npm install --save serverless-http
    3. \n
  3. 在 next 应用的根目录下 项目根目录/functions/next应用根目录 新建 index.js，并将下列代码添加进去
    4. \n
\n {\n handle(req, res)\n })(...args)\n }// next.config.js\n module.exports = {\n assetPrefix: '/next'\n }`, `69277832950133236000`)\"\n >\n \n 复制代码\n \n \n
    // index.js\n    const next = require('next')\n    const serverless = require('serverless-http')\n\n    const app = next({ dev: false })\n    const handle = app.getRequestHandler()\n\n    exports.main = async function(...args) {\n        await app.prepare()\n        return serverless((req, res) => {\n            handle(req, res)\n        })(...args)\n    }// next.config.js\n    module.exports = {\n        assetPrefix: '/next'\n    }
\n

在 next 应用的根目录 (/function/next/next.config.js) 中新建 next.config.js 并将下列代码拷入

\n\n \n 复制代码\n \n \n
// next.config.js\nmodule.exports = {\n    assetPrefix: '/next'\n}
\n

这样我们的项目就配置差不多了。

\n

项目的构建与发布

\n
    \n
  • 首先我们进入到 functions/next 目录中
    • \n
\n

执行 $ npm run build

\n
    \n
  • 然后回到项目根目录中，运行 cli 命令将代码上传到云函数
    • \n
\n
$ tcb functions:deploy next
\n
    \n
  • 然后我们创建一个 http 服务
    • \n
\n
$ cloudbase service:create -f next -p /next
\n
\n

-f 表示 HTTP Service 路径绑定的云函数名称 \\ -p 表示 Service Path，必须以 / 开头

\n
\n\n \n 复制代码\n \n \n
$ cloudbase service:create -f next -p /next\n✔ 云函数 HTTP service 创建成功！
\n

我们上传到了哪里了呢？

\n

我们进入到云开发管理页面

\n

\"serverless\"

\n

我们看到在云函数的函数代码中可以找到我们刚才上传的文件

\n

我们点击预览即可浏览页面啦~

\n

在函数配置可以通过触发云函数来进行浏览我们的页面

\n

\"serverless\"

\n

\"serverless\"

\n

对比

\n

我们通过对比查看

\n
    \n
  • 通过 SSR 渲染的页面加载速度
    • \n
\n

\"serverless\"

\n
    \n
  • 非 SSR 的加载速度
    • \n
\n

\"serverless\"

\n

可以看到有明显的速度提升啦~

\n
\n
\n
\n
\n

传送门：

\n\n
\n

欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！

","tableOfContents":""},"previousBlog":{"id":"04432dc5-1456-5b39-8a05-7b5ae3492394","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020327/1585306882223-9.jpg","authors":["serverless 社区"],"categories":["meetup"],"date":"2020-04-15T00:00:00.000Z","title":"Serverless 中文社区有奖征稿","description":"欢迎将您的技术实践、开发经验分享更多人借鉴学习！","authorslink":["https://serverlesscloud.cn"],"translators":null,"translatorslink":null,"tags":["Serverless","Meetup"],"keywords":"Serverless 全局变量组件,Serverless 征稿,Serverless Component","outdated":null},"wordCount":{"words":184,"sentences":26,"paragraphs":26},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-04-15-article-meetup.md","fields":{"slug":"/blog/2020-04-15-article-meetup/","keywords":["serverless","云函数","Serverless","社区","serverless","开发","Framework","学习","礼品","整理"]}},"nextBlog":{"id":"43f1b4b3-585f-5695-88a1-7611872268e3","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020415/1586926925568-Log.jpg","authors":["Anycodes"],"categories":["guides-and-tutorials"],"date":"2020-04-13T00:00:00.000Z","title":"实时日志：腾讯云 Serverless Python 运行时支持日志实时输出","description":"当我们在调试时，只要触发器被触发，就能实时看到日志，那对写代码肯定大有裨益，这个组件就完成了这么一件事儿！","authorslink":["https://www.zhihu.com/people/liuyu-43-97"],"translators":null,"translatorslink":null,"tags":["Serverless","Python"],"keywords":"Serverless 全局变量组件,Serverless 单独部署组件,Serverless Component","outdated":true},"wordCount":{"words":132,"sentences":40,"paragraphs":40},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-04-13-time-log.md","fields":{"slug":"/blog/2020-04-13-time-log/","keywords":["go","python","serverless","spa","云函数","serverless","日志","time","service","scflog","实时"]}},"recommendBlogs":{"edges":[{"node":{"id":"4300b21c-7209-5256-86ff-0d38e3daec9b","frontmatter":{"thumbnail":"https://main.qcloudimg.com/raw/14f1c8eed372e76c1b139703b2f6d0fa.jpg","authors":["KieranMcCarthy"],"categories":["user-stories","engineering-culture"],"date":"2018-01-09T00:00:00.000Z","title":"我是如何在四年时间里，从厨师转行为 Serverless 应用开发者","description":"我是厨师出身，现在成为了一名 Serverless 应用开发者。","authorslink":["https://serverless.com/author/kieranmccarthy/"],"translators":["Aceyclee"],"translatorslink":["https://www.zhihu.com/people/Aceyclee"],"tags":["应用开发","Serverless"],"keywords":"Serverless 应用开发,Serverless 管理,厨师转行为 Serverless 应用开发者","outdated":null},"wordCount":{"words":285,"sentences":38,"paragraphs":36},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-01-09-from-chef-to-serverless-developer-in-4-years.md","fields":{"slug":"/blog/2018-01-09-from-chef-to-serverless-developer-in-4-years/","keywords":["无服务器","无服务器开发","云函数","学习","Serverless","构建","Framework","开发者","服务器","应用","学位","简历"]}}},{"node":{"id":"713a0563-4bf9-5721-bacb-3b4ef609fe4a","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/camp-fire/camp-fire-housing-thumb.jpg","authors":["EricWyne"],"categories":["guides-and-tutorials","user-stories"],"date":"2018-12-05T00:00:00.000Z","title":"Serverless Twitter 机器人帮助为坎普山火受灾者安置住房","description":"加利福尼亚州的坎普山火致使数千人流离失所，为此，我构建了一个简单的 Serverless Twitter 机器人来帮助将受灾者安置在临时住房！","authorslink":["https://serverless.com/author/ericwyne/"],"translators":["Aceyclee"],"translatorslink":["zhihu.com/people/Aceyclee"],"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":157,"sentences":26,"paragraphs":26},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-12-05-serverless-twitter-camp-fire.md","fields":{"slug":"/blog/2018-12-05-serverless-twitter-camp-fire/","keywords":["serverless","无服务器","云函数","Serverless","org","住房","Twitter","函数","受灾","机器人","山火"]}}},{"node":{"id":"98602143-b837-5f50-a24f-3b1ec76044d7","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/sqquid/sqquid-serverless-thumb.jpg","authors":["RonPeled"],"categories":["user-stories"],"date":"2018-12-17T00:00:00.000Z","title":"SQQUID：100% 无服务器初创公司","description":"SQQUID 将 AWS Lambda 和无服务器框架用于其核心产品和营销网站。我们来看看一个完全无服务器的初创公司是怎样的。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":266,"sentences":42,"paragraphs":42},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-12-17-sqquid-one-hundred-percent-serverless.md","fields":{"slug":"/blog/2018-12-17-sqquid-one-hundred-percent-serverless/","keywords":["go","serverless","无服务器","无服务器架构","服务器","架构","Lambda","集成","FaaS","串行","系统"]}}},{"node":{"id":"29dc2e58-d2ba-56f9-aee1-d21b0bc62e0e","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/ao-com-story/ao-serverless-thumbnail.png","authors":["NickGottlieb"],"categories":["user-stories"],"date":"2019-04-24T00:00:00.000Z","title":"AO.com：逐渐转向无服务器优先","description":"AO.com 的 SCV 团队率先尝试无服务器服务。折服于无服务器框架的快速周转时间和低维护成本，整个团队逐渐转向无服务器优先。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":236,"sentences":42,"paragraphs":35},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-04-24-ao-serverless-first.md","fields":{"slug":"/blog/2019-04-24-ao-serverless-first/","keywords":["serverless","无服务器","服务器","团队","Lambda","功能","构建"]}}},{"node":{"id":"752d08d1-387a-5bde-acf3-98141baab294","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020414/1586871710979-%E5%85%AC%E5%85%B1%E7%94%A8.png","authors":["Anycodes"],"categories":["user-stories"],"date":"2019-06-20T00:00:00.000Z","title":"如何用 Serverless 为 Python 云函数打包依赖","description":"在使用无服务器云函数SCF时通常会遇到导入第三方库的问题，很多小伙伴比较头疼是：应该如何打包进去？这里，推荐几个不错的方法。","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["云函数","Serverless"],"keywords":"Serverless,Serverless应用,无服务器云函数","outdated":null},"wordCount":{"words":81,"sentences":43,"paragraphs":43},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-06-20-for-python-cloud-functions.md","fields":{"slug":"/blog/2019-06-20-for-python-cloud-functions/","keywords":["java","serverless","无服务器","无服务器云函数","云函数","serverlesscloud","安装","serverless","pillowtest"]}}},{"node":{"id":"2dc78814-9d77-555b-a1bb-ad202c8ec2d1","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/cloudforecast/thumbnail.png","authors":["FrancoisLagier"],"categories":["user-stories"],"date":"2019-08-07T00:00:00.000Z","title":"Serverless：初创企业的理想选择？（CloudForecast 案例分析）","description":"CloudForecast 是 2018 年成立的一家独立初创企业，本文将介绍他们决定选择 Serverless 的原因。","authorslink":["https://serverless.com/author/francoislagier/"],"translators":["Aceyclee"],"translatorslink":["zhihu.com/people/Aceyclee"],"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":211,"sentences":29,"paragraphs":29},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-08-07-serverless-for-startups.md","fields":{"slug":"/blog/2019-08-07-serverless-for-startups/","keywords":["serverless","云函数","serverless","函数","Serverless","utm","Framework","blog","CloudForecast","cloudforecast"]}}},{"node":{"id":"97450b07-658b-5207-8216-1c7b9b51b115","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020114/1578988490344-v2-8b2cd2c5275aa2c5a3c5083a148a7a9f_1200x500.jpg","authors":["Anycodes"],"categories":["user-stories"],"date":"2019-09-01T00:00:00.000Z","title":"如何通过 Serverless 与自然语言处理，让搜索引擎「看」到你的博客","description":"Serverless 与自然语言处理结合的一个小应用","authorslink":["https://www.zhihu.com/people/liuyu-43-97"],"translators":null,"translatorslink":null,"tags":["个人博客","serverless"],"keywords":"Serverless 自然语言处理","outdated":null},"wordCount":{"words":106,"sentences":34,"paragraphs":34},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-09-01-search-engine-blog.md","fields":{"slug":"/blog/2019-09-01-search-engine-blog/","keywords":["serverless","云函数","keywords","serverlesscloud","summary"]}}},{"node":{"id":"ae4fd2f8-515c-5aec-b584-38427ef33f7e","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020114/1578989800047-part-00492-780.jpg","authors":["Anycodes"],"categories":["guides-and-tutorials","user-stories"],"date":"2019-09-16T00:00:00.000Z","title":"突破传统 OJ 瓶颈，「判题姬」接入云函数","description":"通过 Serverless 实现在线编程","authorslink":["https://www.zhihu.com/people/liuyu-43-97"],"translators":null,"translatorslink":null,"tags":["在线编程","云函数"],"keywords":"Serverless 在线编程,Serverless OJ","outdated":null},"wordCount":{"words":169,"sentences":30,"paragraphs":30},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-09-16-online-Judge.md","fields":{"slug":"/blog/2019-09-16-online-Judge/","keywords":["python","serverless","云函数","代码","函数","serverless"]}}}],"totalCount":64}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"e218778b-22f8-5931-8475-c0ad8a0165ed","previousBlogId":"04432dc5-1456-5b39-8a05-7b5ae3492394","nextBlogId":"43f1b4b3-585f-5695-88a1-7611872268e3","categories":["user-stories"]}}}