Remix SSG SPA

You are probably better off running your app with a live Remix server. But people ask for SSG all the time so this is an exercise in how you could do that today in Remix. It's slightly more capable now that Remix supports Client Data.

These examples are basically node versions of the approach outlined by @mjackson on Twitter.

Usage

First, clone this repo and install dependencies for the Remix demo apps and for the SSG spidering script:

git clone [email protected]:brophdawg11/remix-ssg.git
cd remix-ssg
npm ci
cd spider
npm ci
cd ..

Then, each app in demos/ is a standalone Remix app that you can run and investigate to see the different patterns you can achieve with Remix and Client Data.

• demos/ssg-mpa - This is an SSG'd application that only uses server loaders so we can SSG entire HTML documents into a multi-page app that can be statically deployed
• demos/ssg-spa-client-loaders - This is an SSG'd application that uses server loaders so we can SSG entire HTML documents, but also hydrates into a SPA via the usage of clientLoaders that do not call the server loaders so it can be statically deployed.
• demos/ssg-spa-loaders - This is an SSG'd application that uses server loaders so we can SSG entire HTML documents, but also pre-rendered the data from the server loaders into .data files using Remix's "Single Fetch" feature. These SSG'd pages hydrate into a SPA that fetch the pre-generated .data files on SPA navigations.
• demos/ssr-ssg-hybrid - This is hybrid SSR/SSG application that where some routes are pre-rendered to HTML and then served statically from the express server on document requests. Other routes are served using normal SSR.