不改一行代码！快速部署 Next.js 博客到腾讯云 Serverless SSR
<p>近期，腾讯云 Serverless 团队发布了 Serverless SSR 产品，支持将 Next.js，Nuxt.js 等框架的应用快速部署和托管，那么，今天我们就通过一个 Next.js 官方案例一起，来了解下该产品有哪些特性吧！</p><h2 id="一写在前面nextjs--ssr-是什么关系">一、写在前面：Next.js & SSR 是什么关系？</h2>
<p>Server-Side-Rendering（SSR）泛指服务端渲染的技术，指的是在 Server 端将 HTML 渲染好，再返回给 Client 端。并且 SSR 是在对页面每个请求发出时，都会重新抓取和生成页面（和 SSG 静态页面生成相比，是更加动态的渲染方式）。</p>
<p>Next.js 是一个轻量级的 React 服务端渲染应用框架。支持多种渲染方式，包括客户端渲染、静态页面生成、服务端渲染。使用 Next.js 可以方便的实现 SSR，即页面的服务端渲染。</p>
<h2 id="二服务端渲染-ssrserver-side-render">二、服务端渲染 SSR（Server Side Render）</h2>
<p>Next.js 框架支持客户端渲染 CSR (Client Side Render)，静态页面生成 SSG（Static Site Generation）以及服务端渲染 SSR (Server Side Render)。用户可以针对不同的场景，选用不同的渲染方式。</p>
<p>由于 SSR 可以动态渲染页面并加载内容，因此主要有以下两个优势：</p>
<ul>
<li>首屏开启时间更快，SEO 更加友好</li>
<li>支持生成用户相关内容，不同用户结果不同</li>
</ul>
<p>在 Next.js 框架中，SSR 的实现主要通过 <code>getServerSideProps</code> 方法获取内容，之后在后端调用 <code>renderToString()</code> 的方法，把整个页面渲染成字符串。</p>
<h2 id="三基于-nextjs-ssr-的博客系统搭建">三、基于 Next.js SSR 的博客系统搭建</h2>
<p>接下来我们可以通过实战来验证下效果。通过 Next.js 官方的博客搭建教程，可以很详细的了解到框架的使用原理，并且涉及了丰富的功能点，如下所示：</p>
<ul>
<li>搭建单页应用</li>
<li>页面之间相互导航</li>
<li>Next.js 对静态资源，元数据和 CSS 的处理</li>
<li>预加载（SSR 和 SSG）及数据获取</li>
<li>动态页面的路由</li>
<li>API 路由（Serverless 函数）</li>
<li>和 Github Actions 等 CI 打通</li>
</ul>
<p>接下来，我们可以将这个博客快速部署到 Serverless SSR 平台中，由于教程前半部分主要是对 Next.js 框架的教学，本文中直接将博客仓库代码下载并部署，步骤如下。</p>
<ol>
<li>【下载代码】通过下列命令将代码下载到本地，并进行少许更改。</li>
</ol>
<pre><code>npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"
</code></pre>
<ul>
<li>在 <code>public/images/profile.jpg</code> 中将图片换为自己的头像</li>
<li>在 <code>components/layout.js</code> 中，把 <code>const name = ''</code> 替换成自己的名字</li>
<li>在 <code>pages/index.js</code> 中，把 <code><p></p></code> 改成自己的个人简介</li>
</ul>
<ol start="2">
<li>【新建】登录腾讯云，打开 Serverless SSR 控制台，如果是全新客户会有个授权的流程，授权完成后，点击新建应用，如下图所示。</li>
</ol>
<p><img src="https://img2020.cnblogs.com/other/1718416/202012/1718416-20201207103312697-618051955.jpg"></p>
<ol start="3">
<li>【配置】在新建页面中，填入博客项目名称，由于我本地已有部署好的 next.js 博客及仓库，因此可以直接选择「导入已有项目」。选择对应的代码托管方式，并进行一键授权。</li>
</ol>
<p><img src="https://img2020.cnblogs.com/other/1718416/202012/1718416-20201207103313227-1512316209.png"></p>
<p>如果没有 Github 仓库也没关系，可以直接通过本地「文件夹上传」的方式，把第一步下载的文件夹上传并导入。</p>
<p>配置完成后，点击部署，在「部署日志」页面查看和等待即可。</p>
<p>在这个过程中，Serverless SSR 会自动执行 CI 流程，做环境的初始化，安装 Serverless CLI，对项目进行 <code>npm run build</code> 构建，并且自动通过 layer 层对依赖进行分离，从而提升部署速度。</p>
<ol start="4">
<li>【访问】等待约一分钟后，可以看到部署成功，跳转到了配置详情页面。此时点击对应的 URL 或者 「访问应用」 按钮，即可访问并打开博客了！</li>
</ol>
<p><img src="https://img2020.cnblogs.com/other/1718416/202012/1718416-20201207103313702-2058031359.png"></p>
<p>至此，一行代码都没有改，我把博客无缝部署到了腾讯云 Serverless SSR 平台上托管。</p>
<p>最终的页面展示如下所示，一个基于 Next.js SSR 的博客页面就快速上线完成了！</p>
<p><img src="https://img2020.cnblogs.com/other/1718416/202012/1718416-20201207103314261-180895902.png"></p>
<h2 id="one-more-thing">One More Thing</h2>
<p>立即体验腾讯云 Serverless Demo，领取 Serverless 新用户礼包 👉 serverless/start</p>
<blockquote>
<p>欢迎访问：Serverless 中文网！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/serverlesscloud/p/14095908.html
頁:
[1]