SSR与innerHTML和LCP的影响如何？

Question

我正在使用React 16SSR呈现一个页面，并延迟加载JavaScript包以提高性能。这减少了我们的初始JavaScript包大小。这可以通过使用React的Fallback和Suspense来设置innerHTML。这是否会影响LCP时间？

Answer 1

从Chrome88(参见LCP changelog)开始，这样的技术应该不会影响LCP，因为LCP现在会考虑从DOM中移除的元素(以前是移除的元素couldn't be the LCP candidate)。

这实际上部分是为了解决您所描述的用例，在这种用例中，执行SSR的JavaScript框架将替换(而不是更新) DOM。

如果您确实看到使用SSR仍然报告LCP水合后的情况，这可能是一个错误，我建议在crbug.com上报告它。