有状态组件时的 Next.js 服务器端渲染答案

【问题标题】：Next.js Server Side Rendering when stateful component有状态组件时的 Next.js 服务器端渲染
【发布时间】：2022-11-22 02:22:47
【问题描述】：

我正在将我的网站从创建 React 应用程序至接下来.js我想澄清一下保持状态并有条件渲染组件的 React 组件是如何渲染的。

在我的网站上，我正在使用反应式动画包来初始动画我的登录页面的英雄文本，只有在呈现此文本后，其他组件才会可见/开始它们的动画。文本是否完成动画的逻辑是这样的：

const [line1Complete, setLine1Complete] = useState(false);
<TypeAnimation
    sequence={[
        `Hi, I'm Jack`,
        () => {
            setLine1Complete((line1Complete) => {
            return !line1Complete;
            });
        },
    ]}
    cursor={false}
    wrapper="div"
    speed={30}
    className={
        "m-0 text-white text-5xl sm:text-6xl md:text-7xl font-bold w-full text-left"
    }
/>

其他组件具有类名，当 line1Complete 设置为 true 时，这些类名有条件地改变。

想要将我的网站迁移到的主要原因接下来.js是利用服务器端渲染并改进第一次内容丰富/有意义的绘画但是我想知道这是否条件渲染基于状态会减慢这个过程。据我所知，服务器端渲染通过为客户服务工作静态HTML首先是页面，然后是页面水合的一旦反应javascript 已加载。这是否意味着一旦将静态 HTML 加载到页面上，客户端将不得不等待反应bundle 在打字动画开始之前下载并执行，因此页面上的任何其他动画？

如果是这种情况，渲染速度仍然会更快，因为隐藏的元素已经提供给页面，但如果用户看不到这些元素，他们不一定会从中受益。

任何描述/有用的资源都将不胜感激，以帮助我进一步理解这个过程。

【问题讨论】：

标签： reactjs next.js next

【解决方案1】：

我是 next js 的新手，但这很容易检查。 NextJs服务端渲染流程：

服务器将页面呈现为初始 html
客户端呈现 html
客户端加载响应 javascript 并连接到初始 html 状态（水合 html）
直到 hydration javascript 函数才附加到 html 元素，因此在加载 javascript 之后才开始输入。

您可以通过打开开发工具并限制网络连接来查看这一点。加载 html 但未显示任何内容。然后加载 javascript 包并开始输入。

如果您可以使动画纯 css，那么它会在 html 加载时发生。

https://css-tricks.com/snippets/css/typewriter-effect/

【讨论】：