面试题：Next.js 路由系统中客户端与服务端渲染在数据获取方面的差异

Question

请阐述在 Next.js 路由系统下，客户端渲染（CSR）和服务端渲染（SSR）在数据获取方式上有哪些不同点？分别适用于哪些场景？

Answer 1

数据获取方式不同点

1. 客户端渲染（CSR）
   • 时机：在浏览器端完成页面加载后，通过JavaScript发起API请求来获取数据。例如，使用fetch或者axios库在组件挂载后（如useEffect钩子函数中）进行数据请求。
   • 过程：浏览器先加载HTML骨架和JavaScript代码，运行JavaScript代码时才开始获取数据，数据获取完成后再填充到页面中。
   • 请求位置：数据请求在客户端浏览器执行，请求从浏览器发出到服务器，然后服务器返回数据给浏览器。
2. 服务端渲染（SSR）
   • 时机：在服务器端生成HTML页面时就获取数据。在Next.js中，可以使用getServerSideProps函数在每次请求页面时，在服务器端获取数据并将其作为属性传递给页面组件。
   • 过程：服务器根据请求获取数据，将数据填充到页面模板中，生成完整的HTML页面后发送给浏览器。浏览器接收到的是已经包含数据的HTML，无需再额外发起数据请求来填充页面主要内容。
   • 请求位置：数据请求在服务器端执行，直接从服务器内部发起对数据源（如数据库）的请求，无需经过网络从浏览器端发起。

适用场景

1. 客户端渲染（CSR）
   • 高度交互性应用：例如单页应用（SPA）游戏、实时聊天应用等，这类应用需要频繁更新局部状态且用户交互多，CSR可以在客户端高效地处理这些交互，而不需要每次都重新请求服务器。
   • 内容更新不频繁且注重首屏加载体验优化：如果页面内容相对固定，不需要实时更新，通过在客户端缓存数据等策略，可以让首次加载更快，后续页面切换也更流畅，如一些简单的产品展示网站。
2. 服务端渲染（SSR）
   • 内容驱动型网站：如新闻网站、博客等，这些网站需要搜索引擎友好，SSR生成的HTML包含数据，便于搜索引擎爬虫抓取内容，提高网站在搜索引擎中的排名。
   • 对实时数据要求高的应用：例如股票交易平台、实时监控面板等，每次用户请求页面时都需要获取最新数据，SSR可以在服务器端及时获取最新数据并生成页面。