#7071 e186ecc5e Thanks @johannesspohr! - Render sibling components in parallel
#6850 c6d7ebefd Thanks @bholmesdev! - Content collections now support data formats including JSON and YAML. You can also create relationships, or references, between collections to pull information from one collection entry into another. Learn more on our updated Content Collections docs.
#6991 719002ca5 Thanks @MoustaphaDev! - Enable experimental support for hybrid SSR with pre-rendering enabled by default
astro.config.mjs
import { defineConfig } from 'astro/config';
export defaultdefineConfig({
output: 'hybrid',
experimental: {
hybridOutput: true,
},
})
Then add export const prerender = false to any page or endpoint you want to opt-out of pre-rendering.
src/pages/contact.astro
---
export const prerender = false;
if (Astro.request.method === 'POST') {
// handle form submission
}
---
<form method="POST">
<input type="text" name="name" />
<input type="email" name="email" />
<button type="submit">Submit</button>
</form>
#7074 73ec6f6c1 Thanks @bluwy! - Integrations can add new client: directives through the astro:config:setup hook's addClientDirective() API. To enable this API, the user needs to set experimental.customClientDirectives to true in their config.
import { defineConfig } from 'astro/config';
import onClickDirective from 'astro-click-directive';
export default defineConfig({
integrations: [onClickDirective()],
experimental: {
customClientDirectives: true,
},
});
export default function onClickDirective() {
return {
hooks: {
'astro:config:setup': ({ addClientDirective }) => {
addClientDirective({
name: 'click',
entrypoint: 'astro-click-directive/click.js',
});
},
},
};
}
<Counter client:click />
The client directive file (e.g. astro-click-directive/click.js) should export a function of type ClientDirective:
import type { ClientDirective } from 'astro';
const clickDirective: ClientDirective = (load, opts, el) => {
window.addEventListener(
'click',
async () => {
const hydrate = await load();
await hydrate();
},
{ once: true }
);
};
export default clickDirective;
#6706 763ff2d1e Thanks @wulinsheng123! - Adds an opt-in way to minify the HTML output.
Using the compressHTML option Astro will remove whitespace from Astro components. This only applies to components written in .astro format and happens in the compiler to maximize performance. You can enable with:
import { defineConfig } from 'astro/config';
export default defineConfig({
compressHTML: true,
});
Compression occurs both in development mode and in the final build.
#7069 c1669c001 Thanks @Princesseuh! - Added Polymorphic type helper to astro/types to easily create polymorphic components:
---
import { HTMLTag, Polymorphic } from 'astro/types';
type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
const { as: Tag, ...props } = Astro.props;
---
<Tag {...props} />
#7093 3d525efc9 Thanks @matthewp! - Prevent removal of nested slots within islands
This change introduces a new flag that renderers can add called supportsAstroStaticSlot. What this does is let Astro know that the render is sending <astro-static-slot> as placeholder values for static (non-hydrated) slots which Astro will then remove.
This change is completely backwards compatible, but fixes bugs caused by combining ssr-only and client-side framework components like so:
<Component>
<div>
<Component client:load>
<span>Nested</span>
</Component>
</div>
</Component>
withastro/astro