Advanced

SSR Control

Turn server rendering off for browser-only components

ssr={false}

Key concepts

The same component is rendered twice here, once with ssr={true} and once with ssr={false}. Everything else about them is identical — the contrast is the whole point.

ssr_live.ex

defmodule MyAppWeb.SSRLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <div class="flex gap-4">
      <.react ssr={true} name="SSR" socket={@socket} text="Rendered on the server" />
      <.react ssr={false} name="SSR" socket={@socket} text="Rendered only in the browser" />
    </div>
    """
  end
end

How it works

With ssr={true} (the default), the server renders the component to HTML on the first response, so its content is present before any JavaScript runs and visible to a client with JS disabled or slow to load. React then hydrates that markup in the browser.

With ssr={false}, the server sends only an empty placeholder; the component exists nowhere until React mounts it in the browser. Reach for this for anything that only makes sense client-side — a component that touches window, a third-party widget with no server-safe render path, or anything where paying for SSR buys nothing.