Skip to content

Add first class support to @ionic/react for Next JS SSR + Partial page pre-rendering #29690

Open
@laurencefass

Description

@laurencefass

Prerequisites

Describe the Feature Request

Im a Next JS developer and recently started using capacitor. NextJS Capacitor integration is flawless and "just works". Now I need a decent mobile theme.

I have been able to wrap my root layout with a client IonAppProvider, but it appears all pages need to be client rendered because of content. This wont work without 'use client'.

import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from "@ionic/react";

export default function Page() {
    return <IonPage id="main-content">
        <IonHeader>
            <IonToolbar>
                <IonButtons slot="start">
                    <IonMenuButton></IonMenuButton>
                </IonButtons>
                <IonTitle>Menu</IonTitle>
            </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
            <h1>Server Component</h1>
            Ionic renders on the server
        </IonContent>
    </IonPage>
}

Given the existing prevalence and the growing importannce of SSR and in particular partial page pre-rendering techniques across different frameworks are there any plans to make Ionic more isomorphic so it "just works" on server and client? Is that even possible?

Could it also be made more router agnostic so it works with next and doesnt require a <RouterOutlet />?

Describe the Use Case

Server side rendering and Partial Page pre-rendering.

Describe Preferred Solution

Next JS (14+) and Ionic integration without reliance on the React Router integration.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions