Should mount/3 be separated with on_socket_connect?

Phoenix Forum Chat / Discussions
,
1

I’ve been building an app with phoenix liveview for 3 months. Although it’s not a big application, but one is already running in production. Two are in development, we’ll launch those in 3 months more or less.

I’m very familiar with node.js and react and I trying to switch to phoenix liveview. Server side rendering on React is pretty tough for small team. That’s the main reason why we switched to liveview. React is generally good except SSR.

LiveView has excellent concept, but lifecycle methods are pretty difficult to handle. When you visit a website [mount/3](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#c:mount/3) always called twice. And that makes browser render twice, leading browser to “blink”.

defmodule XWeb.ShowLive do
  alias X.Project

  mount(params, session, socket) do
    data = Project.list_items()
    {:ok , assign(socket, :data, data)}
  end
end

This causes re-rendering when socket is connected. So I found an answer and it doesn’t actually solve the problem. I want my app partially functional without websocket and also SEO friendly. To do that it seems “blink” is inevitable due to mount called twice separately with GET request and socket connection.

I’m new to elixir and phoenix. So this might sound like dumb. It would be good to separate mount and socket connection and assigns can live in browser session or indexdb?

2

The „blink“ you‘re describing is the same thing, as react hydrating the server rendered markup on the client once initialized. There has to be a point where static markup returned by the http request is updated to become „dynamic“. I just feel that fetching contents instead of storing them in the markup of the static render is common in liveview, and uncommon for react SSR (as hydration is client side only). Therefore a liveview might update by the hydration based on fresh content, while a react hydration is meant to produce the same markup the server sent.