Question

The bounty expires in 7 days. Answers to this question are eligible for a +50 reputation bounty. Zev Ross is looking for a canonical answer:

This problem is applicable to anyone trying to persist state in Next.js. The current answer does not solve the whole problem. I need to know if there even is a possible way to avoid this "flash."

我试图储存一些基本的(非敏感的)用户,在反应环境中宣传客户,如显示姓名和形象。这些资料储存在当地,即使客户关闭/卸载该网页,而且其背景收集了该网页的数据,在客户部分显示。在职能上,它进行罚款。然而,我会遇到一些问题:

为了避免水解错配,我不得不对整个部件进行分离。
即使我能够保持SSR,其内容也需要比其他客户组成部分多得多的时间进行水力测量,即使我建造了电灯。这种布局变化实际上使我感到困惑。

我的问题是,我如何能够立即展示这一信息? 我没有看到任何其他人处理这个问题。如果我把这一错误的方式stor倒起来,那么什么是正确的?

%25 我试图寻找各种方式,在接下来的几岁时使用反应环境,但似乎没有人暗示我做任何错误。我也试图扭转推论:next-themes ,以图示其如何运作,但我无法理解。

任何帮助都将受到高度赞赏。

Update

我试图说明我如何能够消除这一拖延,但却没有结果。我普遍认为,它只是使用SSR的结果,甚至在客户部件能够装满之前,也产生服务器制的页面负荷(尽管在生产模式中这种时间差异不那么明显)。下一个主题似乎避免了这种情况,其方法是简单地阻止该网页的展示,直到它发现html的标签和媒体查询。

作为一种解决办法,我已执行一个kel子部分,以避免布局的转变。如果有人知道如何立即使这一信息负荷,我仍然愿意找到解决办法,但我已经同意,这是不可能的。

Update 2

I have added an attempt to use Zustand instead context on my codesandbox linked above. It has the same issue - there s still a brief period of time before the content loads. I want to know how users of Zustand counteract this problem. I still haven t found any examples that have successfully solved this problem.

Answer 1

您的问题似乎围绕<代码>AuthContext构成部分及其与服务器方面的相互作用在接下来的js中形成。

产生这一问题的原因是,服务器与客户之间的“<代码>用户Data数值不一,导致水解故障。之所以出现这种故障,是因为React API hydrateRoot()预计所提供内容与服务器发送的超文本相匹配。

详情请见 React document和“pitfalls”部分。它建议避免使用诸如<条码>窗口类型!=未定义的或直接按照您的成文逻辑使用浏览器( localStorage),因为这可能会造成服务器和用户头盔之间的不匹配。

在此,我的工作是:

Initialize the useState hook with a default value of null to ensure consistent initial rendering.
Use the useEffect hook to update the userData after the component mounts.
Remove dynamic imports and directly import ClientComponent.
display something in clientComponent before update

修订后<代码>AuthContext构成部分:

import React, { createContext, useContext, useEffect, useState, Dispatch, SetStateAction } from "react";

export default function AuthContext({
  children,
}: {
  children: React.ReactNode;
}) {
  const [user, setUser] = useState<string | null>(null); // Initialize with null
  
  // update after component mount
  useEffect(() => {
    const userData = getUser();
    if(userData){
      setUser(userData);
    }
  }, []);

  return (
    <Context.Provider value={{ userData: user, setUserData: setUser }}>
      {children}
    </Context.Provider>
  );
}

export const useAuthContext = () => useContext(Context);

const getUser = () => {
  if(typeof window ===  undefined ) return null; // Check for server-side rendering
  let user;
  try {
    user = localStorage.getItem("user");
    if (!user) {
      user = "I want this to be rendered instantly too!";
      localStorage.setItem("user", user);
      return user;
    }
  } catch (e) {}
  return user;
};

请注意,这种做法可能会使水力降低,因为贵组成部分必须达到两倍。吸收用户在连接缓慢方面的经验。 Java成文法的负荷可能大大晚于最初的超文本处理,因此,在水解可能感到对用户的jar笑之后,便会立即形成不同的电离层。

But again you shouldn t access browser-only API in render logic. Hope this useful to you.

Answer 2

我的问题是,我如何能够立即展示这一信息?

如果你在当地储存中储存用户,那么你就无法这样做,因为在服务器中,<编码> 当地编码<>/代码>使得不可能进行安装过程。 <代码>当地Storage是一种浏览器,在服务器上不存在。在服务器方面,接下来的js将产生服务器上的超文本,并发送给客户。水文是一种过程,通过React aservers to the Service-rendered RUS,并使之完全互动。在此过程中,您应指定用户为null而不是认证。在水化完成后,你可以从<代码>当地Storage获取数据,并更新用户。

如果你想要立即显示用户,你就应当处理服务器上的认证。

Update

Update 2

友情链接