【前端面试】挖掘做过的nextJS项目（下）——详谈服务端渲染

贾明恣

于 2024-08-16 14:30:32 发布

阅读量312

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43342290/article/details/141255556

版权

nextjs做服务端渲染是基于nodejs，node环境与浏览器环境有很大区别——模块系统、web api

Next.js 怎么支持SSR，同时又使用 Web API

Next.js 支持服务器渲染（Server-Side Rendering, SSR）的代码使用 Web API，主要是通过以下方式实现的：

客户端和服务器端分离：Next.js 允许开发者编写可以在服务器端渲染的组件，同时这些组件也可以在客户端执行。服务器端渲染主要关注生成初始 HTML，而客户端则处理交互和动态内容。
Hydration：Next.js 使用 React 的 hydration 过程，在服务器渲染的 HTML 发送到客户端后，React 在客户端会“激活”这些静态标记，将它们转换为具有完全交互功能的组件。
Next.js 提供的 API：Next.js 为服务器端渲染提供了特定的 API，如 getServerSideProps 和 getStaticProps，这些 API 允许你在服务器端获取数据并渲染页面。
客户端代码执行：一旦页面在服务器上渲染并发送到客户端，客户端的 JavaScript 引擎将执行页面中的脚本，包括 React 组件的客户端逻辑。
条件渲染：在组件内部，你可以使用条件渲染来决定是否执行某些代码。例如，你可以检查 typeof window 是否定义来确定代码是否在服务器端还是客户端运行。
使用 useEffect 钩子：在 React 组件中，你可以使用 useEffect 钩子来执行仅在客户端运行的副作用。useEffect 允许你添加清理函数，这样你就可以在组件卸载时执行清理操作。
Web APIs 的模拟：在服务器端，如果需要使用到特定的 Web API，你可以使用模拟（mocks）或者 polyfills 来提供类似的功能。
动态导入：Next.js 支持动态 import() 语法，这允许你在需要时按需加载模块，包括那些可能依赖于 Web API 的模块。

通过这些方法，Next.js 能够确保你的代码在服务器端渲染时不依赖于 Web API，同时在客户端执行时能够充分利用浏览器提供的能力。这种分离确保了应用的高性能和良好的用户体验。

其他SSR策略

WebAssembly（简称 wasm）和 Service Workers 是现代浏览器技术，它们可以在浏览器环境中提供服务器端渲染（SSR）的能力，尽管它们执行 SSR 的方式和目的与传统服务器端渲染有所不同。下面是它们如何在浏览器中实现 SSR 的概述：

WebAssembly

WebAssembly 是一种用于在浏览器中运行的低级二进制指令格式，它被设计为与 Web 浏览器的 JavaScript 引擎并行工作，以提供接近原生的性能。WebAssembly 可以用于 SSR 的方式包括：

编译到 WebAssembly：服务器端的应用程序可以编译为 WebAssembly 模块，然后由浏览器下载和执行。这种方式下，SSR 实际上是在服务器上完成的，但是渲染的逻辑以 WebAssembly 模块的形式在客户端运行。
客户端渲染：WebAssembly 可以用于在客户端执行复杂的逻辑，包括渲染页面。虽然这不是传统意义上的 SSR，但它可以实现类似的效果，即在客户端快速生成页面内容。
同构 JavaScript：使用 WebAssembly，你可以编写可以在服务器端和客户端都能运行的代码（同构 JavaScript），这样 SSR 逻辑可以在服务器端执行，然后将生成的页面发送到客户端，客户端可以进一步使用 WebAssembly 增强性能。

WebAssembly（简称 wasm）与 Web 浏览器的 JavaScript 引擎的关系

WebAssembly（简称 wasm）与 Web 浏览器的 JavaScript 引擎是互补的关系，它们共同为在浏览器中运行高效、高性能的代码提供了不同的解决方案。以下是它们之间的一些关键联系和区别：

补充关系：
- JavaScript 引擎是浏览器内置的，用于解析、编译和执行 JavaScript 代码的组件。而 WebAssembly 是一种新的代码格式，它提供了一种方式，让浏览器可以近乎于原生性能执行用其他语言编写的代码。
性能：
- JavaScript 引擎执行 JavaScript 代码时，通常会有解释执行和即时编译（JIT）的过程，这可能会导致性能上的损失。相比之下，WebAssembly 设计为低级的虚拟指令格式，它可以被编译为机器码，从而提供接近于原生应用的性能。
用途：
- JavaScript 是一种高级语言，适合于构建复杂的 Web 应用和处理 Web 浏览器中的各种交互。WebAssembly 主要用于执行性能敏感型任务，如 3D 渲染、视频处理、游戏开发等。
语言无关性：
- WebAssembly 设计为与语言无关的平台，意味着可以用 C、C++、Rust、TypeScript 等多种语言编写代码，然后编译为 wasm 格式在浏览器中运行。
集成性：
- WebAssembly 旨在与 JavaScript 引擎紧密集成，但作为独立的代码执行环境。wasm 模块可以被 JavaScript 调用，也可以调用 JavaScript 函数，实现两者之间的互操作。
安全性：
- 与 JavaScript 一样，WebAssembly 也在浏览器的安全沙箱中运行，确保了 Web 应用的安全性。
Web API 访问：
- JavaScript 可以直接访问浏览器提供的 Web API。WebAssembly 通过 JavaScript 作为桥梁，间接访问这些 API。
开发工具：
- 浏览器的开发者工具主要用于调试 JavaScript 代码。对于 WebAssembly，虽然调试支持正在逐步增强，但目前主要依赖于 JavaScript 来进行调试和错误跟踪。
生态系统：
- JavaScript 拥有庞大的生态系统和社区支持，包括各种框架、库和工具。WebAssembly 相对较新，但其生态系统正在迅速增长，并且得到了主流浏览器厂商的支持。
未来发展：
- WebAssembly 正在不断发展，未来可能会支持更多的 Web 功能和 API，同时与 JavaScript 引擎更紧密地集成。

总的来说，WebAssembly 和 JavaScript 引擎在浏览器中是相辅相成的。JavaScript 引擎适合于构建交互式 Web 应用，而 WebAssembly 则为执行高性能计算任务提供了可能。两者的结合使得 Web 开发者可以针对不同的应用场景选择最合适的技术。

Service Workers

Service Workers 是运行在浏览器后台的脚本，它们可以拦截网络请求并提供离线支持等功能。Service Workers 可以用于 SSR 的方式包括：

拦截请求：Service Worker 可以拦截对服务器的请求，并使用缓存或合成响应来提供页面内容，这可以在没有网络连接的情况下提供类似 SSR 的体验。
动态页面生成：Service Worker 可以在客户端接收到路由请求时，动态生成页面内容，然后将其作为响应发送给页面。这种方式类似于 SSR，因为它可以在浏览器中生成完整的页面。
与服务器协同：Service Worker 可以与服务器协同工作，服务器可以提供初始的 HTML 框架，Service Worker 则负责进一步的页面内容填充或动态更新。
预加载和预渲染：Service Worker 可以在后台预加载或预渲染页面，当用户实际访问页面时，可以提供更快的加载速度。