Support Client-Only routes.

[Trumspringa]

Summary

Astro requires SSR for parameterized routes to be resolved dynamically. This should be possible without the need of SSR with client-only routes. As seen in GatsbyJS and NextJS

Background & Motivation

I want to have a 100% static site with a few routes that are behind authentication and communicate with a Supabase database. This is currently possible in Gatsby using "client-only routes" and I also believe it's possible using the Pages router in Next and coming soon to their App router.

It would remove the need for adapters in this use case where SSR is otherwise not wanted.

Goals

To be able to have dynamic routes controlled by an SPA router that takes over any routes. For example a page at /app/[...].astro could just render an component with react-router, solid-router etc and the client-only directive. The [...] syntax is what gatsby uses. Hosting would also need to configure any redirects from /app/* to /app/[...]/index.html. But it seems like it should be doable with Astro.

Are there any roadblocks in implementing this?

[ematipico]

Gatsby is a React framework, so you'd have client side logic too, out of the box.

Astro doesn't impose any client decisions. So if you want to have a mini spa, you can already do this today by using a dynamic route, and render your client side framework there.

[Trumspringa]

Correct. But the dynamic route needs to be SSR. I'm suggesting to make it possible to do without SSR like Gatsby and NextJS allow.

[ematipico]

Why do you need an on-demand page? I use a simple static page an it works like a charm

[Trumspringa]

Because mine uses dynamic routes. Do you use getStaticPaths in yours?

I basically have an app directory where I have one astro page [..all].astro, I tried just having a component there which is the solid-js router with multiple routes, thinking that anything /app/* would be handled by this page. But got an error saying that a getStaticPaths function needs to be exported for dynamic routes, meaning you need to know the paths at build time.

I have a route for example /app/todos/:id where id is dynamic and I want it to be resolved client side by the router not by using getStaticPaths.

The Astro documentation says your project needs to be either SSR or Hybrid with the dynamic routes page being SSR in order to achieve this.

"In Astro’s default static output mode, these pages are generated at build time, and so you must predetermine the list of authors that get a corresponding file. In SSR mode, a page will be generated on request for any route that matches".

In order for my example to work I would have to read the database and get all todoIds then use getStaticPaths to generate the paths that will be handled by the router. I assume that would work although I haven't tried. But I would like the page to just be static and render the component for all routes in that directory. Gatsby and NextJS can both do it.

I'm interested in why that needs SSR in Astro and whether it can be achieved in static mode. As that would negate the need for a server.

[Trumspringa]

The docs state that it is possible "Static sites can include Astro islands for interactive UI components or even entire embedded client-side rendered apps! written in the UI framework of your choice in an otherwise static, pre-rendered page". But doesn't provide any information on how to achieve it.

Not sure how it can be done when dynamic routes in static mode must export the getStaticPaths function and all paths need to be known at build time.

Here's my code that currently only works if the page is not pre-rendered. This is in pages/app/[...path].astro

---
export const prerender = false
import BaseLayout from "../../components/BaseLayout.astro";
import App from '../../components/App.jsx'
---

<BaseLayout>
        <App client:only="solid-js" />
</BaseLayout>

And a simplified version of my App component is:

import { Router, Route } from "@solidjs/router";
import Layout from './Layout'
import Todos from './Todos'
import Todo from './Todo'
import Profile from './Profile'

export default function App() { 
    return (
        <Router root={Layout}>
            <Route path="/app/todos" component={Todos} />
            <Route path="/app/todos/:id" component={Todo} />
            <Route path="/app/profile" component={Profile} />
        </Router>
    )
}

[Trumspringa]

Finally found that it was an issue with my redirects on deployment because of trailing slashes.

Closing the discussion.

[mortbauer]

Many thanks for the quick reply, I'm also going for static anyways and using nginx for the "rewrites", managed it to work.

[Knight-H]

since the rewrites work on the server, how would this work in the dev environment?

[Knight-H]

one hack i can think of is
(1) re-enabling hybrid mode
(2) use the slug /app/[...path].astro with prerender=false and return Astro.rewrite("/app"), which will allow the App client component to be displayed

And reverse everything back to static mode in deployment... which I think creating 2 projects of 1 SPA and 1 SSG and letting the server handle rewrites may be easier (unless there's an easier way to manage this).

[Trumspringa]

since the rewrites work on the server, how would this work in the dev environment?

In my case netlify dev handles it based on my _redirects file. I think Cloudflare Pages also uses _redirects while Vercel uses a vercel.json file.
I imagine it should be straightforward to use NGINX for your dev server for rewrites too if you're not using Cloudflare, Netlify, Vercel etc. But I'm not familiar with using it.

one hack i can think of is
(1) re-enabling hybrid mode
(2) use the slug /app/[...path].astro with prerender=false and return Astro.rewrite("/app"), which will allow the App client component to be displayed

You wouldn't need Astro.rewrite in this case as the dynamic path would always be handled by the [...path].astro file in SSR mode.

It would be very cumbersome to have to switch the rendering modes as I don't think you can change it based on import.meta.env.MODE being development or production and I'm also not sure if there's anyway to ignore a file being built, so after you change the rendering mode back to 'static' the build will fail as the /app/[...path].astro file doesn't export a getStaticPaths function.

[universse]

For development alternatively you can set up a vite plugin.

   vite: {
    plugins: [
      {
        name: 'rewrite',
        configureServer(serve) {
          serve.middlewares.use((req, _, next) => {
            if (req.url?.startsWith('/app/')) {
              req.url = '/app'
            }
            next()
          })
        },
      },
    ],
  }