CSR 和 SSR 分别是什么?

105 阅读1分钟

CSR(客户端渲染)

对于 HTMl 的加载,以 React 为例,我们习惯的做法是加载 JS 的文件中的 React 代码,来生成页面渲染,同时, JS 也完成页面交互事件的绑定,这样的一个过程是 CSR(客户端渲染)。

若这个 JS 文件比较大,加载起来就会比较慢,到达页面渲染的时间就会比较长,导致白屏。这时候采用 SSR(服务端渲染) 的方式。

SSR(服务端渲染)

由服务端直接生成 HTNL 内容返回给浏览器渲染首屏内容。

同构

若服务器端渲染的页面交互能力有限,还要实现复杂交互,还是通过引入 JS 文件来辅助实现。我们把页面展示内容和交互写在一起,让代码执行两次,这种方式叫同构。

CSR 和 SSR区别

CSR(客户端渲染)和 SSR(服务器端渲染)的区别在于:最终的 HTML 的代码是从客户端添加的还是从服务器端添加的。