Allow framework components to be used as pages #1230

matthewp · 2025-09-26T16:08:38Z

matthewp
Sep 26, 2025
Maintainer

Body

Summary

Allow framework components to be pages, instead of using Astro modules, for example src/pages/index.tsx being a React component.

Additionally allow framework components to contain islands. Any component in src/islands/ can be used as an island in the framework component pages.

Background & Motivation

The primary reason for creating the .astro format was to facilitate the island architecture. By having our own templating forward we could enforce rules like the use of the client: directives to have a special meaning in compilation.

This RFC seeks to allow framework components to act as pages, allowing users to use the same component model for both their backend and frontend.

Goals

Allow framework components to be used in the src/pages/ directory, and therefore to act as pages.
Provide a mechanism for framework components to contain islands.
Minimal additions necessary to the renderer API to allow this.

Example

src/islands/counter.tsx

export default function() {
  const [count, setCount] = useState(0);
  
  return (
    <div>Count: {count}</div>
    {/* rest of implementation */}
  );
}

src/pages/index.tsx

import { AstroHead } from '@astrojs/react';
import Counter from '../islands/counter.tsx';

export default function() {
  return (
    <html>
      <head>
        {/* contains Astro compiled styles/scripts, etc */}
        <AstroHead>
      </head>
      
      <body>
        <Counter client:idle />
      </body>
    </html>
  );
}

florian-lefebvre · 2025-09-26T17:07:11Z

florian-lefebvre
Sep 26, 2025
Maintainer

Funnily, this is a duplicate of...another discussion from you 😆 #750

2 replies

matthewp Sep 26, 2025
Maintainer Author

I don't remember that at all. Reading it back, not having an answer for islands was a big reason I didn't push it last time.

delucis Sep 27, 2025
Maintainer

Do you think supporting islands is now possible? Would it be in any non-Astro template, or only at the page level?

delucis · 2025-09-27T07:53:26Z

delucis
Sep 27, 2025
Maintainer

Do you have some examples of use cases? Currently the proposal gives the stylistic motivation of using the same component format for page and components, but I’m curious about what users could do with this that they can’t currently.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Allow framework components to be used as pages #1230

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Allow framework components to be used as pages #1230

Uh oh!

Uh oh!

matthewp Sep 26, 2025 Maintainer

Body

Summary

Background & Motivation

Goals

Example

Replies: 2 comments · 2 replies

Uh oh!

florian-lefebvre Sep 26, 2025 Maintainer

Uh oh!

matthewp Sep 26, 2025 Maintainer Author

Uh oh!

delucis Sep 27, 2025 Maintainer

Uh oh!

delucis Sep 27, 2025 Maintainer

matthewp
Sep 26, 2025
Maintainer

Replies: 2 comments 2 replies

florian-lefebvre
Sep 26, 2025
Maintainer

matthewp Sep 26, 2025
Maintainer Author

delucis Sep 27, 2025
Maintainer

delucis
Sep 27, 2025
Maintainer