2023 Frontend Tech Review: What Did React Server Components Change?

Goal

2023 was a year of major changes in the frontend technology ecosystem. React Server Components moved from experimental to stable, AI-assisted development tools saw explosive growth, and new frameworks and tools continued to emerge. This article reviews the far-reaching technology changes throughout the year to help developers grasp technology trends.

Background

Key Frontend Changes in 2023

React Ecosystem:
  - RSC from experimental to production-ready
  - Server Actions officially released
  - Suspense and Streaming SSR matured

Build Tools:
  - Vite ecosystem matured, becoming the default for new projects
  - Turbopack continued iterating
  - Bun runtime attracted attention

AI-Assisted Development:
  - GitHub Copilot became mainstream
  - Claude, GPT-4, and other large models entered the development field
  - AI code generation became mainstream

Cross-Platform Development:
  - React Native new architecture promoted
  - Flutter 3.x released
  - Tauri 2.0 entered testing

React Server Components

Core Value of RSC

React Server Components (RSC) fundamentally changed React's rendering model:

// Server component - rendered on server, not sent to client
async function UserProfile({ userId }) {
  // Directly access database, no API layer needed
  const user = await db.users.findUnique({ where: { id: userId } });

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

// Client component - rendered on client, supports interaction
'use client';

function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️' : '🤍'}
    </button>
  );
}

Performance Improvement

Traditional SPA:
  JS Bundle: 200KB
  First screen time: 3-5 seconds (waiting for JS to load and execute)

RSC Mode:
  JS Bundle: 80KB (only client components included)
  First screen time: 0.5-1 second (server rendering + streaming)

Real-World Example

// RSC in Next.js App Router
// app/dashboard/page.tsx

// Server component
async function DashboardPage() {
  // Parallel data fetching
  const [user, stats, recentActivity] = await Promise.all([
    getUser(),
    getStats(),
    getRecentActivity(),
  ]);

  return (
    <div className="dashboard">
      <h1>Welcome, {user.name}</h1>

      {/* Stats cards - static content */}
      <div className="stats">
        <StatCard label="Total users" value={stats.totalUsers} />
        <StatCard label="Active users" value={stats.activeUsers} />
      </div>

      {/* Recent activity - may need interaction */}
      <Suspense fallback={<ActivitySkeleton />}>
        <RecentActivityList activities={recentActivity} />
      </Suspense>
    </div>
  );
}

Server Actions

Form Handling Revolution

Server Actions make form handling extremely simple:

// Traditional approach: requires separate API route
// app/api/contact/route.ts
export async function POST(request) {
  const data = await request.json();
  await sendEmail(data);
  return Response.json({ success: true });
}

// Client component
'use client';
function ContactForm() {
  const [loading, setLoading] = useState(false);
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    await fetch('/api/contact', { method: 'POST', body: ... });
    setLoading(false);
  };
}

// Server Actions approach
async function submitContact(formData: FormData) {
  'use server';
  const name = formData.get('name');
  const email = formData.get('email');
  await sendEmail({ name, email });
}

// Use directly in component
function ContactForm() {
  return (
    <form action={submitContact}>
      <input name="name" />
      <input name="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

AI-Assisted Development

GitHub Copilot

GitHub Copilot became a standard developer tool in 2023:

// Copilot can automatically generate code based on comments and context

// After entering comment, Copilot auto-generates
// Function: Calculate the nth Fibonacci number
function fibonacci(n: number): number {
  // Copilot will auto-generate implementation
}

// Auto-generate based on function name and parameters
function debounce<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {
  // Copilot generates complete implementation
}

AI Code Review

# Integrate AI code review in GitHub Actions
name: AI Code Review
on: [pull_request]
jobs:
  review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: AI Review
        uses: some-ai-review-action@v1
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}

Emerging Tools and Frameworks

Bun Runtime

Bun attracted widespread attention as a Node.js alternative:

# Bun's advantages
bun install      # 10-100x faster than npm/yarn
bun run dev      # Built-in dev server
bun test         # Built-in test runner
bun build        # Built-in bundler

// Bun natively supports TypeScript
// No extra configuration needed, run directly
bun run index.ts

// Bun's HTTP server
const server = Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response("Hello!");
  },
});

Astro 2.x

Astro released version 2.x in 2023, further consolidating its position in content-driven websites:

---
// Astro components: rendered on server by default
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';

const posts = await fetch('https://api.example.com/posts').then(r => r.json());
---

<Layout title="My Blog">
  <h1>Latest Articles</h1>
  {posts.map(post => (
    <Card title={post.title} description={post.description} />
  ))}
</Layout>

<!-- Client interactive components -->
<script>
  // Only explicitly marked scripts are sent to client
</script>

Tauri 2.0

Tauri 2.0 entered testing, becoming a strong alternative to Electron:

// Tauri backend (Rust)
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// Frontend call
import { invoke } from '@tauri-apps/api/tauri';
const greeting = await invoke('greet', { name: 'World' });

Performance Optimization Trends

Core Web Vitals

Google further emphasized the importance of Core Web Vitals in 2023:

// CLS (Cumulative Layout Shift)
// In 2023, Google adjusted CLS threshold from 0.1 to 0.25 (for INP)

// INP (Interaction to Next Paint)
// Replaces FID, more accurately measures interaction responsiveness

// LCP (Largest Contentful Paint)
// Still the core metric for measuring loading performance

Partial Hydration

// Only hydrate components that need interaction
// Unmarked components remain static HTML
import { hydrate } from 'react-dom/client';

// Only hydrate LazyComponent
hydrate(document.getElementById('lazy-component'), <LazyComponent />);

CSS New Features

CSS Nesting

/* Browsers natively support CSS nesting in 2023 */
.card {
  background: white;
  border-radius: 8px;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  & .title {
    font-size: 18px;
    font-weight: bold;
  }
}

@layer

/* CSS cascade layers, solving style priority issues */
@layer base, components, utilities;

@layer base {
  h1 { font-size: 2em; }
}

@layer components {
  .card { padding: 16px; }
}

Conclusion

Core frontend technology trends in 2023:

1. Server-first: RSC and Server Actions redefined React's rendering model
2. AI empowerment: AI-assisted development moved from novelty to daily workflow
3. Performance is king: Core Web Vitals continued evolving, performance optimization became mandatory
4. Tool innovation: Bun, Vite, and other new tools continuously challenged traditional solutions

For developers, the most important takeaway from 2023 is: never stop learning. The iteration speed of frontend technology won't slow down. Maintaining an open mindset and embracing change is the only way to continue growing in this field.

In 2024, let's continue moving forward and explore more possibilities.