nextjs系列教程(五)：页面预渲染-SSR

NextJs 页面预渲染方案

1.1 服务端渲染与客户端渲染

• 服务端渲染也被称为 “SSR” 或 “动态渲染”。服务端渲染（SSR）与客户端渲染（CSR）的核心区分点简单来说就是完整的 HTML 文档在服务端还是浏览器里组装完成。

1.2 SSR优缺点

优点

• 首屏加载速度更快：因为浏览器不需要等待数据加载和渲染，因此可以提高用户的首屏体验
• 搜索引擎优化：搜索引擎可以更容易的抓取完整的HTML内容，因此SSR可以更好地改善网站的SEO

缺点

• 增加服务器的负载：服务器需要执行渲染任务
• 复杂的环境技术：需要涉及到服务器端代码，需要更复杂的技术环境
• 性能问题：因为服务器需要处理大量的数据和渲染，因此可能会带来性能问题

1.3 SSR用法

如果 page（页面）使用的是 服务器端渲染，则会在 每次页面请求时 重新生成页面的 HTML 。

• 我们需要 export 一个名为 getServerSideProps 的 async 函数，服务器将在每次页面请求时调用此函数。

  export async function getServerSideProps() {
    const resp = await fetch(`url`)
    const items = await resp.json()
    return { props: { items, time: Date.now() } }
  }
  

• getServerSideProps 类似于 getStaticProps，但两者的区别在于 getServerSideProps 在每次页面请求时都会运行，在构建时不运行，两者执行时机相反

测试结果

• 对项目运行 yarn build 进行构建，再通过 yarn start 启动生成环境进行测试
  • 每次刷新页面，页面中的时间戳都会发生变化，说明每次请求都触发了 getServerSideProps 函数获取了最新的时间戳
  • 通过浏览器 右键 - 查看源代码 可以看到服务端渲染得到的页面也是具有完整数据的html页面，有利于 SEO 的优化
    

1.4 SSR使用场景分析

1. 因为 getServerSideProps 在每次请求的时候才能获取数据完成页面，所以速度要比 getStaticProps 慢，如果想要快一点，可以部分回退到客户端渲染，那些与 SEO 相关的数据使用 getServerSideProps，无关的数据在客户端使用诸如 axios 动态获取
2. 项目中有关公司介绍的页面，因为页面数据不经常变化，就可以不使用SSR，而是采用SSG渲染方式
3. 项目中首页的商品数据每次刷新都可能会发生变化，展示最新的商品信息，此时为了提升SEO，可以采用SSR渲染方式
4. 同一个页面中也会包含不同的组件，根据组件内容的特性决定使用SSR，还是SSG