22.react和next.js、SSR与CSR的比较
SSR 和 CSR 的区别
🔸 示例说明
SSR 流程（Next.js 支持）：
1. 用户请求页面
2. 服务端生成 HTML（含内容）
3. 浏览器收到渲染好的页面
// SSR 页面（默认行为） - app/page.tsx
export default async function Page() {
const res = await fetch(‘https://api.com/data’, { cache: ‘no-store’ });
const data = await res.json();
return
{data.title}
;
}
CSR 流程（React 默认）：
1. 浏览器加载空的 HTML
2. 下载 JS、React 渲染页面
3. 后台 API 获取数据并更新页面
// 纯 React 页面
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch(’/api/data’).then(res => res.json()).then(setData);
}, []);
return
{data?.title}
;
}
React 和 Next.js 的区别
🔍 举例对比
React：
• 更自由，需要你自己配置很多东西（如路由、打包、部署）
• 默认 CSR，不适合 SEO 要求高的站点
Next.js：
• 基于 React，提供「约定式」结构和功能
• 更适合企业级、内容型网站、电商等
总结一句话：
React 是造车的零件，Next.js 是组装好的一辆车，还能让它跑得更快、更容易维护、更适合上线。