Chapter 1 Introduction to Server Components

If server components haven't crossed your radar yet, you're overlooking a pivotal feature introduced in React 19. Historically, React components have operated on the client side. However, with React 19, there's a transformative shift allowing components to execute directly on the server.

Benefits

1. SEO: By rendering components on the server, you enhance search engine optimization, making content more accessible to web crawlers.
2. Performance: Server components contribute to quicker initial page loads and overall improved performance by minimizing the JavaScript bundle size sent to the client.
3. Server-Side Execution: Running code on the server streamlines tasks like API calls, all while safeguarding sensitive information from the client.

Useful Resources

• Delve deeper into the official React JS documentation about "use server."
• Explore Next.js server components in detail.

Code Example

// App.tsx file

import React, { FormEvent } from 'react';

const App: React.FC = () => {

return (

<form onSubmit={updateUsername}>

<input type="text" name="username" placeholder="UserName" />

<button type="submit">Update</button>

</form>

);

}

export default App;

// actions.ts file

async function updateUsername(event: FormEvent) {

'use server'; // This marks the function to execute on the server.

event.preventDefault();

const formData = new FormData(event.currentTarget);

const username = formData.get('username');

if (typeof username === 'string') {

console.log(Sending ${username} to the server...);

// Replace this with your actual fetch/Axios API call:

}

}

In this example, the 'use server' directive indicates that the function should run on the server. The updateUsername function acts as a Server Action triggered when a user submits the form. When this occurs, React provides the form's FormData as the first argument to the Server Action.

Looking Ahead

The trend of server actions is a compelling approach to running processes on the server. This methodology is widely adopted in frameworks like Next.js, emphasizing server-side rendering of data. While developers with backgrounds in PHP may find this intuitive, it may appear unusual to those accustomed to conventional client-side frameworks. With over a decade of experience in JavaScript, I've learned to adapt. Though the JS language is not flawless, it dominates over 90% of the web and is unlikely to be replaced anytime soon. ❤️ If you appreciate my content, please consider following and subscribing! ❤️

Chapter 2 Video Insights

To further enrich your understanding of server components, check out these insightful videos:

The first video titled "React Server Components Change Everything" delves into the transformative impact server components have on development practices.

The second video, "React Server Components from Scratch!" provides a foundational overview of how to implement server components effectively.