What's the purpose of `@page_title` in the title tag? #36

pkayokay · 2025-02-28T13:42:11Z

pkayokay
Feb 28, 2025

I'm curious what the @page_title is supposed to do.

Setting assign(:page_title, "Hello World") only sets the title tag when viewing source, it's only actually visible in the rendered DOM when using <Head title="Hello" />, and setting this head tag overrides the assigned page_title anyway.

Answered by derrickreimer

Feb 28, 2025

The <.inertia_title> server-side component (which is populated with the page_title assign variable by convention) is a simple component that:

Ensures the page title is populated in the server-rendered response (which is important for SEO if this is a public-facing page)
Includes the inertia attribute on the title tag (<title inertia>Your Title</title>), so that the client-side can change the title as it needs to (via the <Head> component).

You are correct that the client-side also needs to know what the page title should be, so that it can be kept up to date any time the page changes (and for internal navigation, this needs to happen using just the information provided via Inertia page …

View full answer

derrickreimer · 2025-02-28T14:02:26Z

derrickreimer
Feb 28, 2025
Maintainer

The <.inertia_title> server-side component (which is populated with the page_title assign variable by convention) is a simple component that:

Ensures the page title is populated in the server-rendered response (which is important for SEO if this is a public-facing page)
Includes the inertia attribute on the title tag (<title inertia>Your Title</title>), so that the client-side can change the title as it needs to (via the <Head> component).

You are correct that the client-side also needs to know what the page title should be, so that it can be kept up to date any time the page changes (and for internal navigation, this needs to happen using just the information provided via Inertia page props). It could be interesting to think about making this more "automatic", but I'm hesitant to add too much magic.

This is how I've been solving this in my apps:

Create a assign_page_title helper function that puts it in the bare assigns (for SSR) and in the Inertia page props and use this in all my controller actions:
```
def assign_page_title(conn, title) do
  conn
  |> assign(:page_title, title)
  |> assign_prop(:page_title, title)
end
```

Add a <Head> component to my root layout component that ensures the page title on the client-side is always set to the page title:

import { Head, usePage } from "@inertiajs/react";
import React, { useEffect } from "react";

const RootLayout = ({ children }: React.PropsWithChildren) => {
  const page = usePage<{ pageTitle: string; }>();

  return (
    <>
      <Head>
        <title>{page.props.pageTitle}</title>
      </Head>
      {children}
    </>
  );
};

export default RootLayout;

1 reply

pkayokay Feb 28, 2025
Author

Makes sense, I also set up something similar to pass down the page_title prop.

Thanks for the clarification!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

What's the purpose of `@page_title` in the title tag? #36

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

What's the purpose of @page_title in the title tag? #36

pkayokay Feb 28, 2025

Replies: 1 comment · 1 reply

derrickreimer Feb 28, 2025 Maintainer

pkayokay Feb 28, 2025 Author

What's the purpose of `@page_title` in the title tag? #36

pkayokay
Feb 28, 2025

Replies: 1 comment 1 reply

derrickreimer
Feb 28, 2025
Maintainer

pkayokay Feb 28, 2025
Author