如果前辈说什麽你就做什麽，长久下来你会失去判断能力。

除非你是草创成员，不然进入一间公司後，往往都是跟着前辈订下的规则走；大部分的前辈在交接的时候只会说要这样做，而不会告诉你为什麽要这样做。

不懂就问，不会就学；前辈说的也未必都是正确的，过去的设计可能存在缺陷，只是当时没有发现；也可能因为时空背景关系，现在已经不适用了；希望大家永远保留自己的意识，与面对未知的怀疑。

大纲

1. 如何判断专案要使用 CSR 还是 SSR？

   • 1.1 面试官为什麽会问？
   • 1.2 面试官想从答案确认什麽？
   • 1.3 笔者提供的简答

2. 回答问题所需具备的知识

   • 2.1 CSR - Client-Side Rendering（客户端渲染）
   • 2.2 SSR - Server-Side Rendering（服务器端渲染）

3. 衍伸问题

   • 3.1 在实务上有遇过什麽问题？你如何解决？

1. 如何判断专案要使用 CSR 还是 SSR？

1.1 面试官为什麽会问？

因为履历资讯中显示求职者使用Nuxt.js这个 Vue.js 的应用框架；而选择这个框架通常是为了 SSR，於是想透过这个问题确认求职者是否明白 SSR 与 CSR 的意思，以及各自的应用场景。

1.2 面试官想从答案确认什麽？

• 是否可以简述 CSR 与 SSR 的应用场景
• 细问时可以说出各自的优缺点
• 在实务上如何发挥各自优点

1.3 笔者提供的简答

如果是操作频繁的的内部管理系统，我会建议使用 CSR，由 Client 负责编译 HTML 页面以降低 Server 端压力；而面对需要 SEO 优化的网站，我会推荐用 SSR，因为 Client 端会直接收到由 Server 端编译好的 HTML，利用首屏渲染快的优势提供较好的使用者体验。

2. 回答问题所需具备的知识

2.1 CSR - Client-Side Rendering（客户端渲染）

渲染过程全部交给 Client 端的浏览器去处理，Server 端不参与任何渲染。一开始的 HTML 是空白的，需要等待 JavaScript 下载并执行後浏览器才会显示画面。

• 优点
  • 减少 Server 端的压力
    因为 JavaScript 及 CSS 在第一次都已经发送到 Client 端，之後只需要向 Server 端取得相关页面的 data 即可。
  • 页面切换速度快
    因为 HTML 页面都是 Client 端自己编译的，所以页面切换时不需要像 SSR 等待 Server 端回传 HTML；而且网页内容的改变通常都是局部的，这样就避免了不必要的跳转及重复渲染。
• 缺点
  • 首屏显示慢
    明明首页只有一点内容却下载了所有页面的资源。
  • SEO 较差
    因爲一开始的 HTML 页面是空白的；尽管现在 Google 的爬虫也会等 JavaScript 编译好再爬，但这块对 SEO 的实际帮助还需要时间验证。
• 应用场景
  • 会高频操作且不需 SEO 的网站
    像是内部管理系统（ERP 系统、订单管理系统），如果这类型的系统采取 SSR 会造成 Server 端较大的负荷。

2.2 SSR - Server-Side Rendering（服务器端渲染）

HTML 由 Server 端编译出来返回 Client 端，所以 Client 看到的画面就是最终版 HTML。

• 优点
  • SEO 排名更高
    因为 Google 爬虫可以直接抓到网站的资讯。
  • 首屏渲染快
    因为不需要下载一堆 JavaScript 及 CSS ，还要等待它们编译後才看到页面。
  • 减少 Client 端的耗电量
    因为编译的步骤都在 Server 端执行。
• 缺点
  • Server 端承受比较大的压力
    由於页面都是在 Server 端进行编译，在高并发场景中会消耗相当大的资源。
• 应用场景
  • 低频操作但需要 SEO 优化的网站
    像是媒体类型的网站（部落格、新闻网站、技术文件），因为文章要被搜寻到才会有流量及话题，而且大部分的时候 Client 端都在阅读，很少有高频操作的情境。

3. 衍伸问题

3.1 在实务上有遇过什麽问题？你如何解决？

考点：了解你在实务上是否能灵活运用

• 先简述自己遇过的问题
  假设 Client 端的网路环境不理想又采用 CSR，那在首屏渲染的过程可能就赶走许多使用者；在这种情况下 SSR 会因为 Server 环境相对稳定而获得较好的使用者体验。

• 再说明解决方式
  无论是 CSR 还是 SSR 都有各自的优势与弱点，所以我通常会让第一个页面用 SSR 来争取更高的 SEO，其他操作频率高的页面则采用 CSR 让使用者有良好的体验；目前 Nuxt.js（Vue）、Next.js（React）这两个框架都是很好的解决方案

感谢大家的阅读，如果喜欢我的文章可以订阅接收通知；如果有帮助到你，按Like可以让我更有写文的动力，我们明天见～

参考资源

1. SSR、CSR 名词理解 & 应用场景(笔者部落格)

我在 Medium 平台 也分享了许多技术文章
❝ 主题涵盖「MIS & DEVOPS、资料库、前端、後端、MICROSFT 365、GOOGLE 云端应用、自我修炼」希望可以帮助遇到相同问题、想自我成长的人。❞