DEV Community

Jonas Gierer
Jonas Gierer

Posted on

Astro + Storyblok: SSR Tips and Tricks

This is a companion post to Astro + Storyblok: SSR preview for instant visual editing. Please read it first if you haven't already!

Below you'll find some extra tips and tricks I've discovered while developing my Astro + Storyblok site.

Remove drafts from the production site

To avoid loading draft content in production, I created a wrapper function for the Storyblok API:

// src/storyblok/utils.ts

import * as sb from '@storyblok/astro';

export const storyblokApi = (slug: string, params?: sb.ISbStoryParams) => {
  const api = sb.useStoryblokApi();

  return api.get(slug, {
    version:
      import.meta.env.PUBLIC_ENV === 'production' ? 'published' : 'draft',
    ...params,
  });
};
Enter fullscreen mode Exit fullscreen mode

You can then use this wrapper wherever you would've used the Storyblok API, e.g.:

// src/pages/[slug].astro

import { storyblokApi } from '../storyblok/utils';

export async function getStaticPaths() {
  const { data } = await storyblokApi('cdn/links');
  let links = data.links;
  links = Object.values(links);

  return links
    .filter((link: any) => !['index', 'site-config'].includes(link.slug))
    .map((link: any) => {
      return {
        params: { slug: link.slug },
      };
    });
}

// ...
Enter fullscreen mode Exit fullscreen mode

Prevent search engine indexing of the preview site

You probably don't want your preview site containing drafts and unfinished content to be indexed by search engines. To prevent that, use the astro-robots-txt integration:

npx astro add astro-robots-txt
Enter fullscreen mode Exit fullscreen mode
// astro.config.{mjs,ts}

import robotsTxt from 'astro-robots-txt';
// ...

export default defineConfig({
  // ...
  integrations: [
    robotsTxt({
      policy: [
        {
          userAgent: '*',
          disallow: process.env.PUBLIC_ENV !== 'production' ? '/' : '',
        },
      ],
    }),
    // ...
  ],
  // ...
});
Enter fullscreen mode Exit fullscreen mode

Disable astro-imagetools image processing in SSR

I found that my SSR pages loaded very slowly because I was using astro-imagetools to process images. Since optimized images aren't necessary during editing anyways, I created a wrapper component to bypass image processing in the preview environment:

---
import type { Picture } from 'astro-imagetools/components';

export type Props = Parameters<typeof Picture>[0];

let {
  breakpoints = [500, 900, 1800], // fallback breakpoints
  class: pictureClass = '',
  ...props
} = Astro.props;

let Component;
if (import.meta.env.PUBLIC_ENV === 'preview') {
  Component = 'img';
  props = {
    class: pictureClass,
    ...props,
  };
} else {
  Component = (await import('astro-imagetools/components')).Picture;
  props = {
    breakpoints,
    attributes: {
      picture: {
        class: pictureClass,
      },
    },
    ...props,
  };
}
---

<Component {...props} />
Enter fullscreen mode Exit fullscreen mode

Top comments (0)