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 是组装好的一辆车，还能让它跑得更快、更容易维护、更适合上线。