English versionEN

Diving Into Server Islands

In this talk, we'll explore building full-stack web applications powered by Astro and Astro DB.

We'll start by discovering the basics of Astro, why and where it's useful, and how to build a simple web application with it. We'll discover how to use Astro's hybrid rendering mode to add API routes and dynamic server-side rendering to the application.

Then we'll dive into Astro DB, a simple, yet powerful ORM used to communicate between a LibSQL database and your Astro application. Also, Astro 5.0-beta has been released, we’ll round up the talk by looking at the new features, some demos and discovering how to upgrade.

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

FAQ

Elion is the Lead Developer Relations at React Bricks and an Astron maintainer. He works with the BGS team organizing conferences and has experience in developer experience and documentation.

Astro is a web framework for content-driven development, offering features like single file components and zero JavaScript shipping by default, making it ideal for content-driven websites.

Astro is content-driven, focusing on an HTML-first approach with opt-in complexity, making it suitable for content-heavy sites. It ships zero JavaScript by default, enhancing performance and SEO.

Client directives in Astro allow developers to control when and how JavaScript is loaded for interactivity, using options like client load, client idle, client media, and client only.

Server islands in Astro enable server-side rendering with deferred content loading, allowing dynamic content to be fetched and rendered efficiently, similar to partial pre-rendering in Next.js.

The Astro Content Layer API allows for loading and querying data from various sources, including APIs and markdown files, making it versatile for different content types.

Astro's islands of interactivity do not inherently support context like React, but state management can be implemented if necessary, although it's not typically recommended for Astro's intended use cases.

Astro Actions enable server-side functions to be executed securely without publicly exposing APIs, useful for operations like form data validation.

AstroDB is a first-party API for managing databases using libSQL or any compatible SQL database, providing ORM capabilities for efficient data handling.

To learn more about Astro, visit Astro.build. You can contact Elion on social media at @ElionCode or join the Astro Discord community at Astro.build/chat.

Elian Van Cutsem

27 min

25 Oct, 2024

Comments

Video Summary and Transcription

Hello, everybody. I'm Elion, the Lead Developer Relations at React Bricks. Astro is a web framework for content-driven development, similar to Next or Nuxt. It supports TypeScript and JavaScript and compiles down to HTML and CSS, resulting in excellent indexability and SEO. HTML and JavaScript can be used together with Astro through client directives, allowing for interactive websites while optimizing performance. Astro's server islands architecture delays rendering until all content is available, and client-side interactivity is achieved through battery API and server authentication. Astro provides native data loading and supports open-source loaders for different content types. Collections and Astro Actions make content reuse and API usage easier. Zalt Schema, AstraDB, and ORM are available for form data handling. AstroDB and Starlight enable the use of different databases and on-demand rendering. Astro 5.0 introduces better localization, simplified rendering modes, and a content layer API. There is an upgrade guide for Astro 5.0 and it integrates well with React. Astro is recommended for content-driven websites but may not be ideal for building dashboards or authentication services. Astro has influenced other frameworks and aims to push the web towards better standards.

Available in Español: Diving Into Server Islands

Video transcription and chapters available for users with access.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Full Stack Components

Remix Conf Europe 2022

37 min

Full Stack Components

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

remix javascript fullstack architecture

RedwoodJS: The Full-Stack React App Framework of Your Dreams

React Summit Remote Edition 2021

43 min

RedwoodJS: The Full-Stack React App Framework of Your Dreams

Top Content

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

jamstack fullstack frameworks redwoodjs react full stack framework

Opt in Design – The New Era of React Frameworks

React Advanced 2023

23 min

Opt in Design – The New Era of React Frameworks

Watch video: Opt in Design – The New Era of React Frameworks

Benjamin Holmes

Ben is a full-stack developer, open source maintainer, and whiteboardist making the web a little better.

This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.

frameworks builders and founders astro preact

You Don’t Know How to SSR

DevOps.js Conf 2024

23 min

You Don’t Know How to SSR

Emanuele Stoppa

The Astro Technology Company

The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.

next.js serverless astro

All Things Astro

React Day Berlin 2023

28 min

All Things Astro

Watch video: All Things Astro

Elian Van Cutsem

Mentorship available

React Bricks

Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.

astro

Remix Architecture Patterns

Remix Conf Europe 2022

23 min

Remix Architecture Patterns

Top Content

Andre Landgraf

Software Engineer at LinkedIn

This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.

remix javascript fullstack architecture

Workshops on related topic

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

JSNation 2023

174 min

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

Top Content

Featured WorkshopFree

2 authors

This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.

web development fullstack ssr svelte

How to Solve Real-World Problems with Remix

Remix Conf Europe 2022

195 min

How to Solve Real-World Problems with Remix

Featured Workshop

Michael Carter

- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others

remix validation database error monitoring

Relational Database Modeling for GraphQL

GraphQL Galaxy 2020

106 min

Relational Database Modeling for GraphQL

Top Content

WorkshopFree

Adron Hall

In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1 a. Relational Database Data Modeling b. Comparing Relational and NoSQL Databases c. GraphQL with the Database in mindPart 2 - Hour 2 a. Designing Relational Data Models b. Relationship, Building MultijoinsTables c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites a. Data modeling tool. The trainer will be using dbdiagram b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples c. Hasura

database graphql

Crash course into Astro and Storyblok

React Day Berlin 2023

119 min

Crash course into Astro and Storyblok

WorkshopFree

Arisa Fukuzaki

Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications.
In this workshop, we will quickly take a dive into the Headless World and Architecture.
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory.
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless

headless cms astro

Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel

GraphQL Galaxy 2021

161 min

Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel

WorkshopFree

William Lyon

In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura

next.js fullstack cloud graphql

Scaling up Your Database With ReadySet

Node Congress 2023

33 min

Scaling up Your Database With ReadySet

WorkshopFree

2 authors

The database can be one of the hardest parts of a web app to scale. Many projects end up using ad-hoc caching systems that are complex, error-prone, and expensive to build. What if you could drop in a ready-built caching system to enable better throughput and latency with no code changes to your application?
Join developers Aspen Smith and Nick Marino to see how you can change one line of config in your app and use ReadySet to scale up your query performance by orders of magnitude today.

database