Astro – Island Technology in the Name of Optimization

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Next.js is the default choice for most teams, although there are many other solutions on the market. One of such solutions is Astro, which in certain areas, due to its eccentric approach, seems to outclass the Vercel king. During this lecture, I will present the key features of Astro, as well as the differences between it and the aforementioned Next.js. You will learn what interactive islands are, why MPA (multi-page application) is still a very good choice for content-driven websites, and much more. Who knows - maybe you will use Astro in your next project?

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

FAQ

ASTRA is a powerful tool in modern web development that optimizes content delivery while providing the flexibility of modern JavaScript frameworks. It allows for creating fast static websites with selective JavaScript loading for interactivity.

ASTRA balances performance and flexibility by allowing developers to create static websites without JavaScript by default, while providing selective hydration for adding interactivity only when needed. This approach optimizes speed and maintains flexibility.

ASTRA is particularly well-suited for content-driven projects like blogs, portfolios, and corporate websites where fast content delivery and performance are priorities. It's also ideal for online stores, creative portfolios, and marketing landing pages.

ASTRA uses file-based routing where the project's pages directory structure reflects site URLs. It supports dynamic routes and can handle complex content hierarchies using fallback paths. It allows building pages with ASTRA components, HTML, Markdown, or MDX.

ASTRA is unique because it focuses on minimizing JavaScript load by delivering pure HTML by default and providing flexibility for adding interactivity. It's simpler and more performant for static content compared to more complex frameworks like Next.js or Remix.

ASTRA allows easy integration with UI libraries like React, Vue, and Tailwind. Developers can add these libraries to their projects with minimal configuration, maintaining a balance between simplicity and the use of preferred tools.

ASTRA components are executed on the server side by default, sending no JavaScript to the client unless specified. This improves performance by reducing client-side JavaScript load, while allowing dynamic content generation through server-side variables.

The View Transitions API allows for smooth animations during page transitions in multi-page applications. ASTRA supports this API, enabling rich animations and enhancing user experience across different browsers.

ASTRA is designed to minimize JavaScript sent to the client, resulting in faster load times and a more responsive user experience. It addresses performance issues by focusing on efficient content delivery and reducing unnecessary JavaScript.

ASTRA's server islands allow for server-rendered components within static pages, providing flexibility across hosting environments without relying on cloud-specific features. This enables easy deployment and maintains performance without complex configurations.

Szymon Chmal
Szymon Chmal
20 min
28 Oct, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hello everyone. My name is Szymon Chmal and I am a Senior React Native Developer at CallStack. Today I'm going to introduce you to ASTRA, a powerful tool in modern web development that optimizes content delivery while providing the flexibility of modern JavaScript frameworks. ASTRA allows you to create blazing fast static websites without needing any JavaScript by default. It's perfect for sites that are mostly static but have a few interactive features. ASTRA is trusted by industry leaders like Microsoft and Porsche. It's built with content-driven pages in mind and supports integration with popular UI libraries like React, Vue, and Tailwind. ASTRA keeps things simple with file-based routing.

1. Introduction to ASTRA

Short description:

Hello everyone. My name is Szymon Chmal and I am a Senior React Native Developer at CallStack. Today I'm going to introduce you to ASTRA, a powerful tool in modern web development that optimizes content delivery while providing the flexibility of modern JavaScript frameworks. ASTRA allows you to create blazing fast static websites without needing any JavaScript by default. It's perfect for sites that are mostly static but have a few interactive features. ASTRA is trusted by industry leaders like Microsoft and Porsche. It's built with content-driven pages in mind and supports integration with popular UI libraries like React, Vue, and Tailwind. ASTRA keeps things simple with file-based routing.

Hello everyone. Welcome and thank you for joining today. My name is Szymon Chmal and I am a Senior React Native Developer at CallStack. Today I'm going to introduce you to a powerful tool in modern web development called ASTRA. We'll explore how it optimizes content delivery while providing the flexibility of modern JavaScript frameworks. Whether you're building interactive applications or static, content-driven sites, ASTRA might be the solution you've been looking for.

So let's get right into it. We have all come across different types of web experiences. On one hand, we have highly interactive applications and on the other hand, sites that are mostly static and just serve content. The question is, how do you find the right balance between overloading the browser with JavaScript and keeping things fast? Let's talk about what choices we have in the current ecosystem.

