Choosing Between SSG, Edge Functions, and Serverless Functions on Netlify

The Dynamic Content Dilemma

When deploying to Netlify, the primary engineering challenge is deciding where logic should execute: at build time, at the network edge, or in a serverless environment. Choosing the wrong strategy leads to either sluggish page loads (due to serverless cold starts) or excessive build times (due to massive static site generation).

The goal is to balance Time to First Byte (TTFB) with the need for real-time user‑specific data.

Comparison of Delivery Strategies

Feature	Static Site Generation (SSG)	Edge Functions	Netlify Functions (Serverless)
Execution Time	Build time (CI/CD)	Request time (Edge)	Request time (Regional)
Latency	Lowest (CDN Cached)	Very Low	Moderate (Cold starts possible)
Data Freshness	Until next deploy	Real-time	Real-time
Best Use Case	Blog posts, Documentation	A/B testing, Geo-redirects	API integrations, DB writes
Scaling	Automatic/Infinite	Automatic/Global	Automatic/Regional

Evaluating Trade-offs

Static Site Generation (SSG) is the default for performance. By pre‑rendering pages into HTML, Netlify uses Atomic Deploys—immutable snapshots of your site. This ensures that users never see a partial update where some pages are new and others are old. However, if your site has 10,000+ pages, build times can become a bottleneck.

Edge Functions run on the Deno runtime at the network edge, closer to the user. They are ideal for logic that must happen before the page reaches the browser, such as checking a cookie for a subscription status or redirecting a user based on their country. They avoid the cold start (the delay when a function wakes up after inactivity) common in heavier serverless environments.

Netlify Functions (built on AWS Lambda) are designed for heavier lifting. Use these for tasks that require full Node.js libraries, complex database queries, or third‑party API interactions that take longer than the strict execution limits of Edge Functions.

Implementation: Hybrid Architecture

A common production pattern is using SSG for the layout, Edge Functions for personalization, and Serverless Functions for data mutations.

To implement this, define your configuration in a netlify.toml file in the project root. This file tells Netlify how to build the site and where the functions reside.

[build]
  command = 'npm run build'
  publish = 'dist'

[[edge_functions]]
  path = '/personalized-greeting'
  function = 'greeting'

[functions]
  directory = 'netlify/functions'

Deploying and Validating the Logic

To deploy a serverless function, create a file at netlify/functions/submit-form.js. Ensure you have the necessary permissions to push to your linked Git repository or use the Netlify CLI.

// netlify/functions/submit-form.js
exports.handler = async (event, context) => {
  if (event.httpMethod !== 'POST') {
    return { statusCode: 405, body: 'Method Not Allowed' };
  }
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Data received successfully' }),
  };
};

Verification Steps:

• Serverless Check: Navigate to your-site.netlify.app/.netlify/functions/submit-form. A 405 Method Not Allowed response confirms the function is live and correctly filtering for POST requests.
• Atomic Deploy Check: In the Netlify Dashboard under the Deploys tab, locate the unique build hash (e.g., a1b2c3d). Access the site via the specific deploy URL to verify that the version is frozen and consistent across all pages.
• Edge Latency: Use browser developer tools (Network tab) to observe the Server header; Edge functions typically resolve faster than regional serverless functions.

Limitations and Risks

• Execution Limits: Serverless functions have a maximum timeout (typically 10 seconds). Long-running processes will trigger a 502 error.
• Cold Starts: Functions not called frequently may experience a 1–3 second delay on the first request.
• Cost: While SSG is largely free/cheap, high-volume Edge and Serverless function calls can quickly exhaust the free tier limits.