为什么我的客户端代码在节点后端编译和运行？

Question

我是 SSR 的新手，所以我不确定这个问题和我的解决方案是否是标准做法，但我无法想象。

我的目标是拥有一个允许用户在页面上添加/删除项目的动态页面。我最初编写这个组件的目的是让它只是一个客户端反应项目，但现在我想把它放在服务器上。现在，当我将代码翻译到新项目时，我遇到了几个错误，这与我的后端运行的代码有关，而这些代码只应该在客户端运行。

例如，我早些时候遇到了这个问题React Redux bundle.js being thrown into request，我能够通过 Janky 解决方案解决这个问题，我确保它正在传递客户端代码并停止执行它是从后端传递的。现在我不得不重构我的代码以不使用 fetch() 函数，因为它不是节点后端识别的函数，现在它抱怨我使用 document 对象，因为这也不是节点中的事情。

我可以继续导入新模块来修复错误，以防止我的网站崩溃，但我感觉自己就像在一艘小船上用鸭带修补新洞，等待找到下一个洞。

如果有必要，这是我的配置图像我在之前的堆栈溢出问题中也有其他图像（上面的链接）

Answer 1

对于bundle.js 问题，我不确定为什么会发生。

对于fetch问题，我认为这是SSR的一个常见问题，如果你自己实现它，你需要在你的应用程序的不同地方处理条件：

if(!!window) {
  // do client-side stuff like accessing
  // window.document
}

基本上，SSR 最常见的用法是处理应用程序在服务器端的首次执行。这包括：

• 路由解析
• 获取数据（使用 nodejs http 模块）
• Hydrating stores（如果您使用 redux 或其他数据库）
• 渲染界面

执行完成后，您的服务器会返回捆绑的 js 应用程序以及水合商店和 UI，并将其返回给客户端。后续请求或者路由更新都会在客户端执行，所以可以直接使用fetch或者react-router

---

进行 SSR 的优点是：

• 伟大的第一次满足
• 非常适合 SEO
• 客户端机器做的工作更少

有很多库可以帮助您处理 SSR 以及 nextjs、use-http 等框架