Advanced Topics

Deep dive into advanced FlatWP features, performance optimization, and rendering strategies.

Overview

This section covers advanced topics for optimizing your FlatWP site:

Incremental Static Regeneration (ISR) - Balance speed and freshness
Rendering Strategies - Choose the right approach for each content type
Performance Optimization - Achieve 95+ Lighthouse scores
Caching Strategies - Intelligent content delivery

Key Concepts

Incremental Static Regeneration

ISR combines static generation with automatic revalidation:

Benefits:

Fast like static sites
Fresh like server-rendered
Automatic background updates
No full rebuilds needed

Learn more: ISR & Caching

Rendering Strategies

FlatWP supports three rendering approaches:

Strategy	Speed	Freshness	Build Time	Use Case
Static	Fastest	Stale until rebuild	Longest	Rarely changing
ISR	Fast	Configurable	Medium	Most content
SSR	Slower	Always fresh	None	Real-time data

Learn more: Rendering Strategies

Performance Optimization

Target Metrics

FlatWP aims for exceptional performance:

Lighthouse Score: 95+
LCP (Largest Contentful Paint): < 2.5s
FID (First Input Delay): < 100ms
CLS (Cumulative Layout Shift): < 0.1
TTFB (Time to First Byte): < 600ms

Optimization Techniques

1. Image Optimization

Automatic WebP/AVIF conversion
Responsive images
Lazy loading
Blur placeholders

2. Code Splitting

Route-based splitting
Dynamic imports
Component lazy loading

3. Edge Caching

CDN deployment
Cache headers
Stale-while-revalidate

4. Bundle Optimization

Tree shaking
Minification
Compression

ISR Configuration

On-Demand Revalidation

Revalidate when WordPress content changes:

// Triggered by WordPress webhook
export const revalidate = false;

Pros:

Instant updates when needed
No unnecessary regeneration
Optimal cache usage

Cons:

Requires webhook setup
First visitor sees stale content briefly

Time-Based Revalidation

Revalidate after time interval:

// Revalidate every 5 minutes
export const revalidate = 300;

Pros:

Simple to configure
No webhook needed
Predictable refresh

Cons:

May regenerate unnecessarily
Update delay up to interval

Hybrid Approach

Combine both strategies:

// Time-based fallback + on-demand webhook
export const revalidate = 3600; // 1 hour fallback

Rendering Strategy Selection

Decision Tree

Content characteristics?
├─ User-specific or real-time → SSR
├─ Rarely changes → Static
└─ Regularly updated → ISR
    ├─ Controlled updates → On-demand
    └─ Unpredictable updates → Time-based

Content Type Recommendations

Blog Posts:

{
  strategy: 'isr',
  revalidate: false, // On-demand via webhook
  generateStaticParams: true
}

Static Pages:

{
  strategy: 'static',
  revalidate: false,
  generateStaticParams: true
}

Archives:

{
  strategy: 'isr',
  revalidate: 300, // 5 minutes
  generateStaticParams: true
}

Caching Strategies

Edge Caching

Deploy to edge network for global performance:

Platforms:

Vercel: Automatic edge caching
Netlify: Edge handlers
Cloudflare: Workers + KV

Benefits:

< 50ms response times globally
Reduced server load
Better user experience

WordPress Caching

Optimize WordPress API responses:

Object Caching:

Redis
Memcached
APCu

Page Caching:

W3 Total Cache
WP Super Cache
LiteSpeed Cache

Browser Caching

Configure appropriate cache headers:

// next.config.ts
module.exports = {
  async headers() {
    return [
      {
        source: '/:all*(svg|jpg|png)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

Build Optimization

Reduce Build Time

1. Limit Static Generation

export async function generateStaticParams() {
  // Limit in development
  const limit = process.env.NODE_ENV === 'production' ? 1000 : 10;
  const posts = await getAllPosts({ limit });
  return posts.map(post => ({ slug: post.slug }));
}

2. Enable Dynamic Params

// Generate others on-demand
export const dynamicParams = true;

3. Incremental Builds

Use platform features (Vercel, Netlify)
Only rebuild changed pages

Optimize Bundle Size

1. Analyze Bundle

pnpm build --analyze

2. Dynamic Imports

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'));

3. Tree Shaking

Import only what you need
Use ES modules
Check for unused code

Monitoring & Analytics

Performance Monitoring

Track real-world performance:

1. Vercel Analytics

Core Web Vitals
Real user metrics
Geographic data

2. Google Analytics 4

User behavior
Traffic sources
Conversion tracking

3. Custom Monitoring

Error tracking
API performance
Cache hit rates

Debugging Performance

1. Lighthouse

# CLI
npx lighthouse https://your-site.com

# DevTools
# Chrome DevTools → Lighthouse tab

2. WebPageTest

Multi-location testing
Filmstrip view
Detailed waterfall

3. Chrome DevTools

Performance tab
Network tab
Coverage tab

Advanced Patterns

Parallel Data Fetching

Fetch multiple data sources concurrently:

export default async function Page() {
  const [posts, categories, tags] = await Promise.all([
    getAllPosts(),
    getAllCategories(),
    getAllTags(),
  ]);

  return <PageContent {...{ posts, categories, tags }} />;
}

Streaming with Suspense

Stream content as it loads:

import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header />
      <Suspense fallback={<Skeleton />}>
        <AsyncContent />
      </Suspense>
      <Footer />
    </>
  );
}

Route Segment Config

Fine-tune per-route behavior:

// app/blog/[slug]/page.tsx
export const dynamic = 'force-static';
export const revalidate = false;
export const fetchCache = 'force-cache';
export const runtime = 'nodejs';
export const preferredRegion = 'auto';

Security Considerations

API Security

Protect revalidation endpoints:

// Verify secret
if (request.secret !== process.env.REVALIDATION_SECRET) {
  return Response.json({ error: 'Invalid secret' }, { status: 401 });
}

Content Security

Sanitize WordPress content
Validate GraphQL responses
Escape user-generated content
Use HTTPS everywhere

Best Practices

1. Start with ISR

Use ISR as default, optimize as needed:

Begin with on-demand revalidation
Add time-based fallback
Move to static for stable content
Use SSR only when necessary

2. Monitor Performance

Track Core Web Vitals
Monitor error rates
Analyze cache hit rates
Review build times

3. Optimize Images

Compress before upload
Use next/image
Enable WebP/AVIF
Implement lazy loading

4. Test Thoroughly

Test revalidation
Verify caching
Check error handling
Validate performance

Next Steps

Explore advanced topics in detail:

ISR & Caching - Deep dive into ISR
Rendering Strategies - Choose the right approach

Overview​

Key Concepts​

Incremental Static Regeneration​

Rendering Strategies​

Performance Optimization​

Target Metrics​

Optimization Techniques​

ISR Configuration​

On-Demand Revalidation​

Time-Based Revalidation​

Hybrid Approach​

Rendering Strategy Selection​

Decision Tree​

Content Type Recommendations​

Caching Strategies​

Edge Caching​

WordPress Caching​

Browser Caching​

Build Optimization​

Reduce Build Time​

Optimize Bundle Size​

Monitoring & Analytics​

Performance Monitoring​

Debugging Performance​

Advanced Patterns​

Parallel Data Fetching​

Streaming with Suspense​

Route Segment Config​

Security Considerations​

API Security​

Content Security​

Best Practices​

1. Start with ISR​

2. Monitor Performance​

3. Optimize Images​

4. Test Thoroughly​

Next Steps​

See Also​