Web知识篇
什么是SSR与CSR
学习进度
0/60
什么是SSR与CSR
理解服务端渲染与客户端渲染的区别。
你有没有遇到过这种情况:打开一个网页,先是一片白屏,然后内容才慢慢出来?而有些网站一打开就能看到内容?这就是 CSR 和 SSR 的区别。
CSR(Client-Side Rendering,客户端渲染):浏览器先下载一个空壳 HTML + 一大段 JavaScript,然后由 JS 在浏览器里动态生成页面内容。优点是交互流畅,缺点是首屏慢、搜索引擎看不到内容。SSR(Server-Side Rendering,服务端渲染):服务器先把页面内容拼好,直接返回完整的 HTML。用户打开就能看到内容,对搜索引擎也友好。Next.js 的核心能力之一就是支持 SSR。
SSR vs CSR 加载对比
Next.js 中看到 'use client' 标记的组件,意味着这个组件会:
- 在服务器上运行
- 在浏览器中运行(客户端渲染)
- 在数据库中存储
- 不会被渲染
在 Next.js 中,默认所有组件都是服务端组件(Server Component)。只有需要用户交互(点击、输入、状态变化)的组件,才加上 'use client' 变成客户端组件。
组件类型选择器
Next.js 渲染策略总结:Server Component(默认)= 服务端渲染,适合展示内容、读取数据,不能用 useState/onClick;Client Component('use client')= 客户端渲染,适合交互组件,可以用 React hooks。好的做法是:大部分组件用 Server,只在需要交互的组件上加 'use client'。
你不需要每次都纠结用 SSR 还是 CSR——Next.js 已经帮你做了最优选择。你只需要记住:纯展示的组件默认就好,需要交互的加上 'use client'。