如何缓解因在服务器端呈现时引用客户端技术而导致的错误,例如document
,document.cookie
,localStorage
等?
例如,我使用React.js和服务器端渲染。我在服务器上渲染客户端gui组件,也将相同的组件分别发送到客户端。服务器端和客户端组件呈现输出和提供给它的props(React props)应该相同,以免失去服务器端呈现的好处。在客户端,React.js查看并决定在这两个条件下呈现哪一个;渲染输出和提供给React组件的道具。在这些组件上,我可能在客户端版本上有客户端技术参考,但是当我在服务器端版本上引用它时我会收到错误。
由于这两个版本的gui组件的javascript代码可能不同,我知道我可以让它们不同,例如服务器端版本不引用document.cookie
。但是为了简化开发,并避免因此而导致的错误,这不是非常简单,恕我直言。此外,浏览器还会在这种情况下运行组件的客户端版本,以便到达document.cookie
或localStorage
,否则此缓解根本不起作用。