Right now, we have a few well-known options for building web applications. You've got full-featured frameworks like Next.js or Remix that are great for highly interactive applications but they can sometimes feel like overkill for static sites. Then there is Gatsby, which had its moment but learning it can be a bit much. And let's be honest, it feels kind of abandoned these days. And then we've got classic static site generators like Jackal, which work perfectly until you need to add any interactive elements. So what if we need both speed and flexibility? That's the place where ASTRA steps in because it allows you to create blazing fast static websites without needing any JavaScript by default. But what makes it really stand out is that you can still sprinkle in interactivity with selective hydration, meaning you only load JavaScript when it's absolutely needed. This approach is perfect for sites that are mostly static but have a few interactive features. It gives you the best of both worlds, performance and flexibility.

And as we can see, ASTRA isn't exactly a newcomer in the world of web development. In fact, it's already been trusted by some of the biggest names in the industry. For example, companies like Microsoft and Porsche have used ASTRA to build their websites, which speaks volumes about its reliability and performance. So what makes ASTRA unique? First of all, it's built with content-driven pages in mind, perfect for blogs, portfolios or corporate websites that don't need tons of JavaScript to work. You can still use your favorite UI libraries like React, Vue or SWAT, but ASTRA takes care of delivering pure HTML by default. It also embraces multi-page application architecture, meaning each interaction results in a full page reload, which is often faster and simpler for mostly static content. It's all about reducing JavaScript load while giving you the flexibility to add dynamic elements when needed. And one of the best things about ASTRA is how flexible it is when it comes to integrating libraries. Whenever you're a fan of React, Solids, maybe Vue, or you're just low-working with Tailwind, ASTRA has got you covered, because with just a few commands you can easily add those libraries to your project without needing to reconfigure everything. That gives you the freedom to use the tools you love without sacrificing the simplicity and speed that ASTRA brings to the table. ASTRA keeps things simple with file-based routing.

2. ASTRA: Dynamic Routes and Component-based Pages

Short description:

ASTRA allows you to create dynamic routes and build pages with components using various languages. This keeps your workflow clean and efficient, allowing you to focus on your content.

This means the structure of your project's sources pages directory directly reflects the URLs of your site. So for example, if you create an about-me.astra file in the pages folder, it automatically becomes accessible at mysite.com about-me. But it doesn't stop there. ASTRA also supports dynamic routes, which are useful for creating pages on the fly. For instance, a file named slug.astra in the blog directory could generate a unique URL for each blog post based on its slug. You can also use fallback paths with a structure like ...path.astra to catch multiple variations of a route, which is great for handling complex content hierarchies. And what's best, you can build pages with ASTRA components, HTML, Markdown, or, for example, MDX. This approach keeps your workflow clean and efficient, allowing you to focus on what truly matters, your content.

3. ASTRA: Components and Content Collections

Short description:

ASTRA components allow for server-side execution, giving a performance boost. You can mix in React components and access server-side variables. Special ASTRA directives provide additional control for creating rich user experiences. Adding interactivity is possible with the classic script tag. Content collections help organize and validate documents by defining types and schemas.

Now, let's talk about ASTRA components. By default, ASTRA components are executed entirely on the server's site, which means they don't send any JavaScript to the client unless you specify otherwise. This is a gamechanger for performance. For example, you can import an ASTRA component like a banner and simply use it in your template. You can also mix in React components or any other UI libraries you like, giving you the flexibility to use the best tools for the job.

What's cool is that you can access server-side variables directly in your components, allowing for dynamic content generation without extra overhead. You can also employ special ASTRA directives for even more control, like conditionally applying classes based on props, which makes it incredibly straightforward to create rich, immersive user experiences without bloating your site with unnecessary JavaScript.

Now while ASTRA is all about keeping things light, there may be times where you need to add a bit of interactivity to your pages. That's where the classic script tag comes into play. For instance, if you want to add a fun confetti effect when a button is clicked, you can do easily by importing a module right in your component. Just grab the buttons from DOM and attach even listeners that trigger the confetti effect. This approach lets you enhance user interaction without compromising the overall performance of your site.

Let's shift gears and talk about content collections. This feature is incredibly useful for organizing documents and ensuring everything is validated correctly. With content collections, you can define the type and schema for your content, which helps maintain consistency across your site. And here's how it works. You can define a content collection, which is actually really simple. First, import the defineCollection function and use it to describe your collection. You will need to provide a schema that will be applied to all Markdown files within the collection. And finally, you need to export it in the collections object. That's it. Done!

4. ASTRA: Astro Islands and Server Islands

Short description:

Astro allows you to define interactive areas on your page called islands. Components can be set to load as soon as the page loads or when they become visible. Server Islands defer rendering of components, optimizing performance. Caching static content behind a CDN ensures fast loading. Different client directives control when a component becomes interactive. Server defer renders a component on the server side.

