Dictionary

SSR - server-side rendering
SSG - static site generation

5

Agenda

Sitecore Headless and JSS State and Trends
Astro framework. Why? When?
Demo

6

Next.js, React, Vue, and Angular Statistics: January 2024

Framework statistics

7

Why Astro?

Speed — Astro is statically and server-rendered by default. It makes it perfect for content-first, SEO-friendly websites.
UI agnostics — There is a default components format .astro. But you still can use React, Vue, Angular, Svelte, etc.
Islands architecture — Islands optimize your website like no other web framework can. You can mix static, server rendered and client rendered content in one page.
Easy to use — Astro template engine is very simple and looks like plain HTML.
Developer Experience — Happy developers — productive developers.
Content focused — Astro was designed for building content-rich websites.

8

Lighthouse Performance

Lighthouse mobile perfomance

9

UI Agnostics

10

Astro Islands

Astro Islands (aka Component Islands) are a pattern of web architecture pioneered by Astro. The idea of “islands architecture” was first coined by Etsy’s frontend architect Katie Sylor-Miller in 2019, and expanded on in this post by Preact creator Jason Miller.

Islands Architecture

11

Easy to use

Astro’s goal is to be accessible to every web developer. Astro was designed to feel familiar and approachable regardless of skill level or past experience with web development.

.astro UI language
Support any favorite UI component languages
Less complex than other UI frameworks and languages
You can build with just HTML and CSS

12

Netlify State of Web Development Report: 2023

Happy Developers

13

Content Focused

Astro was designed for building content-rich websites. This includes most marketing sites, publishing sites, documentation sites, blogs, portfolios, and some ecommerce sites.

By contrast, most modern web frameworks are designed for building web applications. These frameworks work best for building more complex, application-like experiences in the browser: logged-in admin dashboards, inboxes, social networks, todo lists, and even native-like applications like Figma and Ping.

14

Demo

Frontend
Sitecore
Command line interface

15

Where and When to Use?

Simple, content-first sites
To make static site from existing existing Vue/Angular/React website
Instead of .Net
Blogs, Portfolios, Documentation, Marketing sites, Landing pages etc
Award-winning designs with a lot of animations
Where complex integrations of other libraries are required

16

Links

17

18