next.js和nuxt与普通csr区别 - 详解
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style>
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }
code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style><div class="htmledit_views atom-one-dark" id="content_views"><p>好问题你问的是 <strong>Next.js / Nuxt.js 和普通 CSR（客户端渲染）的区别</strong>。我帮你从 <strong>渲染模式、SEO、性能、使用场景</strong> 四个角度来系统讲。</p><hr><h2>一、普通 CSR（Client Side Rendering，客户端渲染）</h2><h4>特点</h4><ul><li><p>前端用 <strong>React / Vue</strong> 写 SPA（单页应用）。</p></li><li><p>服务器只返回一个空的 <code>HTML</code> 模板，主要内容通过 JS 在浏览器运行后动态生成。</p></li></ul>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code>App</code></pre>
<h4>优点</h4><ul><li><p>前后端分离，开发效率高。</p></li><li><p>一次加载后，页面切换快（无刷新）。</p></li></ul><h4>缺点</h4><ul><li><p><strong>SEO 不友好</strong>：搜索引擎爬虫可能拿到空的 HTML。</p></li><li><p><strong>首屏渲染慢</strong>：用户要等 JS 下载、解析、执行后才看到内容。</p></li><li><p>不利于弱网或低性能设备。</p></li></ul><hr><h2>二、Next.js（基于 React） & Nuxt.js（基于 Vue）</h2><p>它们是 <strong>SSR（服务端渲染）/ SSG（静态生成）框架</strong>，区别于普通 CSR。</p><h4>1. SSR（Server Side Rendering）</h4><ul><li><p>页面在 <strong>服务器渲染好 HTML</strong>，再发送给浏览器。</p></li><li><p>浏览器收到的就是带内容的 HTML，首屏直接可见。</p></li><li><p>前端 JS 加载完成后再“接管”页面，变成 SPA（同 CSR 体验）。</p></li></ul><p> Next.js / Nuxt.js 默认支持 SSR。</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code>// Next.js 页面
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}</code></pre>
<hr><h4>2. SSG（Static Site Generation）</h4><ul><li><p>在 <strong>构建时</strong> 就把页面生成为静态 HTML。</p></li><li><p>用户访问时直接返回静态文件，性能更高。</p></li><li><p>适合内容变化不频繁的页面（博客、文档）。</p></li></ul><p> Next.js 的 <code>getStaticProps</code> / Nuxt.js 的 <code>nuxt generate</code> 就是 SSG。</p><hr><h4>3. ISR（Incremental Static Regeneration）</h4><ul><li><p>Next.js 独有，结合 SSG + SSR：</p><ul><li><p>页面先生成静态 HTML。</p></li><li><p>过期后自动在后台重新生成，用户仍然访问旧的页面，不会卡顿。</p></li></ul></li></ul><hr><h2>三、区别对比</h2><table><thead><tr><th>对比点</th><th>普通 CSR</th><th>Next.js / Nuxt.js</th></tr></thead><tbody><tr><td><strong>首屏渲染</strong></td><td>慢：等 JS 执行</td><td>快：SSR/SSG 提前生成 HTML</td></tr><tr><td><strong>SEO</strong></td><td>差：HTML 为空</td><td>好：HTML 有完整内容</td></tr><tr><td><strong>服务端压力</strong></td><td>小：只返回静态资源</td><td>较大：SSR 需服务器实时渲染</td></tr><tr><td><strong>前端体验</strong></td><td>SPA，切换快</td><td>同样是 SPA（SSR/SSG 后仍会 hydrate）</td></tr><tr><td><strong>适用场景</strong></td><td>后台管理系统、需要复杂交互的单页应用</td><td>内容展示、博客、商城、新闻门户，需要 SEO 和快首屏</td></tr></tbody></table><hr><h2>四、总结</h2><ul><li><p><strong>CSR（普通 React/Vue SPA）</strong></p><ul><li><p>渲染发生在客户端。</p></li><li><p>首屏慢，SEO 差，但适合复杂交互的后台系统。</p></li></ul></li><li><p><strong>Next.js / Nuxt.js</strong></p><ul><li><p>提供 SSR / SSG / ISR。</p></li><li><p>首屏快，SEO 友好，适合对性能和 SEO 有要求的应用（电商、内容网站）。</p></li><li><p>但 SSR 增加了服务器压力和复杂度。</p></li></ul></li></ul><hr><p></p></div><br><br>
来源：https://www.cnblogs.com/yjbjingcha/p/19089621
頁:
[1]