文章/答案/技术大牛

发布

react-dom/server能在客户端工作吗？

react-dom/server是React的一个包，用于在服务器端渲染React组件。它提供了一些方法，如renderToString和renderToStaticMarkup，可以将React组件渲染为HTML字符串。

然而，react-dom/server并不是为在客户端工作而设计的。它的主要目的是在服务器端生成静态HTML，然后将其发送给客户端。这样做的好处是可以提高首次加载速度，改善搜索引擎优化（SEO）以及提供更好的用户体验。

在客户端，我们通常使用react-dom包来将React组件渲染到DOM中。react-dom/server并不包含在浏览器端的React构建中，因此无法直接在客户端工作。

总结起来，react-dom/server主要用于服务器端渲染，而在客户端渲染时，我们应该使用react-dom来进行渲染。

相关·内容

React 同构思想

render-server.js: var React = require('react'); // 与客户端require('react-dom')略有不同 var React = require(...'react'); // 与客户端require('react-dom')略有不同 var ReactDOMServer = require('react-dom/server'); // table...看到这里，你可能要想，这步坑爹吗！搞了半天，这个东西只能在客户端用，说好的同构呢！别急，拉取数据，我们需要另外的方法。...datas: datas }); }); }, 3000); } }); 非常重要：Table组件能在客户端和服务端复用...: var React = require('react'); var ReactDOMServer = require('react-dom/server'); // table类 var Table

1.5K1 0

React同构思想

1.1K2 0

React同构思想

1.1K9 0

React 18 RC 版本发布啦，生产环境用起来！

不过 alpha 毕竟还是属于内部测试版本，可能还包括一些 bug，功能也有很多没放出来，大家不能在生产里去用。...版本一样，功能上不会再有太大变化，也更加稳定，大家可以尝试在生产环境里用起来了～安装安装最新的 React 18 RC 版本： npm install react@rc react-dom@rc 客户端渲染.../server 的 API，旧的 Node.js 流式 API 将会被完全弃用： renderToNodeStream 弃用⛔️️，使用时将发出警告。...，由于设计问题，在 React 18 之前，React 只能在组件的生命周期函数或者合成事件函数中进行批处理。...f); }); // 更新 DOM } 想了解更多可以看 React 18 官方工作组的博客：https://github.com/reactwg/react-18/discussions/21

1.1K1 0

精通 React SSR 之 API 篇

