写在前面
最近有很多朋友在咨询next.js的问题，想知道选择这个框架是否合适。考虑他最多的原因是next.js对SEO优化。这里专门做一次介绍，希望能有所帮助~~
名词说明
SSR：Server-Side Rendering，服务器端渲染；
SSG ：Server-Static Generation，服务端静态生成，也叫编译生成
CSR：Client-Side Rendering，客户端渲染
SSR、SSG与CSR都是关于页面渲染的技术名词，主要根据页面在哪里渲染、什么时候渲染的来做区分。其中SSR、SSG都是预渲染技术，只是生成的时机不同。我们平时是在SSR（这里面其实包含了SSG）与CSR做选择，然后是在SSR与SSG做选择。当然，成年人的世界里，我们大概率是会既要……，又要……
渲染技术效果对比
预渲染与非预渲染
SSR与SSG
如何选择
SSR与CSR之间的选择
选择CSR主要是为了利用现代前端框架提供的动态交互能力和开发效率，特别适合那些对用户交互体验有高要求、内容频繁变动且服务器资源有限的项目。
当项目侧重于搜索引擎可见性、首屏加载性能、兼容性和安全性，或目标用户可能在较差的网络条件下访问时，选择SSR会是更合适的技术方案。
选择客户端渲染（CSR，Client-Side Rendering）的场景：
- 交互式用户体验：如果你的应用需要高度交互式的用户体验，比如单页应用程序（SPA）那样的即时反馈和流畅的界面切换，CSR 是一个很好的选择。它允许在不重新加载整个页面的情况下动态更新内容，提升了用户体验。
- 动态数据需求：当应用中的大部分内容依赖于用户操作或实时更新时（如聊天应用、仪表盘、个性化内容展示），CSR 能更高效地处理这些需求，因为它可以直接在客户端根据用户行为或API响应来更新页面。
- 开发效率与迭代速度：CSR框架（如React、Vue.js等）提供了丰富的开发者工具和生态系统，可以提高开发效率和代码复用性。对于频繁更新和迭代的产品，这种灵活性尤为重要。
- 减少服务器负担：CSR将渲染工作转移到了客户端，这意味着服务器只需提供初始的HTML文档和必要的数据API，减少了服务器的CPU和内存消耗，尤其适合流量较大的应用。
- 初始加载时间容忍度：如果用户群体对首次页面加载时间有较高容忍度，或者可以通过骨架屏、懒加载等技术缓解等待感，那么可以选择CSR。因为相比SSR，CSR在首次加载时可能需要更长时间来下载JavaScript bundle并执行渲染。
- SEO非关键或已有解决方案：如果SEO不是项目的主要关注点，或者已经有解决方案可以弥补CSR在SEO上的不足（例如使用预渲染、动态渲染服务或Google对JS抓取能力的提升），则可以偏向于选择CSR。
选择服务器端渲染（SSR, Server-Side Rendering）的场景：
- SEO优化：对于依赖搜索引擎流量的内容驱动型网站，如新闻门户、博客、电商产品列表等，SSR至关重要。搜索引擎爬虫通常更偏好服务器端渲染的页面，因为它们可以直接抓取到完整渲染的HTML内容，有助于提升搜索引擎排名。
- 首屏加载速度：在慢速网络环境下或对首屏加载时间有严格要求的应用中，SSR可以提供即时的、可交互的初始页面内容，无需等待JavaScript下载和执行，从而改善用户体验。
- 减少客户端负担：对于低端设备或资源受限的客户端，SSR可以减轻其计算负担，因为大部分渲染工作在服务器完成，客户端只需处理交互逻辑。
- 内容密集型页面：对于包含大量静态内容的页面，SSR可以确保内容立即可见，无需等待额外的异步数据加载。
什么时候选择SSR，什么时候选择SSG
建议尽可能使用静态生成（有数据和无数据），因为您的页面可以构建一次并由CDN提供服务，这比让服务器在每次请求时呈现页面要快得多。比如以下场景：
- Marketing pages 营销页面
- Blog posts 博客
- E-commerce product listings 电子商务产品列表
- Help and documentation 文档
- 等等
你可以这样来问自己："可以在用户请求之前预先呈现这个页面吗?",如果答案是，就可以选择SSG,否则SSR。
框架的选择
聊完了技术选择原则，我们再来看看用什么框架。
这里说个题外话，很多朋友（非技术）咨询的时候，上来就会表达：我这个项目想基于next.js来做。其中一个很重要的原因就是对于SEO优化，这里先不聊SEO问题，只是想聊下思维误区。
其实对于一个产品来讲，如何能更好更快上线才是首先要考虑的，还有框架选择对未来的支持是否友好，比如产品未来是否还要扩展到移动端，当前框架对这方面支持是否友好？还有思考：后续找这方面的技术来运维是否好找
如何才能保证产品保质保量的上线呢，答案是方便且擅长的技术栈。所以对于上面的问题我们可以和这样沟通：你擅长什么技术，这个技术是否能解决XX方面的问题。
基于框架的选择常常是在Vue与React之间，然后是基于这两个技术延伸的框架。由于精力有限，有的框架并没有去实践过，这里只简要列一下在SSR与SSG可用的技术框架代表.
Vue
Nuxt.js
Nuxt.js 是一个基于Vue.js的通用应用框架，专为构建服务器端渲染和静态生成的应用而设计。它简化了Vue应用的配置和部署过程，提供了许多开箱即用的功能。可以用它对标React实现的next.js。
VuePress /VitePress
VitePress主要聚焦于文档站点，但它也能够用于构建简单的静态网站项目。如果项目需求主要是静态内容展示，并且重视开发速度与简单性，VitePress会是一个很好的选择。而对于需要更复杂功能如服务器端渲染、动态路由管理等的应用，Nuxt.js则更加适合。
VuePress 是另一个由Vue.js团队打造的静态站点生成器，它有一个强大的插件API，允许开发者扩展其功能，比如添加PWA支持、SEO优化、分析工具集成等
如果你的项目需要一个成熟、功能全面且有良好社区支持的解决方案，VuePress可能是更好的选择。而如果你追求极致的开发速度和更轻量级的配置，或者偏好使用Vite作为开发环境，VitePress可能更适合你。
React
next.js
- 多样的渲染模式提升SEO：Next.js 支持服务器端渲染（SSR）和静态站点生成（SSG），这对于SEO非常有利。SSR确保搜索引擎爬虫看到的是完全渲染的页面内容，有助于提高索引质量和排名。而SSG则可以预先生成静态HTML文件，进一步提升页面加载速度和SEO效果。此外，Next.js的增量静态生成（ISR）也是对SEO友好的特性，它允许在首次访问时动态生成缺少的静态页面，结合了静态和动态内容的优点。
- 自动化路由和链接预取：Next.js 自动处理路由并支持链接预取，这有助于改善页面间的导航速度和用户体验，间接有利于SEO。
remix.js
- 服务器端渲染：虽然Remix主要聚焦于服务器端渲染，这对SEO也是有益的，因为它同样保证了搜索引擎爬虫能够获取到完整的HTML内容。不过，缺乏静态站点生成（SSG）这样的特性，可能在某些场景下不如Next.js那样能够提供即时加载的静态页面和最优的初次访问性能。
- 更好的用户体验：Remix在动态内容加载和错误处理方面做得很好，即使在网络状况不佳的情况下也能保持良好的用户体验。虽然用户体验不直接属于SEO范畴，但它对用户留存率、跳出率等间接影响SEO的因素有所贡献。
跨端支持
CapacitorJS
CapacitorJS 是一个开源的跨平台应用开发框架，由 Ionic 团队创建，旨在让 web 开发者能够使用他们熟悉的 Web 技术（如 HTML, CSS, JavaScript，以及框架如 Angular, React, 或 Vue.js）来构建原生移动应用和 Progressive Web Apps (PWA)。
uniapp
UniApp 是一个使用 Vue.js 开发所有前端应用的统一框架，由 DCloud（数字天堂）团队开发。它旨在通过一套代码基础来构建跨平台的应用，支持开发 iOS、Android、H5、小程序（微信/支付宝/百度/头条/QQ）、快应用等多个平台。UniApp 的核心优势在于其广泛的平台覆盖范围和高度的代码复用性，极大提高了开发效率和降低了跨平台应用的维护成本。
写在最后
最后，希望大家的小生意都越来越好~~
