Understanding SSR vs CSR: Benefits, Drawbacks, and Practical Implementation with Puppeteer
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.
What is SSR?
SSR (Server Side Rendering) means the server generates a complete HTML page before sending it to the client. Traditional technologies like ASP, JSP, and PHP are examples of server‑side rendering.
Advantages
Improves SEO because search engines can crawl the final HTML.
Reduces first‑paint time since the HTML is ready on the server.
Disadvantages
Consumes server resources for rendering.
Can hurt user experience because each navigation requires a full page render on the server.
SSR Pseudocode
index.html<!DOCTYPE html>
<html>
<head>
<title>Open Source Tech Stack</title>
</head>
<body id="PUPPETEER_SSR">
<div id="app">
<div class="page-home">
<div class="item-nav">Public Account</div>
</div>
</div>
<script type="text/javascript">
document.querySelector("body>div").innerHTML = "";
</script>
<script src="xxxx.js"></script>
</body>
</html>What is CSR?
CSR (Client Side Rendering) performs rendering in the browser. Frameworks like Vue or React initially load a minimal HTML file and then fetch JavaScript to render the full page.
Advantages
Enables front‑end/back‑end separation; the front‑end can use any framework without adhering to server templates.
Reduces server load; the server returns static HTML.
Supports SPA and incremental rendering for better subsequent navigation.
Disadvantages
Poor SEO because crawlers do not execute JavaScript.
Longer first‑paint time due to AJAX data fetching.
CSR Pseudocode
index.htmlcontent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="icon" href="/favicon.ico">
<title>Open Source Tech Stack</title>
<link rel="stylesheet" href="//at.baidu.com/t/12321.css">
<link rel="preload" href="/js/app.7291647f.js" as="script">
<link rel="preload" href="/js/chunk-elementUI.a450811c.js" as="script">
<link rel="stylesheet" href="/css/chunk-libs.48206084.css">
<link rel="stylesheet" href="/css/app.cc84f854.css">
</head>
<body>
<noscript>
<strong>Front‑end/back‑end separation, RESTful API design, authentication, etc.</strong>
</noscript>
<script src="/js/runtime.2eb7950f.js"></script>
<script src="/js/app.7291647f.js"></script>
</body>
</html>Common SSR Solutions
Frameworks like Next.js
Next.js is a React‑based SSR tool.
Advantages
Intuitive page‑based routing with dynamic routes.
Supports static generation (SSG) and SSR per page.
Automatic code splitting for faster loads.
Optimized client‑side routing with prefetch.
Built‑in CSS, Sass, and CSS‑in‑JS support.
Fast refresh in development.
Serverless functions and API routes.
Fully extensible.
Puppeteer General SSR
Puppeteer is a Node library that controls Chromium via the DevTools protocol. It runs headless by default but can be configured for headed mode.
Use Cases
Generate PDF files from pages.
Crawl SPAs and produce pre‑rendered content (SSR).
Automate form submission, UI testing, keyboard input, etc.
SSR Solution Based on Puppeteer
SSR Functional Modules
SSR Module Execution Flow
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Open Source Tech Hub
Sharing cutting-edge internet technologies and practical AI resources.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.