It's designed to handle these scenarios seamlessly, allowing you to integrate dynamic elements where needed, while still maintaining the overall performance and simplicity of the framework. Astro allows you to define specific areas, known as islands, on your page that can become interactive. For instance, if you have a mostly static blog post, you can add a dynamic component like an interactive comment section or a live chat widget. And the best part? You can control when these components load. For example, you can set a component to load as soon as the page loads, or only when it becomes visible in the viewport. This approach minimizes the JavaScript footprint, loading interactivity only when necessary.

Astro Islands approach works by delivering the static parts of the page from a CDN for fast loading. When a component needs interactivity, the browser fetches the necessary JavaScript from the same source. The key here is that users can see the content immediately, without waiting for hydration to complete. The downside of this approach occurs when you need to display dynamic data. A run trick happens because the hydrated components request data from the server, for example in JSON format, and then displays it to the user. This pattern introduces performance penalty, as JavaScript is solely being used to fetch data, which is unnecessary and adds extra overhead. And that's the part where Server Islands come in. By using the server deferred directive, you can tell Astro to skip the initial rendering of specific components. Instead of rendering them right away, Astro intelligently defers the rendering to a later point in time, optimizing performance and reducing the unnecessary overhead of fetching dynamic data with JavaScript.

What does it mean to your site? It allows you to cache the static page behind a CDN, ensuring that your main content loads almost instantaneously, completely with a placeholder while the dynamic elements are being prepared. Once the dynamic HTML is ready, it replaces the server island on the page with the actual rendered content. This approach gives your users a fast, seamless experience right from the start, while still allowing you to deliver fresh, interactive updates effortlessly. So, here, we use client load to make the image carousel component interactive immediately after the page loads. This is ideal for components that need to be ready for user interaction right away. With client idle, we are telling the component to wait until the browser is idle or until 500 milliseconds have passed before making it interactive. This helps prioritize more critical resources while still preparing interactivity shortly after. With client visible, the image carousel component only becomes interactive when the user actually scrolls it into view. This is great performance optimization, loading JavaScript only when needed. With client media, the component becomes interactive only if the device's screen width is 1280 pixels or less. This ensures that interactivity is triggered based on responsive design needs. With client only, the component is rendered exclusively on the client side because, for example, it may use some kind of browser APIs. And last but not least, with server defer, we can say that this component should be rendered exclusively on the server side and then sent to the client. Of course, we can provide a fallback, which will be included in the initial content delivered from the CDN. Let's explore an exciting development in web design, the View Transitions API.

5. ASTRA: View Transitions API

Short description:

The View Transitions API allows for smooth animations during page transitions in MPA. Astra fully supports it and makes it accessible across all browsers. To use View Transitions, import the component and add it to the head of your Astra page. By enabling View Transitions, navigation occurs on the server side, but client components are remounted on each navigation. Using the TransitionPersis attribute allows components to maintain their state.

Let's explore an exciting development in web design, the View Transitions API. Until recently, creating rich animations during navigation multi-page applications was a challenge, often limited to single-page applications like those built with Remix or Next.js. The introduction of View Transitions API changes everything. This innovative feature allows developers to create smooth, visually appealing animations during page transitions in MPA, greatly enhancing user experience.

Astra fully supports the View Transitions API, and what's best, it makes it accessible across all browsers. However, there is a catch in its implementation. To use View Transitions, you need to import the View Transitions component and basically put it into the head of your Astra page. You can also define transitions on specific elements within your pages, and this will create smooth animations during page changes, enhancing the overall user experience.

Now, here is an important point. When View Transitions are enabled, navigation actually occurs on the server on the client side. This is how Astra ensures compatibility across all browsers. However, it aims to maintain the same behavior as a multi-page application, which means that our client components are remounted on each navigation. Can we opt out from this behavior? We can, and it's really simple. We need to add the TransitionPersis attribute to our component and that's it. This means that the component will maintain its state, as you can see in the video. At some point when View Transitions reach a baseline implementation across browsers, Astra plans to remove this single-page application workaround. For now though, using the TransitionPersis attribute is the only way to achieve this behavior effectively.

6. ASTRA: Performance and Choosing a Framework

Short description:

Which framework should you choose? Astra? Next.js? Remix? Astra stands out as a fantastic choice when it comes to optimizing for size. Its architecture minimizes JavaScript sent to the client, resulting in faster loading times and a more responsive user experience. JavaScript can impact battery life and significantly influence user behavior. Astra mitigates these issues by focusing on efficient content delivery and reducing unnecessary JavaScript. By simplifying web applications, Astra delivers high-quality experiences with faster load times and a better user experience.

All right, let's now tackle an important question. Which framework should you choose? Astra? Next.js? Remix? In today's digital landscape, performance is everything. Users expect websites to load quickly, respond instantly, and deliver smooth interactions. This is where the size of a web application can become critical.

