- 客户端渲染(CSR):渲染过程在客户端进行,服务器返回未经处理的HTML给客户端。
- 单页面应用(SPA):所有需要的资源(HTML,CSS,JS等)在一次请求中加载,动态加载不需刷新。
- 服务器端渲染(SSR):渲染过程在服务器端进行,通常使用JSP/PHP。此模式代码耦合度高,因为模板语言中混杂编程语言,维护起来很困难。
- 同构SSR:一种为前端应用服务的后端(BFF),一套React代码在服务器上运行一遍,再在浏览器上运行一遍。前端和后端都参与渲染,首次渲染出的HTML应该是相同的。
- 静态站点生成:在构建过程中,结果页面直接输出为HTML到磁盘,每次访问直接返回给客户端,相当于静态资源。
- CDN是一个分布式网络,由分布在不同区域的边缘节点服务器组成。它可以减轻服务器端的压力,但是只能处理静态页面。相比之下,SSR和Next.js具有更短的首屏时间,并且可以生成与用户相关的内容。Next.js是一个基于Node.js的开源Web开发框架,它支持服务端渲染和生成静态网站,并且易于使用,功能强大,涵盖了足够多的性能优化和生态系统。
Next.js 数据注入有四种方式:
- getServerSideProps: 这是 Next.js 用于在服务器端渲染页面时进行数据注入的一种方式。该方法允许开发人员在服务器端获取数据并将其注入到页面中。
- getStaticProps: 这是 Next.js 用于在静态生成页面时进行数据注入的一种方式。该方法允许开发人员在生成静态页面前预先获取数据并将其注入到页面中。
- getInitialProps: 这是 Next.js 早期版本中用于数据注入的一种方式,现在不再推荐使用。
- 客户端注入: 这是 Next.js 用于在客户端渲染页面时进行数据注入的一种方式。该方法允许开发人员在客户端通过 JavaScript 代码获取数据并将其注入到页面中。