Anthropic engineers replaced SSR with a Vite‑based static stack for Claude.ai, deploying to edge workers and achieving a 65% reduction in p75 TTFB and a 50% faster prompt display, while illustrating why SPA‑oriented AI chat apps may forgo server‑side rendering.
The article details how Meituan‑Dianping’s growth team rebuilt its high‑traffic M‑site using Qwik.js, replacing a legacy Vue‑based stack with a resumable SSR architecture that eliminates hydration overhead, dramatically reduces first‑screen JS size, and boosts conversion metrics across weak‑network and low‑end devices.
Next.js, a React‑based frontend framework, combines SPA and MPA advantages through hybrid rendering, offering automatic file‑system routing, flexible SSR/SSG/CSR/ISR strategies, built‑in API routes, image optimization, middleware and edge computing, making it ideal for e‑commerce, CMS, enterprise dashboards and SEO‑critical sites.
The article compares contemporary SSR frameworks such as Next.js, Nuxt.js, and Remix with traditional PHP server‑side rendering, arguing that despite added complexity and modern tooling, the core goal of generating HTML on the server for performance and SEO remains the same.
Facing the challenges of a billion‑user membership platform, we analyzed front‑end performance metrics, applied resource slimming, lazy loading, network optimizations, and SSR/pre‑rendering techniques, achieving up to 73% LCP reduction and dramatically improving page load speed and user retention.
This article outlines ten concrete React optimization techniques—including lazy loading, image compression, memoization, code splitting, CDN usage, API throttling, server‑side rendering, WebSockets, minification, and load testing—demonstrating how each step dramatically improves performance and scalability for traffic spikes exceeding three million concurrent users.
Baidu live streaming interactive framework optimized performance and stability for music+red‑packet activities, using component reuse, page pre‑static generation, SSR, ISR, prefetching, view prerender, fallback mechanisms, and animation downgrade, achieving first‑screen load reductions to 0.5 s and delivering a reusable solution for large‑scale live events.
This article details the complete redesign of the external product detail page, replacing the uni‑app SPA with a source‑build SSR solution, introducing a split‑first‑screen data strategy, multi‑environment support, risk‑controlled fallback mechanisms, and targeted refactors of request interceptors and tracking hooks, resulting in significant performance and business metric improvements.
This article explains the fundamentals of Jamstack and server‑side rendering (SSR), compares their roles in modern web development, and examines emerging trends such as React Server Components, WebAssembly integration, serverless architectures, and hybrid rendering, outlining how these innovations shape the future of SSR.
Hydration in Leptos involves rendering the initial HTML on the server and then, on the client via WebAssembly, attaching event listeners and state management to enable fast page loads, SEO benefits, and interactive features, with example SSR code illustrating the process.
This article explains the concept of Server‑Side Rendering (SSR), why it improves SEO and first‑paint performance, compares popular SSR‑compatible frameworks, and provides a step‑by‑step guide for initializing a Nuxt project, configuring routing, SEO, styling, data fetching, state management, and extending functionality with modules.
Discover ten practical JavaScript SEO strategies—from server‑side rendering and canonical tags to lazy loading, pre‑rendering, dynamic meta tags, and clean URLs—that help frontend developers ensure their dynamic sites remain crawlable, indexable, and rank higher in search results.
This article introduces the Astro static‑site framework, explains its island architecture and performance advantages, compares Core Web Vitals with other frameworks, and provides detailed code examples and best‑practice guidelines for integrating Astro with React and Vue in real‑world projects.
This comprehensive tutorial walks through Pinia's core concepts—including stores, defineStore, reactive integration, devtools, plugins, TypeScript support, SSR handling, and mapping helpers—providing step‑by‑step code examples and detailed explanations for building robust Vue 3 applications.
This article examines how server‑side rendering can serialize normally non‑serializable data such as Promises, Dates, RegExp, and BigInt, comparing Remix’s defer‑based approach with Turbo‑Stream’s encode/decode method, and discusses their mechanisms, benefits, and challenges.
The article details the technical architecture and design of the StarCreate landing‑page editor, describing its monorepo structure, low‑code JSON template, backend permission system, canvas implementation choices, Valtio state management, and the resulting operational benefits and future expansion plans.
SSR (Server Side Rendering) generates complete HTML on the server, improving SEO and first‑paint speed, while CSR (Client Side Rendering) renders in the browser, offering front‑end flexibility but hurting SEO; the article compares their pros and cons, shows pseudocode, and presents practical SSR implementations using Next.js and Puppeteer.
This article explains how React Router 6.4’s new Data APIs—loader functions, defer, and the Await component—separate data fetching from rendering, improve client‑side and server‑side rendering performance, and provide a smoother user experience through progressive loading and streaming.
Mpx 2.9 adds built‑in atomic‑class (utility‑first) CSS, server‑side rendering for web output, and a suite of bundle‑size optimizations—including deterministic IDs, template compression, empty‑module removal, and render‑function pruning—while splitting atomic CSS into sub‑packages for mini‑programs and outlining a roadmap for further compile‑time reductions, Vite support, and cross‑platform extensions.
To address fragmented TV OS versions, low‑end hardware, and SDK fragmentation, the Kiwi App team defined unified performance metrics and applied optimizations—resource merging, server‑side rendering, offline caching, HTTP/2 networking, parallel loading, WebView pre‑heating, and page pre‑rendering—cutting average H5 load time from over five seconds to about two seconds and increasing conversion and payment success rates, with plans to keep loads under two seconds.
The guide shows how to use Next.js 13’s server‑side rendering with TypeScript and Tailwind CSS to generate fully rendered HTML for better SEO, recommending direct output of key content, native anchor tags for navigation, proper TDK, robots.txt, sitemap.xml, async components, CDN asset prefixes, optimized Tailwind utilities, and careful image handling.
This article compares Nuxt.js, Next.js, and Nest.js, explaining their roles as server‑side rendering frameworks for Vue and React and as a TypeScript‑based Node backend, and provides installation steps, core features, and code examples for each.
This article walks you through the evolution of web rendering modes—from early static pages to modern CSR, SSR, SSG, ISR, and edge‑rendering techniques—explaining their design ideas, pros and cons, and how to pick the best fit for different performance, cost, and development scenarios.
This article explains the fundamentals of client‑side rendering (CSR), server‑side rendering (SSR), and isomorphic rendering, demonstrates a minimal Vue 3 isomorphic example with code snippets, discusses dehydration/hydration, and shares practical tips and pitfalls for building production‑grade SSR applications.
This article walks through implementing React Server Components (RSC) from the ground up, covering basic file‑serving with PHP, migrating to Node.js with JSX, adding component, routing, async support, and client‑side state persistence, while contrasting RSC with traditional MVC approaches.
This article explains how Ant Design's CSS‑in‑JS implementation uses server‑side rendering and a hash‑based cache to avoid runtime style generation, dramatically improving performance for both application‑level and component‑level styling.
The 2023 web development landscape is shifting toward meta‑frameworks with server‑side rendering, edge‑computing and serverless functions, revived databases, modern JavaScript runtimes, monorepos, utility‑first CSS, end‑to‑end type safety, new build tools, and AI‑assisted coding, reshaping how developers build full‑stack applications.
The Sogou Baike mobile front‑end upgrade consolidated three fragmented projects into a single repository, introduced React‑SSR with routing and Redux, streamlined CI/CD, trimmed SSR payloads, lazy‑loaded assets and cut first‑screen requests, resulting in a 24% faster load, 35% bandwidth reduction, 11% CTR rise and a modern, cross‑stack foundation.
This article explains the concept of streaming (incremental) rendering introduced in React 18, demonstrates how to apply it in Next.js and Remix using server components and Suspense, and walks through a custom SSR setup that leverages renderToPipeableStream and the upcoming use hook for seamless data fetching.
This article analyses how modern frontend view frameworks such as Solid, Svelte, Qwik, React, Vue and Angular are converging on a solidified programming paradigm while competing through fine‑grained rendering, reactive data, developer tooling, compilation strategies and the push to reduce JavaScript for better first‑page performance.
This article traces a decade of front‑end rendering evolution, explaining traditional server‑side rendering, the rise of client‑side frameworks, modern hybrid approaches such as SSR, SSG, ISG, progressive and selective hydration, streaming SSR, islands architecture and React Server Components, while highlighting their trade‑offs and use‑cases.
The team merged Taobao car detail page SSR and CSR into a single repository by adding an "ssr": true flag, aligning routing across src/pages, app.json, and render functions, ensuring PAGE_NAME matches app.json names, mocking browser globals for Node builds, moving metas and scripts to documents, and dynamically overriding the public path to load pre‑release assets, thereby cutting double maintenance and simplifying deployment.
The article explains the Resumable rendering concept introduced by Miško Hevery, contrasts it with traditional SSR hydration, details its implementation in the Qwik framework, compares it to React Server Components, and discusses why React has not adopted this approach despite its performance benefits.
BBC found that each extra second of load time cuts users by 10%, so they adopted server‑side rendering to boost first‑screen performance on low‑end devices, accepting higher server load and longer white‑screen time, choosing the stable Rax solution over ICE 3.0, and emphasizing selective use, streaming HTML, and careful migration guidelines.
This article explains the purpose, benefits, and implementation of React 18’s useSyncExternalStore hook, covering its role in synchronizing external state such as browser APIs, preventing UI tearing during concurrent rendering, and providing SSR support with practical code examples like useMediaQuery and useWindowSize.
This article examines how different React rendering strategies—client‑side rendering, server‑side rendering, and the new React 18 Streaming SSR—affect key web performance metrics such as TTI, FCP, and first‑paint, and demonstrates substantial latency reductions achieved through streaming and selective hydration.
This article explains the fundamentals of server‑side rendering versus client‑side rendering, highlights the performance drawbacks of traditional hydration, and introduces Qwik’s resumable approach that serialises state and events into HTML to achieve near‑zero hydration overhead while maintaining interactivity.
The article surveys the latest web development trends—rising meta‑frameworks like Next.js, the shift toward server‑side rendering and edge‑computing, the resurgence of databases with serverless, the evolution of JavaScript runtimes, monorepos, utility‑first CSS, end‑to‑end type safety, modern build tools, and AI‑driven coding—highlighting why 2023 feels like a renaissance for front‑end engineers.
The guide explains how to implement Server‑Side Rendering in a Rax‑based e‑commerce car platform, replacing client‑side rendering to fix white‑screen and performance issues by simulating the browser environment with jsdom, handling data requests, null API fields, and auto‑closing tag discrepancies, while outlining architecture, middleware, and future CSR‑SSR integration.
This article explains how ice.js 3 improves web performance by combining MPA and SPA loading strategies, parallelizing component and data fetching, leveraging SSG and SSR, and exploring cloud‑based prefetch and zero‑bundle concepts to deliver smoother user experiences.
ice.js 3 merges MPA and SPA concepts to deliver per‑page HTML, parallelizes block and data loading, introduces SSG and out‑of‑the‑box SSR with streaming and Server Components, supports multi‑end development, and upgrades the runtime with swc and esbuild to dramatically improve web performance and developer experience.
Ice.js 3, Alibaba’s Taobao‑originated multi‑terminal framework, extends earlier versions to unify PC, web, and mini‑program development with a React 18‑based runtime, smaller bundles, built‑in plugins, SWC/esbuild toolchains, SSR/SSG data loading, Midway FaaS deployment, and a roadmap toward React Streaming and Server Components.
SvelteKit 1.0, now production‑ready, combines server‑side rendering, flexible routing, code‑splitting, and serverless adapters into a single framework that streamlines full‑stack development and delivers faster page transitions and richer user experiences.
In early 2021 senior engineer Liu Lei led a complete redesign of Bilibili’s PC homepage, adopting Vue 3 with a custom SSR/CSR hybrid, responsive grid layouts via CSS grid and flex, theme variables, monorepo tooling, and extensive performance tweaks—boosting the page’s score dramatically while preserving hackability and supporting both narrow and ultra‑wide screens.
This article provides a step‑by‑step tutorial on installing the stable Nuxt 3 release, explaining server‑side rendering concepts, configuring routes, layouts, components, plugins, composables, Pinia, VueUse, CSS preprocessing, and best practices for building a modern frontend application.
This article examines the limitations of traditional big‑runtime and Virtual DOM frameworks, explores community solutions like pre‑compile, Islands, and React Server Components, and explains how Qwik’s Resumable approach and Partytown can dramatically improve first‑paint speed and reduce client‑side overhead.
This article explains how Qwik, a full‑stack SSR framework, uses pre‑compilation, resumable rendering, and fine‑grained event handling to avoid the heavy runtime and hydration overhead of traditional Virtual DOM frameworks, offering superior first‑paint performance and lower JavaScript payloads.
This article details Snowball's frontend team's comprehensive approach to three‑platform (iOS, Android, H5) unified development using React Native, a custom styled‑system, server‑side rendering, CI/CD pipelines, testing strategies, and future AI‑driven code generation, providing practical guidance for cross‑platform projects.
The senior Taobao front‑end engineer describes how building internal tools like AppDevTools and mtop.js shaped his view of front‑end architecture, outlining the architect’s role in linking product, design, and engineering, creating clear, flexible solutions, guiding teams through systematic problem‑solving, and fostering continuous learning and communication.
The article explains the origins and advantages of the Islands architecture, compares MPA and SPA approaches, details how frameworks like Astro and Fresh implement Islands, and shares practical insights and performance data from the author’s own Island.js project.
The article shares a six-year journey at Taobao, reflecting on front-end architecture principles, the role of a front-end architect, a practical SSR optimization process, and personal insights on becoming a well-rounded architect who balances technical depth, breadth, and business understanding.
This article examines Builder.io's performance optimization case, reviews the evolution of lazy‑loading techniques in front‑end development, and explains how Qwik implements ultra‑fine-grained lazy loading and prefetching to eliminate costly hydration and improve page interactivity.
This article explains how the Autohome front‑end team applied SSR, introduced a flexible API‑layer caching solution and a ServerTiming‑based request‑duration visualization to improve performance, maintainability, and user experience in both Node and browser environments.
This article provides an in‑depth tutorial on implementing server‑side rendering (SSR) for React applications, covering basic concepts, Koa server setup, ReactDOMServer APIs, routing with react‑router, Redux state hydration, CSS handling, performance optimizations, and modern SSR frameworks such as Next.js and Umi.
Umi 4 is now available on npm and brings a host of new capabilities—including dual Vite/Webpack builds, faster default compilation with MFSU V3, Umi Max for enterprise back‑office, React Router 6, Vue support, automatic HTTPS, build progress UI, terminal logging, plugin APIs, dead‑code detection, and a lightweight UI—while outlining future roadmap items such as MFSU V4, Father 4, dumi 2, and bundless ESMi solutions.
In this personal learning plan for 2022, the author outlines a deep dive into Rust and WebAssembly, explores Vite with server‑side rendering, experiments with Vue, React and Next.js, investigates Kubernetes for container orchestration, and examines GraphQL as a modern API alternative.
Version 3.5 of Taro introduces a major compilation system overhaul with Webpack 5 support, module‑federation based dependency pre‑bundling, esbuild compression, and @swc/register, delivering faster builds, React 18 compatibility, SSR via a Next.js plugin, MPA and Expo‑based React Native enhancements, plus detailed upgrade steps.
This article analyzes various CSS styling approaches for React component libraries, comparing CSS‑JS association methods and naming‑conflict solutions, and offers guidance on selecting the most suitable strategy based on development workflow, performance, SSR support, and maintainability.
This article provides a complete English translation of a 1.5‑hour live interview where Vercel’s Director of Developer Relations discusses the evolution of frontend development, edge networks, rendering strategies such as CSR, SSR, SSG, ISR, RSC, the Vercel platform workflow, and the role of Rust, WebAssembly, and SWC in modern web tooling.
This article explains how Baidu Live R&D introduced a lightweight server‑side rendering (SSR) solution that integrates into existing client‑side rendering (CSR) projects by adding a JavaScript compute function, detailing the architectural components, goals, implementation steps, development experience, risk mitigation, and future outlook.
This article collection explores key front‑end topics—including Vue server‑side rendering, comprehensive monitoring strategies, Babel compilation fundamentals, the latest CSS 2022 features, and decorator design patterns, and tile‑layout techniques for BI reporting—while also introducing the Cloud Classroom front‑end team.
This article explains React 18’s four major innovations—Automatic Batching, Concurrent APIs, Server‑Side Rendering for Suspense, and the new Render API—showing how they improve rendering performance, enable concurrent UI updates, and simplify hydration in modern web applications.
This article explains the principles and implementation of server‑side rendering (SSR) in Vue, comparing CSR and SSR, detailing how Vue’s vue‑server‑renderer creates a bundle renderer, executes code via Node’s vm, traverses the virtual DOM to generate HTML strings, and relates SSR rendering to the generate phase of front‑end compilation.
This article describes how Ctrip Financial’s front‑end team measured, analyzed, and optimized key web‑performance metrics such as First Contentful Paint, DNS/TCP durations, and Cumulative Layout Shift for their server‑side rendered applications, providing concrete monitoring code, data‑processing methods, and practical optimization techniques to improve user experience and achieve a 70%+ instant‑load rate.
This article details the motivation, technology selection, architecture design, and multi‑stage performance optimization of a server‑side rendering (SSR) solution built with Vue and Nuxt for the 360 Search Encyclopedia mobile project, covering challenges, experiments, deployment strategies, and final conclusions.
The Baidu Ai Procurement team replaced its PHP‑Smarty rendering with a Node.js‑based Vue SSR layer, introducing a five‑layer, configuration‑driven architecture that separates data fetching, state handling, and UI, delivering roughly 30 % faster page loads and better SEO while adding modest operational overhead and paving the way for broader micro‑service expansion.
This article explains the fundamentals of Vue server‑side rendering, why hydration is needed, the scenarios where it should be used, the typical reasons hydration can fail, and practical steps to diagnose and resolve those failures for more stable frontend applications.
Lazada's H5 container team tackled severe first‑screen delays on high‑traffic sales events by building a monitoring system, introducing pre‑heat and pre‑render techniques, and adopting server‑side rendering, ultimately cutting load times by up to 50% and dramatically improving user conversion across Southeast Asia.
This article explains the concepts, use cases, advantages, and limitations of server‑side rendering (SSR) for Vue applications, details the Vue SSR architecture and core packages, and provides practical code examples and ready‑to‑use scaffolds for building SSR projects.
This article introduces the @umajs/plugin-vue-ssr plugin, detailing its installation, configuration, key features, data fetching methods, CSS support, and integration with Vue, Vuex, and Koa to enable efficient server‑side rendering and client‑side rendering within the UMajs framework.
This article explores how serverless infrastructure lets front‑end engineers combine front‑end and back‑end development through patterns like front‑end/back‑end separation, BFF, and integrated frameworks, offering lower costs, higher reliability, and faster iteration for modern web applications.
This article explains the motivation, component types, naming conventions, runtime mechanism, streaming protocol, design goals, and practical considerations of React Server Components, illustrating how they reduce client bundle size and enable progressive server‑side rendering with code examples.
This article explains Next.js’s three pre‑rendering modes—SSR, SSG, and ISR—detailing their advantages, limitations, and how they can be combined in hybrid rendering strategies, with practical code examples and deployment considerations for modern frontend development.
This article explains Next.js's three pre‑rendering strategies—Server‑Side Rendering, Static Site Generation, and Incremental Static Regeneration—along with their hybrid combinations, illustrating when to use each approach, their benefits, trade‑offs, and providing practical code examples.
Umajs-react-ssr is a lightweight isomorphic SSR solution built on the Umajs Node.js framework that enables React page components to be rendered on both server and client, offering flexible routing, server‑side data fetching, custom HTML templates, CSS‑module support, and easy configuration for improved performance and developer experience.
To boost iQIYI’s front‑end reliability, the team replaced a Velocity‑based SSR with Nuxt, introduced a centralized page‑config plugin, streamlined legacy‑browser handling, built a visual data‑filtering API, implemented Nginx and component caching, purge endpoints, multi‑layer rate limiting, disaster‑recovery fallback, and comprehensive logging, achieving ~0.5 s first‑screen loads, 0.2 % error rate and near‑100 % availability.
The DeWu app boosted WebView H5 page load speed by combining native‑level tactics—static JS/CSS bundling, HTML preloading—and web‑only strategies such as SSR, WebP image conversion, unused‑component removal, on‑demand lodash loading, and off‑screen image lazy‑loading, raising second‑open rates from ~5% to ~40%, improving Lighthouse scores by over 20% and cutting transferred bytes by roughly 20%, delivering an overall ~10% performance gain.
This article details a comprehensive performance overhaul of a Taobao acquisition page—targeting low‑end phones and unstable networks—by centralizing APIs, prefetching data, and deploying static SSR, ultimately reducing first‑screen render time from several seconds to under one second.
This article traces the evolution of web technologies from Tim Berners‑Lee's first static page and the birth of HTML, through the rise of JavaScript, CSS, AJAX, SPA, SSR, and NodeJS, to recent innovations like React Server Components and future trends in web rendering.
The author shares a detailed, 8‑month journey as an intern in ByteDance’s front‑end architecture group, describing early challenges, transitions to engineering tooling, deep work on SSR, time‑management struggles, team dynamics, personal growth, and future plans for skill development and sharing.
This article explains the concepts of SSR and CSR, introduces Serverless cloud functions, details the installation and configuration steps for deploying a Serverless‑based SSR application using Tencent Cloud, and shares practical tips, component choices, and billing considerations.
This article traces the evolution of web technologies from Tim Berners‑Lee's first static page in 1991 through the rise of HTML, CSS, JavaScript, dynamic server‑side solutions like PHP and AJAX, the emergence of SPAs, and modern innovations such as SSR, React Server Components, and Web Components, highlighting key milestones, challenges, and future directions.
Spanning three decades, this article traces the evolution of web development from Tim Berners‑Lee’s 1991 static page through the rise of HTML, CSS, JavaScript, PHP, AJAX, SPA frameworks, server‑side rendering, Node.js, and emerging trends like React Server Components, illustrating how each breakthrough addressed the limitations of its predecessors.
This article explores the evolution of front‑end performance optimization, compares SPA and SSR architectures, introduces a Node‑based middle‑layer design, and details the CarNext framework built on Next.js that improves rendering speed, SEO friendliness, and development efficiency for 58.com’s automotive services.
This article analyses the evolution of Baidu's search result page front‑end architecture, identifies scalability, coupling, and technology‑stack problems, and presents a three‑layer strategy—foundation, modular middle layer, and componentized top layer—along with concrete implementation steps such as TypeScript adoption, service‑oriented modules, dependency‑injection containers, and SSR performance optimizations.
This article analyzes the adoption of Vue Server‑Side Rendering at Haodafu Online, detailing its advantages for SEO and fast content delivery, the architectural integration with an existing Express/Node stack, performance testing results, degradation strategies, remaining issues, and future improvement plans.
This article explains why front‑end performance is critical, outlines the most cost‑effective metrics such as FCP, TTS, and TSP, describes the SDK‑SLS‑Backend architecture, shares key technical decisions, and proposes future enhancements for a robust monitoring solution.
This article explains the principles of streaming server‑side rendering (SSR) in React, compares it with traditional client‑side rendering, and demonstrates how lazy loading and Suspense can be used together with streaming SSR to parallelize data and JavaScript delivery for faster first‑paint and improved user experience.
The article compares client‑side and server‑side rendering, defines key user‑perceived metrics such as FCP, LCP and a custom weighted‑area FMP, explains how to measure them with MutationObserver and performance APIs, and outlines business‑ and page‑level analysis plus optimizations—including pre‑loading, WebP images, bundle trimming and SSR tweaks—that collectively boost Lighthouse scores by over 20% and reduce data transfer by roughly 20%.
This article analyzes Baidu's mobile search front‑end architecture evolution, identifying scalability and maintainability challenges, outlining a three‑layer redesign strategy, and detailing concrete modularization, componentization, and SSR techniques that other large‑scale web teams can apply.
This article examines Baidu's mobile search front‑end architecture, identifies scalability and maintainability challenges such as massive codebases, unclear responsibilities, tight coupling and outdated tech stacks, and explains the three‑layer solution—foundation, modular middle layer, and componentization—along with implementation details, dependency injection, SSR adoption, and performance optimizations.
This article traces the evolution of web development from the first static HTML page through the rise of JavaScript, CSS, dynamic server‑side technologies, SPA and SSR, up to recent trends like React Server Components and micro‑frontends, highlighting why each breakthrough occurred.
The article examines the evolution of front‑end architecture using Baidu's mobile search result page as a case study, outlining challenges such as massive codebases, coupling, and outdated tech stacks, and presenting a three‑layer solution involving foundation, modularization, and componentization with SSR optimization.
This article examines Baidu's mobile search front‑end architecture evolution, detailing the challenges of massive codebases, unclear responsibilities, and outdated tech stacks, and explains how a three‑layer modular design, dependency‑injection container, componentization with San, and optimized server‑side rendering were employed to improve scalability, maintainability, and page performance.
This article examines the evolution and challenges of large‑scale front‑end architecture, using Baidu's search result page as a case study to illustrate problems such as massive codebases, unclear responsibilities, and outdated tech stacks, and describes a three‑layer modular, component‑based solution with SSR and DI to improve maintainability and performance.
The iQIYI International backend team boosted global video delivery by introducing a web‑cache layer, Brotli compression, and a two‑level Caffeine‑Redis caching system with pub/sub synchronization, achieving up to 6% faster First Contentful Paint, near‑100% cache‑hit rates, and measurable revenue gains.
The article examines the evolution and challenges of frontend architecture through Baidu’s mobile search case, identifies problems such as vague responsibilities, tight coupling, and legacy stacks, and proposes a three‑tier solution—infra, independent modules, and componentization—implemented via server‑client designs, a Molecule interface, DI container, SSR optimization, and cross‑platform strategies to enable flexible upgrades and business agility.
This article details the technical implementation of Next.js SSR for international projects, covering custom routing, data fetching, Material UI integration, SEO optimization, and special considerations for overseas markets including Google Recaptcha and internationalization.
Xianyu’s server‑side rendering solution uses a serverless Node.js app on Alibaba Cloud to aggregate backend data and render HTML, routing through Nginx and caching via CDN, which cuts first‑meaningful‑paint time, maintains high stability with low O&M, and seamlessly falls back to client‑side rendering when needed.
This article explains React server-side rendering (SSR), covering the differences between client-side rendering (CSR) and SSR, their advantages and disadvantages, and provides a step-by-step guide to implementing a simple SSR demo with React.