Astra stands out as a fantastic choice when it comes to optimizing for size. Its architecture is designed to minimize the amount of JavaScript sent to the client by default. This focus on lightweight HTML means that users will observe faster loading times and a more responsive user experience, which is essential in retaining visitors.

Also, let's consider the actual cost of JavaScript. When a browser loads a web page, it has to download, parse, and execute JavaScript code. Each of these steps takes time and resources. For users on low-end devices or those with slower internet connections like 3G or even 2G, this can lead to frustrating delays. The truth is that not everyone has access to the latest iPhones or lightning-fast 5G networks. In many parts of the world, users still rely on older devices and slower internet connections. For these users, happy JavaScript can mean a sluggish experience, which may discourage them from returning to your site.

Furthermore, the impact of JavaScript isn't just about speed. It can also affect battery life on mobile devices. Excessive JavaScript can drain batteries faster, making it even more critical to consider performance when targeting a diverse audience. Also, research has shown that loading speed significantly influences user behavior. For instance, a delay of just one second in page loading can lead to a decrease in conversion rates by around 5%. In addition, nearly 70% of consumers admit that the speed of a web page directly affects their willingness to make a purchase. And personally, I'm one of those consumers. When I encounter a shop that loads too slowly, I often find myself looking for an alternative. It's frustrating, and I know I'm not alone in this sentiment.

But with Astra, you can mitigate those issues. By focusing on efficient content delivery and reducing unnecessary JavaScript, you create a faster, more user-friendly experience that meets the expectations of today's diverse web users. In a world where performance can make or break a site, Astra empowers you to deliver high-quality experiences that keep users engaged. And the truth is that the internet is predominantly static. In many cases, complex client-site interactivity is really unnecessary. Simplifying our web applications can lead to faster load times and a better user experience. We can focus only on delivering essential content without overwhelming users with excessive features.

7. ASTRA: Choosing Astra for Your Projects

Short description:

Astra is well-suited for various applications, prioritizing content delivery and performance. It enables fast load times for online stores, showcases stunning visuals for creative professionals, and delivers content quickly for bloggers. Astra's optimizations drive conversions and help create professional sites, while Naked.js excels in building complex applications with robust server-side rendering capabilities. Astra's speed and simplicity, coupled with its flexible deployment options, make it a better option for projects that prioritize performance. Thank you for your time and attention.

Now that we have explored Astra's strengths, let's discuss when it's the right choice for your projects. Astra is particularly well-suited for a variety of applications, especially those that prioritize content delivery and performance. So if you are building an online store, fast load times are critical, and Astra allows you to create a smooth shopping experience without JavaScript load. For creative professionals showcasing their work, Astra provides a platform to display stunning visuals while maintaining fast performance. Bloggers also benefit from Astra's ability to deliver content quickly and efficiently. Readers appreciate fast-loading articles, which keeps them engaged and encourages them to explore more of your content.

When launching a marketing campaign, having a lightning-fast landing page can make all the difference. Astra's optimizations help drive conversions by ensuring that visitors don't bounce due to slow loading times. For components wanting to present a polished online presence, Astra helps create professional sites that deliver information quickly and effectively, reflecting positively on your brand. And, while frameworks like Naked.js are powerful and versatile, they might not be the necessary framework for every project, sometimes a specialized tool like Astra is the better option, especially when speed and simplicity are paramount. Both frameworks have their strengths, but they cater to different needs depending on the type of project you are working on.

Naked.js is designed for building complex applications with robust server-side rendering capabilities. However, this level of power often comes with complexity, especially when it comes to configuration and deployment. On the other hand, Astra shines when it comes to speed and simplicity. While Naked.js requires intricate configurations and often ties you to a specific cloud provider like, for example, Vercel, Astra's approach allows for a more straightforward implementation. Astra's server islands provide a unique solution that allows for server-rendered components to be embedded within static pages, making it flexible across various hosting environments without relying on cloud-specific features. This means you can easily deploy your site anywhere, maintaining performance without the complexities that Naked.js might introduce.

And we have reached the end of our presentation, and I would like to thank each of you for being here today. Although Astra has much more to offer, I kept the content brief to stay on track. I encourage you to explore Astra's website and dive into the documentation for more details. If you have any questions, insights, or experiences to share about Astra web development, I would love to hear from you. Don't hesitate to reach out if you'd like to learn more. Thank you once again for your time and attention.

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

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
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.

Workshops on related topic

Free webinar: Building Full Stack Apps With Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Free webinar: Building Full Stack Apps With Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
In this webinar I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own ai generated full stack app on your machine!
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
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.
Crash course into Astro and Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
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
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
Workshop
William Lyon
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
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)