Is SSR all or nothing? -or- Best way to handle CMS previews. | Astro Lounge | Page 1

gentle jacinth Nov 4, 2022, 6:09 PM

#

I would love to use Astro for one of my projects instead of Next.js, but a roadblock for me would be giving my client's content editors a way to preview their CMS updates before publishing. I will either be using Strapi or Drupal for my headless CMS and both have ways to have content in a draft status. Doing a complete rebuild of the static site if data changes is straightforward with web hooks, but it will be a hard sell for me to tell my content editors they have to wait 5 minutes or more to see their draft content edits in some kind of preview of the front end app before publishing, because the entire site needs to rebuild. What would be the recommended route if I wanted to have the main "published" website completely rebuild when necessary (no matter how long that takes), but ALSO have an SSR delivered preview page that would show the user a page with live draft data? The data would be the latest draft of that content, but it would need to be SSR and not static as to get the latest draft. Would I need to have two different versions of the site? One that is running static and the other where the entire site (all pages) are running as SSR or can I somehow do both? Another complication is that I am forced to use AWS, so either way, the SSR part of this would need to run on AWS. I'm assuming I would maybe need to use the Node integration if doing SSR with AWS?

echo sail Nov 4, 2022, 6:12 PM

#

Hello, all the moment SSR is all or nothing, this is something we are currently working on (you can see the RFC here: https://github.com/withastro/rfcs/blob/hybrid-output/proposals/0000-hybrid-output.md)

#

Something you might be able to achieve at the moment is to use SSR but set very strict CDN caching on your static pages so performance is still the same

violet warren Nov 7, 2022, 6:03 PM

#

haven't played enough with astro to be sure, but having a preview site with ssr and the live site with ssg might be worth investigating

gentle jacinth Nov 7, 2022, 6:07 PM

#

OK so I have something working that I think is pretty cool, but let me know if I'm way off base here and this wouldn't be advisable. What I did was I created some environment variables in a .env file.

DRUPAL_API_KEY=e4765a3b10d1514b55449d362de32927
DRUPAL_STATUS=draft
ASTRO_MODE=ssr

The Drupal API key is needed to be able to access the data that is in "draft" status. In the DRUPAL_STATUS key I am specifying which type of data I want, "draft" or "published". Then I am also specifying the Astro mode. This can be "ssg" or "ssr". Then in my astro.config.mjs file I am checking for the ASTRO_MODE env variable and if it is "ssr", I do SSR when doing an npm run build. Otherwise, it's just the default stuff and will be SSG. So my astro config looks like this:

import { defineConfig } from "astro/config";

import alpinejs from "@astrojs/alpinejs";

import tailwind from "@astrojs/tailwind";

import node from "@astrojs/node";

import { loadEnv } from "vite";
const env = loadEnv(import.meta.env.MODE, process.cwd(), "");

let config = {
  integrations: [alpinejs(), tailwind()],
};

if (env.ASTRO_MODE === "ssr") {
  config = {
    integrations: [alpinejs(), tailwind()],
    output: "server",
    adapter: node({
      mode: "standalone",
    }),
  };
}

export default defineConfig(config);

Then in my fetch calls for data in my pages, I look to see if I should be fetching "draft" data or "published" data from Drupal. This is all totally working. The cool thing is technically I could also have a server that is getting published data but is also SSR. So now I can have either SSG OR SSR with either draft data OR published data for either one.

#Is SSR all or nothing? -or- Best way to handle CMS previews.