我想知道是否有人可以解释计时指标Next.js-before-hydration和Next.js-hydration含义,以及它们与 FCP 的关系。这是针对服务器端渲染并在客户端使用钩子的 NextJS 应用程序。
这是“性能”选项卡测量的屏幕截图,该屏幕截图显示将影响反应服务器和 SSR 的新页面加载。这个特定页面的组件在页面稳定下来之前也会在客户端重新渲染多次。我从最初的请求开始放大了该区域,包括 FCP 和 LCP 等最初的核心 Web 重要功能。(TTI 和 TTFB 在屏幕上出现的时间要晚得多。)
看起来它Next.js-before-hydration恰好在服务器请求开始时启动。(幻灯片似乎显示了浏览器中之前页面的缩略图,这似乎是一个开发工具错误,因此请忽略它。)
Next.js-before-hydration在这个例子中持续了 1.48 秒,但是对于这个请求,TTFB 只有 120 毫秒,所以我知道它不仅仅包括服务器响应时间。
我知道 FCP 是“TTFB + 内容加载时间 + 渲染时间”,所以我认为这Next.js-before-hydration一定是其中的一个子集,但我见过其他网站的示例(ticketmaster.com 就是一个例子),其中 的结尾延伸Next.js-before-hydration得很远超出 FP/FCP 甚至Next.js-hydration更晚结束 - 有时就在 onLoad 事件(红色L)之前。
按照电影胶片,内容在我们到达之前开始逐渐显示Next.js-hydration(如图Next.js...dration中标记),这让我认为它已经开始运行挂钩并重新渲染。
Next.js-before-hydration那么当 NextJS 从 过渡到时意味着什么呢?Next.js-hydration?它是否与“第一次”渲染完成(意味着第一次加载每个组件,如 React Profiler 中的第一次渲染)以及钩子何时开始运行有关?
最后,end ofNext.js-hydration意味着什么?这两个指标与 FCP 有何关系?
lighthouse google-chrome-devtools reactjs next.js core-web-vitals
我们的团队最初创建了一个_app.tsxwith getInitialProps,并包含了类似的内容
if (!req) return {};
Run Code Online (Sandbox Code Playgroud)
作为顶线。这个想法是getInitialProps仅在服务器端运行,仅在初始页面加载时运行。我们认为这是一个安全的假设,因为通常的建议(经常在 stackoverflow 答案中重复)是getInitialProps在页面转换时在客户端运行。
我们后来发现getInitialProps,如果您要转换到具有getServerSideProps.
所以这不符合我们的目的 - 我们有几个网络查询,这些查询是getInitialProps在我们的大多数页面转换上进行的(因为我们的大多数页面都有getServerSideProps),而我们的目的是只在新页面上运行这些查询(应用程序)加载。
我们可以useEffect只在组件安装上使用,但我们希望在服务器端而不是客户端运行这些查询,以防止视觉闪烁。
我正在学习如何设置一个上下文,其中包含 setState,但初始测试显示其初始 setState 在客户端和服务器端运行:
...
const getString = (): string => {
console.log('about to set string!');
return 'string';
};
const PagePropsProvider: React.FC<IProps> = ({ pageProps, children }) => {
const [sample, setSample] = useState<string>(getString());
return <PagePropsContext.Provider value={pageProps}>{children}</PagePropsContext.Provider>;
};
...
Run Code Online (Sandbox Code Playgroud)
对于像身份验证上下文这样的东西,我想要的是_app.tsx在getInitialProps页面加载时请求初始用户对象服务器端,将其从道具提供给上下文,而不是让应用程序重新请求初始用户对象不必要在每个页面转换时进行。如果我可以阻止getInitialProps在页面转换上运行,我就可以做到这一点。有没有办法阻止getInitialProps在这些页面转换上运行?或者以更惯用的方式来实现我们的目标?(理想情况下,我们希望getInitialProps …
我们正在考虑基于scala的Akka Persistence应用程序的序列化方法.我们认为我们的持久性事件可能会随着时间的推移而"发展",因此我们希望支持模式演变,并首先考虑Avro.
我们希望避免在每条消息中包含完整的架构.但是,在可预见的未来,这个Akka Persistence应用程序是唯一将序列化和反序列化这些消息的应用程序,因此我们认为不需要单独的模式注册表.
检查avro和各种scala库的文档,我看到了使用消息包含模式的方法,以及如何通过使用模式注册表来"无模式"使用它,但是中间情况呢?什么是无模式的正确方法,但以某种方式包括一个标识符,以便能够查找反序列化对象的正确模式(在本地部署的代码库中可用)?我是否只是创建一个表示我的case类的模式,但是为模式版本添加了一个额外的"identifier"字段,然后在运行时使用某种内存中的identifier-> schema映射?
此外,为每个版本的模式提供一个序列化程序/反序列化类是正确的方法,因此它知道如何将每个版本转换为最新版本?
最后,是否有关于如何对模式演进进行单元测试的建议?例如,在akka-persistence中存储消息,然后实际更改case类的定义,然后终止actor并确保它正确演变.(我没有看到如何在运行时更改case类的定义.)