Frontend Architecture Patterns (Micro-Frontends, Jamstack, SSR)

// webpack.config.js - Host Application
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
        app2: 'app2@http://localhost:3002/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
      }
    })
  ]
};

// webpack.config.js - Remote Application
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/components/Button',
    './Header': './src/components/Header'
  },
  shared: ['react', 'react-dom']
});

// pages/blog/[slug].js
export async function getStaticPaths() {
  const posts = await fetchAllPosts();
  return {
    paths: posts.map(post => ({ params: { slug: post.slug } })),
    fallback: 'blocking' // ISR for new posts
  };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return {
    props: { post },
    revalidate: 3600 // Regenerate every hour
  };
}

export default function BlogPost({ post }) {
  return <article>{post.content}</article>;
}

---
// src/pages/index.astro
import Header from '../components/Header.astro';
import ReactCounter from '../components/Counter.jsx';
import VueCarousel from '../components/Carousel.vue';
---

<html>
  <body>
    <!-- Static HTML, no JS -->
    <Header />
    
    <!-- Interactive island, hydrates on load -->
    <ReactCounter client:load />
    
    <!-- Lazy hydration when visible -->
    <VueCarousel client:visible />
    
    <!-- No hydration, static HTML -->
    <footer>Static Footer</footer>
  </body>
</html>

// app/page.js - Server Component (default)
export default async function Page() {
  // Direct database/API access, no client bundle impact
  const data = await db.query('SELECT * FROM posts');
  
  return (
    <main>
      <h1>Posts</h1>
      <Suspense fallback={<Loading />}>
        <PostList data={data} />
      </Suspense>
    </main>
  );
}

// components/InteractiveButton.js - Client Component
'use client';
import { useState } from 'react';

export default function InteractiveButton() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// Server Action
async function createPost(formData) {
  'use server';
  const title = formData.get('title');
  await db.insert({ title });
  revalidatePath('/posts');
}

// middleware.js - Runs at edge for all routes
import { NextResponse } from 'next/server';

export function middleware(request) {
  // Geolocation-based redirect
  const country = request.geo?.country;
  if (country === 'US') {
    return NextResponse.redirect(new URL('/us', request.url));
  }
  
  // A/B testing
  const bucket = Math.random() < 0.5 ? 'a' : 'b';
  const response = NextResponse.next();
  response.cookies.set('bucket', bucket);
  
  // Authentication check
  const token = request.cookies.get('session');
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return response;
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
};