React/Phoenix - HTML-Code wird kurz Flash-HTML-Code im Browser blinken

Question

Ich habe eine React/Phoenix App, die Server-Side-Rendering verwendet, und ich finde, wenn ich die App schnell aktualisieren, kann ich für eine Teilung Zweitens sehen Sie den nicht gerenderten HTML-Code vom Server im Browser, bevor alles ordnungsgemäß gerendert wird. Dies passiert nur mit HTML, das maskiert ist, aber ich möchte entkerntem HTML für diese App verwenden, da ich nicht möchte, dass der Browser davon ausgeht, dass es sicher ist. Dies geschieht in Chrome und Firefox, nicht jedoch in Safari.

wurde die app Reph rüstet (die ich empfehlen) - https://github.com/reph-stack/reph - und die entsprechenden Controller:

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 

die Rohre Daten index.html.eex:

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

In der Grundeinstellung für Dieses Gerüst, das @html ist als sicher markiert mit raw - <%= raw @html %> - aber wie Sie sehen können, habe ich das entfernt.

Wie auch immer, wenn ich das Browser-Fenster zu einem ‚vernünftigen‘ Tempo zu aktualisieren, gibt es kein Problem ... aber wenn ich schnell beginnen erfrischend, kann ich kurz die unrendered HTML im Browser-Fenstern, so etwas wie sehen:

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

Unnötig zu sagen, dies nicht, wenn ich raw in verlassen passiert. ich habe auch einige andere Methoden versucht zu entkommen, wie Phoenix.HTML.html_escape(html) in der Steuerung, aber das gleiche Problem auftritt.

Ich stelle mir vor, dass dies passiert, weil der Browser dieses winzige Splitter einer Sekunde benötigt, um das maskierte HTML korrekt zu parsen und zu rendern, und die Unterschiede in der Browserleistung bis zu den verschiedenen Layout-Engines (vielleicht?) aber ich bin kein Experte in diesen Angelegenheiten, also weiß ich es nicht genau. Gibt es eine Möglichkeit, dass ich meine App dazu zwingen kann, zu warten, bis der HTML-Code richtig gerendert ist, bevor er für den Benutzer angezeigt wird?

Answer 1

@html Hier ist eine Zeichenfolge von HTML. Sie können es nicht sicherer machen, indem Sie raw entfernen. Durch das Entfernen von raw werden alle < und > in der Zeichenfolge entfernt, wodurch der Browser den reinen HTML-Code anzeigt. Sie brauchenraw verwenden hier für SSR ordnungsgemäß zu funktionieren. Sie können dieses Verhalten sehen, wenn Sie Folgendes versuchen:

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