写在前面 React 提供的 SSR API 分为两部分，一部分面向服务端（react-dom/server），另一部分仍在客户端执行（react-dom） ?...把组件树渲染成对应 HTML 标签的工作在浏览器环境也能完成，因此，面向服务端的 React DOM API 也分为两类：能跨 Node.js、浏览器环境运行的 String API：renderToString...()、renderToStaticMarkup() 只能在 Node.js 环境运行的 Stream API：renderToNodeStream()、renderToStaticNodeStream(...字符串以Node.js Readable stream形式返回 P.S.默认返回utf-8 编码的字节流，其它编码格式需自行转换 P.S.该 API 的实现依赖Node.js 的 Stream 特性，所以不能在浏览器环境使用...renderToStaticMarkup的 Stream API，将renderToStaticMarkup生成的干净 HTML 字符串以Node.js Readable stream形式返回 P.S.同样按 utf-8 编码，并且不能在浏览器环境使用

2.2K1 0

React16中的服务端渲染（译）

// using Express import { renderToString } from "react-dom/server" import MyPage from "....事实证明React 16现在有两种不同的客户端渲染方法：当您仅在客户端呈现内容时，使用render() 方法，如果你在服务端渲染结果之上再次渲染则使用hydrate()方法。...这意味着在服务器渲染路径上有很多浪费的工作。然而，在React 16中，核心团队从头开始重写了服务器渲染器，并且根本没有进行任何vDOM的工作。这意味着它可以快得多。...要使用React 16的渲染流，您需要分别在对应于renderToString和renderToStaticMarkup的react-dom / server：renderToNodeStream或renderToStaticNodeStream...// using Express import { renderToNodeStream } from "react-dom/server" import MyPage from ".

1.5K3 0

React16中的服务端渲染（译）

2.3K9 0

文件系统中的目录与切换操作

cd cd，change directory，切换当前工作目录。除指定目录外，还有以下特殊目录。 .: 当前工作目录。 ..: 父级工作目录。 /: 根目录。...# 切换至含有 foo 子字符串的某个目录 $ j foo Q: 你知道 autojump 原理吗，你可以写出来一个 autojump 命令行小工具吗？...在日常工作中，常使用 ls -lah 列出工作目录内容。 # -l: 使用长列表格式 # -a: 列出所有文件，包括以 ....# -a: 列出所有文件 # -F: 对目录末尾添加 /，对可执行文件末尾添加 * # -L: 指定层级 $ tree packages/react-dom -aF -L 2 packages/react-dom...|-- server.browser.js |-- server.js |-- server.node.js |-- src/ | |-- __tests__/ | |-- client/ |

1.3K3 0

如何升级到 React 18发布候选版

这将创建一个在“遗留”模式下运行的 root，其工作原理与 React 17 完全相同。在发布之前，React 给这个 API 添加一个警告，指示它已被弃用，并切换到新的 Root API。...这是因为初始客户端渲染是特殊的，需要与服务器树匹配。.../server 的 API，不支持 Suspense 的 Node.js 流式 API 将会被完全弃用： renderToNodeStream 弃用 ⛔️️ 相反，对于 Node 环境中的流媒体，使用:...自动批处理 (Automatic Batching) React 中的批处理简单来说就是将多个状态更新合并为一次重新渲染，由于设计问题，在 React 18 之前，React 只能在组件的生命周期函数或者合成事件函数中进行批处理...大多数效果不需要任何改变就可以工作，但是有些效果假设它们只被安装或者销毁一次。为了帮助表面这些问题，react 18 引入了一个新的开发-只检查严格模式。

2.3K2 0

用React框架和Express模块进行服务器端渲染

当服务器完成渲染时，客户端的React会接收这个打包文件。看 src/server.js服务器文件，这里是最终奇迹发生的地方，它会把React组件发送到客户端去。先导入所有的库、组件和模板。...from 'react-dom/server'; import App from '..../template'; 我们看到里面有一些新的内容，从 react-dom/server模块中导入了 renderToString函数。...最后，把 body内容和 title内容传进模板文件里去，最终生成的字符串发到客户端去。 ---- 如果我们想从服务器发送一些属性到客户端怎么办？...当服务器上生成响应时，客户端不知道 isMobile这个属性应该是收到的一部分，也不知道要把这个属性的值设为真。我们需要给它一个初始状态，能让客户端先取得这个属性，然后客服两端就匹配了。

4.4K1 0

从头开始，彻底理解服务端渲染原理

做法如下: // server/index.js import express from 'express'; import { renderToString } from 'react-dom/server...原因很简单，react-dom/server下的renderToString并没有做事件相关的处理，因此返回给浏览器的内容不会有事件绑定。那怎么解决这个问题呢？这就需要进行同构了。.../Routes' import { renderToString } from 'react-dom/server'; //重要是要用到StaticRouter import { StaticRouter...换而言之，关于异步数据的操作始终只是客户端渲染。现在的工作就是让服务端将获得数据的操作执行一遍，以达到真正的服务端渲染的效果。...其实也非常简单： //server/utils.js import { renderToString } from 'react-dom/server'; import { StaticRouter

2.3K2 0

文件系统中的目录与切换操作命令

1. cd cd，change directory，切换当前工作目录。除指定目录外，还有以下特殊目录。 .: 当前工作目录。 ..: 父级工作目录。 /: 根目录。...# 切换至含有 foo 子字符串的某个目录 $ j foo Q: 你知道 autojump 原理吗，你可以写出来一个 autojump 命令行小工具吗？...在日常工作中，常使用 ls -lah 列出工作目录内容。 # -l: 使用长列表格式 # -a: 列出所有文件，包括以 ....# -a: 列出所有文件 # -F: 对目录末尾添加 /，对可执行文件末尾添加 * # -L: 指定层级 $ tree packages/react-dom -aF -L 2 packages/react-dom...|-- server.browser.js |-- server.js |-- server.node.js |-- src/ | |-- __tests__/ | |-- client/ |

1.1K6 0

React 18快速指南和核心概念解释

| | 支持 | Automatic Batching, Transitions, Suspense on the server...弃用 | ReactDOM.render, renderToString 如何升级到React 18 从npm或yarn安装React 18和React DOM npm install react react-dom...这大大减少了React在后台需要做的工作。React将等待微任务完成后再重新渲染。...例如:当在预先输入字段中输入时，会发生两件事——一个闪烁的光标显示输入内容的视觉反馈，以及一个搜索功能在后台搜索输入的数据。向用户显示视觉反馈是重要的，因此是紧急的。...新特性:服务器 Suspense React 18介绍: 服务器上的代码分割与Suspense 服务器上的流渲染客户端渲染vs服务器渲染客户端渲染流程：为了优化用户体验，避免用户黑屏，可以使用服务器呈现

3281 0

如何升级到 React 18

2.2K3 0

【命令行一】与操作目录相关的 Linux 命令

9416 0

React 在服务端渲染的实现

原文地址：Server-Side React Rendering 原文作者：Roger Jin React 在服务端渲染的实现 React是最受欢迎的客户端 JavaScript 框架，但你知道吗...import fs from 'fs'; import path from 'path'; import React from 'react'; import ReactDOMServer from 'react-dom.../server'; import Hello from '....我们需安装 react-transmit： npm install react-transmit --save React Transmit 给了我们优雅的包装器组件（通常称为“高阶组件”），用于获取在客户端和服务器上工作的数据.../server'; import Hello from '.

2.2K7 0

React 16 服务端渲染的新特性

/server" import MyPage from "....，通知客户端使用 render()渲染在服务端生成的HTML，这与客户端渲染应用程序的方法一致： import { render } from "react-dom" import MyPage from...这意味着服务器使用更少的内存，对I/O条件更敏感，这两种情况都可以帮助服务器在充满挑战的条件下保持正常工作。...举个例子，从上面的例子可以用流式重写： // using Express import { **renderToNodeStream** } from "react-dom/server" import...流有一些陷阱虽然在大多数场景中，对流的渲染应该是一种升级，但目前有一些流媒体模式不能很好地工作。

4.5K3 0

react 同构初步（2）

阅读资料，给出了最简单的方法： https://reacttraining.com/react-router/web/guides/server-rendering Rendering on the server...import React from 'react'; import {renderToString} from 'react-dom/server'; import express from 'express...is runing..') }); 作为客户端（client/index.js）同构，也这样处理： import React from 'react'; import ReacDom from 'react-dom...如果要进行同构必定包含client和server两端。如果数据流是异步的，在client端无非就是componentDidAmount。在server端逻辑也是基本一致的。...useEffect拿到请求方法，用provider传递状态： import React from 'react'; import ReacDom from 'react-dom'; import {BrowserRouter

2.1K2 0

react 同构初步（1）

react-dom提供了server的渲染api：renderToString,它可以把react组件解析为html。因为在服务端渲染，而服务端本身是不支持jsx的。...import React from 'react'; import {renderToString} from 'react-dom/server'; import express from 'express...is runing..') }); 写完之后安装一下用到的库： npm i react react-dom express -S 安装好后，ssr就初步完成了。...点击➕，始终不会有反应客户端注水：CSR 想要真的能交互，离不开客户端js的加载。怎么做呢？...在上面的代码中，我们制定了客户端js的入口，所以在根目录下创建/client/index.js：在这里，我们通过hydrate（react服务端渲染方法，替代旧有的reactDom.render）完成注水工作

