{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2020-11-20-serverless-ssr","result":{"data":{"currentBlog":{"id":"49059152-8e56-5fb4-bb75-21361dec762b","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20201120/1605839791547-1605788634978-SSR.jpg","authors":["Tina"],"categories":["best-practice"],"date":"2020-11-20T00:00:00.000Z","title":"不改一行代码！快速部署 Next.js 博客到腾讯云 Serverless SSR","description":"手把手教你搭建自己的博客系统，快来一起实践吧！","authorslink":null,"translators":null,"translatorslink":null,"tags":["Serverless","博客"],"keywords":null,"outdated":null},"wordCount":{"words":235,"sentences":37,"paragraphs":37},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-11-20-serverless-ssr.md","fields":{"slug":"/best-practice/2020-11-20-serverless-ssr/","keywords":["next.js","nextjs","serverless","ssr","vercel","单页应用","服务端渲染","客户端渲染","页面","Next","渲染","Serverless","博客","serverlesscloud","服务端"]},"html":"<p>近期，腾讯云 Serverless 团队发布了 Serverless SSR 产品，支持将 Next.js，Nuxt.js 等框架的应用快速部署和托管，那么，今天我们就通过一个 Next.js 官方案例一起，来了解下该产品有哪些特性吧！</p>\n<h2 id=\"一、写在前面：nextjs--ssr-是什么关系？\"><a href=\"#%E4%B8%80%E3%80%81%E5%86%99%E5%9C%A8%E5%89%8D%E9%9D%A2%EF%BC%9Anextjs--ssr-%E6%98%AF%E4%BB%80%E4%B9%88%E5%85%B3%E7%B3%BB%EF%BC%9F\" aria-label=\"一、写在前面：nextjs  ssr 是什么关系？ permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>一、写在前面：Next.js &#x26; SSR 是什么关系？</h2>\n<p>Server-Side-Rendering（SSR）泛指服务端渲染的技术，指的是在 Server 端将 HTML 渲染好，再返回给 Client 端。并且 SSR 是在对页面每个请求发出时，都会重新抓取和生成页面（和 SSG 静态页面生成相比，是更加动态的渲染方式）。</p>\n<p>Next.js 是一个轻量级的 React 服务端渲染应用框架。支持多种渲染方式，包括客户端渲染、静态页面生成、服务端渲染。使用 Next.js 可以方便的实现 SSR，即页面的服务端渲染。</p>\n<h2 id=\"二、服务端渲染-ssr（server-side-render）\"><a href=\"#%E4%BA%8C%E3%80%81%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr%EF%BC%88server-side-render%EF%BC%89\" aria-label=\"二、服务端渲染 ssr（server side render） permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>二、服务端渲染 SSR（Server Side Render）</h2>\n<p>Next.js 框架支持客户端渲染 CSR (Client Side Render)，静态页面生成 SSG（Static Site Generation）以及服务端渲染 SSR (Server Side Render)。用户可以针对不同的场景，选用不同的渲染方式。</p>\n<p>由于 SSR 可以动态渲染页面并加载内容，因此主要有以下两个优势：</p>\n<ul>\n<li>首屏开启时间更快，SEO 更加友好</li>\n<li>支持生成用户相关内容，不同用户结果不同</li>\n</ul>\n<p>在 Next.js 框架中，SSR 的实现主要通过 <code class=\"language-text\">getServerSideProps</code> 方法获取内容，之后在后端调用 <code class=\"language-text\">renderToString()</code> 的方法，把整个页面渲染成字符串。</p>\n<h2 id=\"三、基于-nextjs-ssr-的博客系统搭建\"><a href=\"#%E4%B8%89%E3%80%81%E5%9F%BA%E4%BA%8E-nextjs-ssr-%E7%9A%84%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F%E6%90%AD%E5%BB%BA\" aria-label=\"三、基于 nextjs ssr 的博客系统搭建 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>三、基于 Next.js SSR 的博客系统搭建</h2>\n<p>接下来我们可以通过实战来验证下效果。通过 Next.js 官方的<a href=\"https://nextjs.org/learn/basics/deploying-nextjs-app\">博客搭建教程</a>，可以很详细的了解到框架的使用原理，并且涉及了丰富的功能点，如下所示：</p>\n<ul>\n<li>搭建单页应用</li>\n<li>页面之间相互导航</li>\n<li>Next.js 对静态资源，元数据和 CSS 的处理</li>\n<li>预加载（SSR 和 SSG）及数据获取</li>\n<li>动态页面的路由</li>\n<li>API 路由（Serverless 函数）</li>\n<li>和 Github Actions 等 CI 打通</li>\n</ul>\n<p>接下来，我们可以将这个博客快速部署到 Serverless SSR 平台中，由于教程前半部分主要是对 Next.js 框架的教学，本文中直接将博客仓库代码下载并部署，步骤如下。</p>\n<ol>\n<li>【下载代码】通过下列命令将代码下载到本地，并进行少许更改。</li>\n</ol>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">npx create-next-app nextjs-blog --use-npm --example &quot;https://github.com/vercel/next-learn-starter/tree/master/basics-final&quot;</code></pre></div>\n<ul>\n<li>在 <code class=\"language-text\">public/images/profile.jpg</code> 中将图片换为自己的头像</li>\n<li>在 <code class=\"language-text\">components/layout.js</code> 中，把 <code class=\"language-text\">const name = &#39;[Your Name]&#39;</code> 替换成自己的名字</li>\n<li>在 <code class=\"language-text\">pages/index.js</code> 中，把 <code class=\"language-text\">&lt;p&gt;[Your Self Introduction]&lt;/p&gt;</code> 改成自己的个人简介</li>\n<li>【新建】登录腾讯云，打开 Serverless SSR <a href=\"https://console.cloud.tencent.com/ssr\">控制台</a>，如果是全新客户会有个授权的流程，授权完成后，点击新建应用，如下图所示。</li>\n</ul>\n<p><img src=\"https://img.serverlesscloud.cn/20201119/1605785794259-image%20%281%29.jpeg\" alt=\"SSR 新建\"></p>\n<ol start=\"3\">\n<li>【配置】在新建页面中，填入博客项目名称，由于我本地已有部署好的 next.js 博客及仓库，因此可以直接选择「导入已有项目」。选择对应的代码托管方式，并进行一键授权。</li>\n</ol>\n<p><img src=\"https://img.serverlesscloud.cn/20201119/1605785800563-image%20%283%29.png\" alt=\"导入项目\"></p>\n<p>如果没有 Github 仓库也没关系，可以直接通过本地「文件夹上传」的方式，把第一步下载的文件夹上传并导入。</p>\n<p>配置完成后，点击部署，在「部署日志」页面查看和等待即可。</p>\n<p>在这个过程中，Serverless SSR 会自动执行 CI 流程，做环境的初始化，安装 Serverless CLI，对项目进行 <code class=\"language-text\">npm run build</code> 构建，并且自动通过 layer 层对依赖进行分离，从而提升部署速度。</p>\n<ol start=\"4\">\n<li>【访问】等待约一分钟后，可以看到部署成功，跳转到了配置详情页面。此时点击对应的 URL 或者 「访问应用」 按钮，即可访问并打开博客了！</li>\n</ol>\n<p><img src=\"https://img.serverlesscloud.cn/20201119/1605785804438-image%20%284%29.png\" alt=\"访问页面\"></p>\n<p>至此，一行代码都没有改，我把博客无缝部署到了腾讯云 Serverless SSR 平台上托管。</p>\n<p>最终的页面展示如下所示，一个基于 Next.js SSR 的博客页面就快速上线完成了！</p>\n<p><img src=\"https://img.serverlesscloud.cn/20201119/1605785799875-image%20%282%29.png\" alt=\"页面展示\"></p>\n<hr>\n<p>欢迎访问：<a href=\"https://serverlesscloud.cn/\">Serverless 中文网</a>，您可以在 <a href=\"https://serverlesscloud.cn/best-practice\">最佳实践</a> 里体验更多关于 Serverless 应用的开发！</p>","tableOfContents":"<ul>\n<li><a href=\"/best-practice/2020-11-20-serverless-ssr/#%E4%B8%80%E3%80%81%E5%86%99%E5%9C%A8%E5%89%8D%E9%9D%A2%EF%BC%9Anextjs--ssr-%E6%98%AF%E4%BB%80%E4%B9%88%E5%85%B3%E7%B3%BB%EF%BC%9F\">一、写在前面：Next.js &#x26; SSR 是什么关系？</a></li>\n<li><a href=\"/best-practice/2020-11-20-serverless-ssr/#%E4%BA%8C%E3%80%81%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr%EF%BC%88server-side-render%EF%BC%89\">二、服务端渲染 SSR（Server Side Render）</a></li>\n<li><a href=\"/best-practice/2020-11-20-serverless-ssr/#%E4%B8%89%E3%80%81%E5%9F%BA%E4%BA%8E-nextjs-ssr-%E7%9A%84%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F%E6%90%AD%E5%BB%BA\">三、基于 Next.js SSR 的博客系统搭建</a></li>\n</ul>"},"previousBlog":{"id":"86b0d049-5f3c-5418-af12-2cc9d60dff75","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20201125/1606302616770-1606298812544-%E5%8D%B0%E8%B1%A1%E7%AC%94%E8%AE%B0%E5%B0%81%E9%9D%A2.jpg","authors":["岳峰"],"categories":["best-practice"],"date":"2020-11-25T00:00:00.000Z","title":"腾讯云 Serverless 应用初探 —— 印象笔记","description":"揭秘印象笔记如何进行产品快速迭代","authorslink":null,"translators":null,"translatorslink":null,"tags":["Serverless","客户案例"],"keywords":null,"outdated":null},"wordCount":{"words":164,"sentences":22,"paragraphs":22},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-11-25-evernote.md","fields":{"slug":"/best-practice/2020-11-25-evernote/","keywords":["go","serverless","云函数","Serverless","笔记","腾讯","印象","用户","功能","团队","服务","使用","技术"]}},"nextBlog":{"id":"00fbb971-7dac-5865-b1ef-86077c2102b0","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20201111/1605093413809-QQ20201111-191440%402x.jpg","authors":["陈丽杭"],"categories":["best-practice"],"date":"2020-11-11T00:00:00.000Z","title":"腾讯 IMWEB 前端团队一站式 Serverless 开发解决方案","description":"本文将分享 IMWEB 团队对 Serverless 的实践方案","authorslink":null,"translators":null,"translatorslink":null,"tags":["Serverless","IMWEB"],"keywords":null,"outdated":null},"wordCount":{"words":441,"sentences":95,"paragraphs":95},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-11-11-imweb-serverless.md","fields":{"slug":"/best-practice/2020-11-11-imweb-serverless/","keywords":["serverless","云函数","函数","serverlesscloud","jpeg","网关","开发"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"49059152-8e56-5fb4-bb75-21361dec762b","previousBlogId":"86b0d049-5f3c-5418-af12-2cc9d60dff75","nextBlogId":"00fbb971-7dac-5865-b1ef-86077c2102b0"}}}