React/Phoenix - 转义 HTML 将在浏览器中短暂闪烁未呈现 HTML

Question

我是运行一个使用服务器端渲染的 React/Phoenix 应用程序，我发现当我快速刷新应用程序时，我可以在一瞬间看到未渲染的 HTML 从服务器在浏览器中正确呈现之前。这只发生在转义的 HTML 上，但我想为此应用程序使用转义的 HTML，因为我不希望浏览器认为它是安全的。这种情况发生在 Chrome 和 Firefox 中，但不会发生在 Safari 中。

该应用程序是使用 RePh（我强烈推荐）构建的 - https://github.com/reph-stack/reph - 相关控制器是：

defmodule MyAppWeb.ReactController do
  use MyAppWeb, :controller

  def index(conn, _params) do
    initial_state = %{}
    react_stdio_args = %{
      component: Application.app_dir(:my_app, "priv/static/server/js/app.js"),
      props: %{
        "location" => conn.request_path,
        "initial_state" => initial_state
      }
    }
    {:ok, %{"html" => html}} = StdJsonIo.json_call(react_stdio_args)
    render(conn, "index.html", html: html, initial_state: initial_state)
  end
end

哪个管道数据到 index.html.eex:

<div id="index"><%= @html %></div>
<script>__INITIAL_STATE__=<%= @initial_state |> Poison.encode! |> raw %></script>

在此脚手架的默认设置中，@html 被标记为安全 raw - <%= raw @html %> - 但如您所见，我已将其删除。

所以无论如何，如果我以 'reasonable' 的速度刷新浏览器 window，没有问题...但是如果我开始快速刷新，我可以短暂地看到未渲染的 HTML 在浏览器中 window，类似于：

<div class="AppContainer wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-1859726426"><header class="site-header" data-reactid="2"> etc...

不用说，如果我把raw留在里面，就不会发生这种情况。我也尝试了一些其他的转义方法，比如控制器里的Phoenix.HTML.html_escape(html)，但同样的问题发生。

我想这是因为浏览器需要一小段时间来正确解析和呈现转义 HTML，并且浏览器性能的差异可以归因于不同的布局引擎（也许？）...但我不是这些问题的专家，所以我不确定。有什么方法可以强制我的应用程序等待 HTML 正确呈现后再向用户显示它？

Answer 1

@html这里是一串HTML。您无法通过删除 raw 使其成为 "safer"。删除 raw 将转义字符串中的所有 < 和 >，使浏览器显示原始 HTML 代码。您需要在这里使用raw SSR 才能正常工作。如果您尝试以下操作，您会看到此行为：

<%= raw "<strong>Raw</strong>" %>
<%= "<strong>Escaped</strong>" %>

React/Phoenix - 转义 HTML 将在浏览器中短暂闪烁未呈现 HTML

React/Phoenix - escaping HTML will briefly flash unrendered HTML in browser

html

html-rendering

html-escape

reactjs

phoenix-framework