sarah11918
commented
7 months ago I will just add for some extra context, because it's something we're currently needing to deal with in Astro Docs:
Just knowing the output: mode isn't always enough to distinguish betweet SSG/SSR features. In hybrid and server mode, it's also possible the individual page itself is prerendered, and is the reason that a feature isn't available on that route/endpoint in particular.
So, I'd encourage you to keep that in mind when building a helpful visual indicator! We had someone recently file an issue because an older warning/error message suggested "adding output: 'server' to make this work" when they already were in server mode. They were just trying to do something on a page that contained export const prerender = true!
florian-lefebvre
alexanderniebuhr
dreyfus92
adaliszk
Description:
In our continuous effort to uphold high-quality standards and promote best practices within the Astrolicious organization and Astro Tips, it has become evident that there's a need to make our content more informative and user-friendly regarding compatibility and recommended usage. This encompasses clear guidance on what is advised for Static Site Generators (SSG) versus Server-Side Rendering (SSR), Node runtimes versus other serverless runtimes, etc.
Suggested Implementation:
To address this, I propose the introduction of a visual element in our content that distinctly classifies and communicates these recommendations and compatibilities to our users. Drawing inspiration from resources like caniuse.com, MDN Baseline and the MDN Browser Compatibility, we can create a detailed and user-friendly visual component.
The envisioned component should cover:
This component could be represented in a table format, with entries for runtime (or adapter), output mode, and version. Additionally, we should incorporate a three-state system (potentially through colors or icons) to indicate compatibility levels:
For nuances or specific considerations (e.g., server mode only works for pre-rendered pages), these can be denoted with footnotes, hover texts, or asterisks for detailed explanation.
Component Integration:
To facilitate easy integration into our content workflow, this component should be developed as a reusable component. This component can then be imported into MDX files and positioned appropriately, leveraging props to display the relevant data.
Conclusion:
This enhancement to our content standards not only aligns with our commitment to quality but also significantly improves the user experience by providing clear, actionable information regarding the compatibility and optimal use cases of our content.