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 %>标记为安全 - 但正如您所看到的，我已将其删除。

所以，无论如何，如果我在一个合理的＆＃39;处刷新浏览器窗口步伐，没有问题......但如果我快速刷新，我可以在浏览器窗口中简单地看到未呈现的HTML，如：

<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，您无法使其“更安全”。删除raw将转义字符串中的所有<和>，使浏览器显示原始HTML代码。你需要在这里使用raw来使SSR正常工作。如果您尝试以下操作，则可以看到此行为：

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

React / Phoenix - 转义HTML将在浏览器中暂时刷新未呈现的HTML

1 个答案: