< 关於 Next: 开始打地基| SSR (Server-Side Rendering) 跟 CSR (Client-Side Rendering) 的差别 >

09-16-2021

本章内容

• SSR|CSR 你们是谁？
  • SSR (Server-Side Rendering)
  • CSR (Client-Side Rendering)
• 知道了然後呢？他们之间的差异带来的冲击！
  • SEO问题浮现
  • 预渲染的形式
  • 哪一个才好呢？

SSR|CSR 你们是谁？

百听不闻其解，到底什麽是SSR，以及什麽是CSR呢？
简单的来说，这两者之间的差别仅在於是谁渲染资料，是前端？还是後端？

SSR (Server-Side Rendering)-服务器渲染

SSR (Server-Side Rendering)是与後端工程师合作方式，由後端（server端）渲染资料+由前端做好HTML绘制出完整的页面後，提交给後端变成==动态语言==，又称为动态渲染，针对每次的请求都会生成HTML页面。

CSR (Client-Side Rendering)

CSR (Client-Side Rendering)，与後端工程师合作方式为，後端提供前端API资料+由前端渲染资料前端依照API列表设计网页页面!

知道了然後呢？他们之间的差异带来的冲击！

SEO问题浮现

看似简单轻量的设计，但其中藏着对商业网站来说更严重的隐忧-「SEO」的分数问题。
如果当我们的HTML页面中的内容都是在容器中，其他的内容生成是靠着JS动态产生的，那麽当爬虫在爬取网站资料的时候，就只会爬到ㄧ个空荡荡的网页，几个小猫标签而已。

通常使用预渲染的方式，就有机会解决这个问题，指的是在资料送到client之前就把HTML页面渲染出来了。
Next的预设情况就是提前渲染页面并生成HTML，那麽就不会是全部由client的Javascript去完成页面，同时也能带来更好的性能与SEO。

预渲染的形式

在Next.js中分为:静态生成、SSR生成
静态生成Static Generation (Recommended): HTML在build的时候生成，并可以在每个请求中重用，如果使用静态生成一定要export画面，就可以在client发出请求之前预先渲染画面，也可以与client端一起引入其他的数据。

SSR、CSR哪一个才好呢？

看到这里，其实就是各有优缺点，视专案的复杂程度来选择会比较妥当啦！