Forschungsmittel.com Logo - Zur Startseite

Technical Architecture & SEO

This page provides a transparent insight into how forschungsmittel.com is technically implemented – from framework and hosting to SEO architecture and internal linking, through to performance, Core Web Vitals, and analytics setup.

The goal is to make it comprehensible why the website loads quickly, is cleanly structured, and works long-term for search engines and users.

Framework & Architecture

  • •Framework: Next.js 16.0.7 with App Router, Server Components, and Turbopack for faster builds
  • •Frontend: React 19.1.0, TypeScript (ES2020), Tailwind CSS 3.3.0
  • •Animation: Framer Motion 12.23.24 for smooth, performant animations with GPU acceleration
  • •Architecture: Hybrid rendering with Server-Side Rendering (SSR) and static pre-generation for core pages. Dynamic imports for code splitting.
  • •Routing: File-based routing with clear folder structure (/leistungen, /foerderprogramme, /fuer-wen, /whitepaper etc.)
  • •Code Splitting: 14+ components use dynamic imports (next/dynamic) to reduce initial bundle size
  • •CI/CD Pipeline: Automated CI/CD pipeline via Vercel with preview deployments, linting, type checking, and automated Lighthouse test gates

Hosting & Infrastructure

  • •Hosting: Vercel Edge Infrastructure with global CDN for sub-100ms response times
  • •Caching: Static pages with ISR (Incremental Static Regeneration), HTTP caching headers optimized by page type, minimumCacheTTL: 60
  • •Image Optimization: Next.js Image component with WebP/AVIF formats, responsive sizes (640px to 3840px), lazy loading (except LCP images)
  • •Security: HTTPS-Only, HSTS, comprehensive Content-Security-Policy (CSP) with strict directives, poweredByHeader: false
  • •Compression: Gzip/Brotli compression enabled, optimized bundle splitting for vendor libraries (Framer Motion, React Icons)

Components & Reusability

Component Architecture: 50+ reusable components organized by feature (Hero, Features, Roadmap, TargetGroups, etc.)

Central UI components include:

  • •Hero sections with video support and brand carousels
  • •Animated feature cards with Framer Motion
  • •Service teasers and program lists
  • •FAQ modules with expandable details
  • •Case study components with dynamic routing
  • •Contact forms with validation and DSGVO compliance

Content building blocks can be reused across multiple pages (e.g., process flows, success metrics, CTA buttons) without creating duplicate content for search engines.

Dark Mode: Full dark theme support via next-themes with system preference detection and manual toggle.

Database & Data Management

  • •Content: Markdown support via gray-matter and remark for blog posts and case studies
  • •Email: SMTP server integration for contact forms and notifications

Performance Foundations (Overview)

The architecture is optimized for Core Web Vitals and fast loading times:

  • •Server-side rendering with Next.js for optimal LCP (Largest Contentful Paint)
  • •Optimized image delivery with WebP/AVIF formats and responsive sizing
  • •Code splitting and dynamic imports to minimize initial bundle size
  • •Zero blocking JavaScript on initial load

For detailed performance metrics, Core Web Vitals scores, and optimization strategies, see the dedicated Performance & Core Web Vitals tab.

Technical Implementation & Architecture: H-Studio