1.6K3 0

刚刚，React 19 正式发布！

ThemeContext); return ( {children} ); } use API 只能在渲染过程中调用...它们被设计为与流环境（如 Node.js Streams 和 Web Streams）一起工作。...当使用 “use server” 指令定义一个服务端 Actions 时，框架会自动创建一个指向服务器函数的引用，并将这个引用传递给客户端组件。...通过原生支持这些元数据标签，能够确保它们在仅限客户端应用、流式服务端渲染和服务器组件中正常工作。样式表支持无论是外部链接的样式表（如Server Components：提供在独立于客户端应用或 SSR 服务器环境中提前渲染组件的新选择，相关库可将 React 19 作为对等依赖，应用于支持全栈 React 架构的框架。

4972 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

react-dom/server能在客户端工作吗？

相关·内容

React 同构思想

React同构思想

React同构思想

React 18 RC 版本发布啦，生产环境用起来！

精通 React SSR 之 API 篇

React16中的服务端渲染（译）

React16中的服务端渲染（译）

文件系统中的目录与切换操作

如何升级到 React 18发布候选版

用React框架和Express模块进行服务器端渲染

从头开始，彻底理解服务端渲染原理

文件系统中的目录与切换操作命令

React 18快速指南和核心概念解释

如何升级到 React 18

【命令行一】与操作目录相关的 Linux 命令

React 在服务端渲染的实现

React 16 服务端渲染的新特性

react 同构初步（2）

react 同构初步（1）

刚刚，React 19 正式发布！

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