#jamstack

Subscribe
Jamstack is an architecture that uses JavaScript, APIs, and pre-built Markup to create dynamic web applications. It focuses on decoupling the frontend from the backend, allowing developers to build faster, more secure, and more scalable websites and applications. Jamstack sites are typically built using static site generators such as Gatsby or Next.js, and can be hosted on a variety of services such as Netlify, Vercel, and Amazon S3.
A Saga of Web Rendering Woes
Vue.js London 2023Vue.js London 2023
28 min
A Saga of Web Rendering Woes
This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
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.
Crash Course into the Jamstack with Next.js & Storyblok
React Day Berlin 2022React Day Berlin 2022
161 min
Crash Course into the Jamstack with Next.js & Storyblok
WorkshopFree
Arisa Fukuzaki
Chakit Arora
2 authors
You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself!
- In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.- How Next.js serves content, and how content is served with Static Site Generation (SSG).- Atomic design methodology, and how this is applied to the content management system.- Hands-on project experience by building a Jamstack project with Next.js and Storyblok.
Prerequisites- Any Text . Visual Studio Code recommended- Node.js LTS- NPM or Yarn- GitHub account- Vercel account- Familiarity with JavaScript, React, and Git. Having worked with Next.js before is a plus
What's included1. Introduction and overview of the workshop2. Introduction to Jamstack3. Introduction to Atomic Design4. Overview of Headless CMS5. Introduction to Storyblok6. Next.js app creation7. Storyblok space creation8. Next.js and Storyblok connection9. Custom components creation10.First-page creation11. Introduction to Visual 12. Dynamic pages addition13. Blog section creation14. Deployment on Vercel
Treat your users right with Segmented Rendering
React Advanced 2022React Advanced 2022
21 min
Treat your users right with Segmented Rendering
The Talk discusses the concept of segmented rendering for personalization in web development. It explores different rendering techniques, including server-side rendering, static seed generation, and dynamic rendering. The issue of rich guests and poor customers is addressed through segmented rendering. The implementation of segmented rendering with Next.js involves a lightweight proxy server and URL rewriting. The Talk also highlights the benefits of invisible server-side rendering and suggests a future unified API for server rendering.
Incremental Static Regeneration: Static Sites on Steroids
React Advanced 2021React Advanced 2021
22 min
Incremental Static Regeneration: Static Sites on Steroids
Incremental static regeneration is a feature in Next.js that allows for static generation on a per-page basis without rebuilding the entire site. It helps with headless content management systems and persists between deployments. The example demonstrates how server-side rendering, static site generation, and incremental static regeneration work together. The real-time visual editor allows for immediate changes to be seen. Visit the NetJS website for an e-commerce demo and learning platform.
How do Localise and Personalize Content with Sanity.io and Next.js
React Advanced 2021React Advanced 2021
8 min
How do Localise and Personalize Content with Sanity.io and Next.js
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
Advanced Site Rendering Patterns on the Jamstack
Vue.js London Live 2021Vue.js London Live 2021
23 min
Advanced Site Rendering Patterns on the Jamstack
Today's Talk discusses advanced site rendering patterns in the JAMstack, including the benefits and challenges of using this approach. It explores solutions like incremental builds, microsites, and incremental static regeneration to improve build times and performance. The Talk also introduces distributed persistent rendering and Gatsby v4 as new solutions to enhance static site generation and server-side rendering.
Fast & Furious - Going headless with Nuxt.js!
Vue.js London Live 2021Vue.js London Live 2021
32 min
Fast & Furious - Going headless with Nuxt.js!
This talk introduces using Next.js with a headless CMS called Storyblock. It covers setting up Storyblock with Next.js, understanding components and index pages, rendering components and requesting data, enhancing preview with the visual editor, creating article components and schemas, reusing components, and exploring the Storyblock and Next.js connection.
JAM Stack Deployment Platforms and Performance Comparison
DevOps.js Conf 2021DevOps.js Conf 2021
8 min
JAM Stack Deployment Platforms and Performance Comparison
This is an introduction to the Jamstack Deploy project, which measures and tests popular cloud providers for the Jamstack architecture. The project focuses on performance and uses Checkly as a monitoring tool. The speaker plans to add more stats and tools for comparison and invites users to contribute to the project.
Jamstack eCommerce 101
JSNation Live 2021JSNation Live 2021
199 min
Jamstack eCommerce 101
Workshop
Bolaji Ayodeji
Bolaji Ayodeji
Digital commerce has changed, and there is an increasing demand for faster and kite efficient solutions. In this workshop, you'll learn about the evolution of ecommerce and how Jamstack and headless commerce evolves shopping experiences on the web. We will explore the basics of headless commerce building a minimal Jamstack ecommerce product page with static content, HTML5, CSS, and Javascript. Finally, we will integrate Commerce Layer for headless commerce capabilities and deploy our application to Netlify.
E-commerce on the Jamstack with NextJS and Netlify
React Summit Remote Edition 2021React Summit Remote Edition 2021
120 min
E-commerce on the Jamstack with NextJS and Netlify
Workshop
Nick DeJesus
Nick DeJesus
Jamstack frameworks are changing the way we build top-of-the-line experiences on the web. They are performant, secure and enable developers to build web apps faster than before. In this workshop, Nick DeJesus will walk you through what it's like to build an e-commerce site using NextJS, use-shopping-cart and theme-ui. You will learn how serverless functions with Netlify to help you make secure transactions and how to build accessible UI components that extend use-shopping-cart's abilities.
Keeping It Simple
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Keeping It Simple
React brought simplicity to building browser-based applications, but as new concepts like context, hooks, server components, and streaming are introduced, it's important to know the current state of the application. The JAMstack simplifies reasoning about the state of web properties through immutable assets and atomic deploys. However, as the JAMstack evolves, challenges arise in areas such as build times and API caching for large projects, especially e-commerce.
By the Power of Headless!
React Summit Remote Edition 2021React Summit Remote Edition 2021
8 min
By the Power of Headless!
Headless CMSs offer freedom of choice in front-end frameworks and backend APIs, focusing on user experience and integration with third-party solutions. They provide a good developer experience and are an important part of the web ecosystem. A headless CMS allows project structuring, technology/API selection, and UI extension. Consider features like translation, workflow setup, content scheduling, editing experience, and integration capabilities when choosing a CMS.
API-first Development with Headless WordPress
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
API-first Development with Headless WordPress
This Talk discusses API-first development with headless WordPress, highlighting its benefits and the availability of resources. It explores the use of plugins and frameworks like WPGraphQL and the headless framework from WP Engine to create custom post types and make GraphQL calls. The Talk also covers building websites, querying and caching data, deploying apps with the Atlas platform, and improving user experience. It touches on authentication, efficiency, backend resources, and WooCommerce integration in headless WordPress, as well as WordPress accessibility and SEO optimization.