Using Waku on Netlify for React Server Components

Waku is the minimal React framework. It’s designed for startups and agencies seeking a lightweight alternative for small to medium-sized React projects. The Waku team is currently working towards building Waku into a production-ready React framework, but it’s already suitable for experimenting with React Server Components and building applications for non-production purposes.

#TL;DR

Support for Netlify was recently added to Waku. Now you can develop a React app with React Server Component (RSC) capabilities and deploy it on Netlify seamlessly. This post will show you how you can get started quickly and easily.

#What’s a React Server Components framework?

Waku is an RSC framework. That means you can use it to create server components, which are executed exclusively on the server (or in a serverless runtime environment). You can make them async to fetch remote data on the server, access the file system, or even use heavy dependencies, since they have zero impact on the client bundle size.

Then only when necessary, you may also create client components, which are hydrated in the browser. You can then use all traditional React features such as state, effects, and event handlers. The boundaries between server and client are marked with the ‘use client’ directive.

Keep in mind that SSR is a distinct concept from RSC. Waku provides static pre-rendering (sometimes called Static Site Generation or SSG) and server-side rendering (SSR) options for each layout and page including both their server and client components.

Being a minimal framework with a tight focus, Waku can be helpful in learning the RSC concept. Exploring examples is a great way to understand the distinction between server components and client components. So let’s get an example site deployed to Netlify quickly so you can use it to explore deeper.

#Prerequisites

• A Netlify account
• A GitHub account

#Creating and deploying a Waku project

You can create and deploy your app on Netlify using this starter project:

https://github.com/dai-shi/waku-netlify-starter

Visit the project repo or click the button below to clone the project and deploy it directly to Netlify.

#Local development of your Waku project

You can clone the starter project, (or your own copy of it created for you by clicking the Deploy to Netlify button above) to your local development machine to start exploring and making changes.

# Clone the project repo (or use the URL of your copy of this repo)
git clone https://github.com/dai-shi/waku-netlify-starter

# Go to the project and install the dependencies
cd waku-netlify-starter
npm install

# Run the project locally in development mode
npm run dev

#Continuing to explore Waku

Now that you’ve deployed a Waku site to Netlify, you can use it to explore more of what Waku has to offer and learn more about React Server Components. There are plenty of features and capabilities on the official Waku site to explore, such as:

#Rendering on the server at request time or at build time

Waku provides the capability to render some elements on the server at build time (SSG) and other elements on the server at request time (SSR). And as always you can also render components exclusively on the client side (CSR). This flexibility is helpful for optimizing your sites for the best user experience.

See the Rendering section for more details.

#Programmatically generate and populate pages with createPages

Waku’s createPages function gives you the ability to generate websites with blend of rendering techniques. This lets you specify purely static elements of a page, such as the site’s header and footer, and also the sections of the page that will be enriched with dynamic content. This makes for a powerful and performant combination.

See this post about createPages for more details

#Navigation prefetching with the Link component

The integrated Link component generates the markup and progressive enhancement necessary to prefetch links to internal pages so navigation throughout a Waku site is instantaneous.

See the Navigation section for more details.

#Data fetching

All the usual patterns you’d expect for fetching and parsing data on the server are available at build time and request time in server components. Client-side data fetching libraries are also supported should you need to perform some data fetching in the client as well.

See the Data fetching section for more details.

#More resources

• More examples and references on the official Waku site
• A dynamic (SSR) Waku demo deployed to Netlify using a mock database