掘力計劃第 20 期：Flutter 混合開發的混亂之治
在掘力計劃系列活動第20場，《Flutter 開發實戰詳解》作者，掘金優秀作者，Github GSY 系列目負責人戀貓的小郭分享了Flutter 混合開發的混亂之治。Flutter 基于自研的 Skia 引擎
在前端開發的世界里，我們經常遇到SSR（服務器端渲染）、SSG（靜態站點生成）和CSR（客戶端渲染）這三種渲染技術。它們各自有著獨特的優缺點，適用于不同的場景和需求。下面，我們將詳細介紹這三種技術，并通過代碼示例來加深理解。
介紹：
CSR（Client-Side Rendering）是前端開發中最常見的渲染方式。在這種模式下，服務器主要負責提供靜態的HTML文件（可能包含一些基本的HTML結構和JavaScript腳本），而真正的頁面渲染工作則完全由客戶端的瀏覽器來完成。這意味著頁面內容是在用戶的瀏覽器上動態生成的。
優點：
缺點：
示例（使用React）：
// 假設有一個React組件import React from 'react';function MyComponent() { const [message, setMessage] = React.useState('Hello, CSR!'); const handleClick = () => { setMessage('Clicked!'); }; return ( <div> <p>{message}</p> <button onClick={handleClick}>Click Me</button> </div> );}// 在HTML文件中引入React和組件的JavaScript文件// 瀏覽器加載并執行這些JavaScript，從而渲染頁面介紹：
SSR（Server-Side Rendering）是一種在服務器端完成頁面渲染的技術。在這種模式下，服務器接收到客戶端的請求后，會先根據請求數據和模板文件生成完整的HTML頁面，然后將這個頁面直接發送給客戶端。這樣，用戶可以直接看到完成的內容，無需等待JavaScript加載和執行。
優點：
缺點：
示例（使用React的服務器端渲染）：
// 服務器端代碼（Node.js）const React = require('react');const ReactDOMServer = require('react-dom/server');const MyComponent = require('./MyComponent').default; // 假設MyComponent是上面定義的React組件// 渲染組件為HTML字符串const html = ReactDOMServer.renderToString(<MyComponent />);// 將HTML字符串發送給客戶端// ...（這里省略了HTTP服務器和響應發送的代碼）介紹：
SSG（Static Site Generation）是一種在構建時生成靜態HTML頁面的技術。在這種模式下，開發者會編寫一些模板文件和數據文件，然后使用構建工具（如Hugo、Gatsby等）將這些文件轉換為靜態的HTML頁面。這些頁面可以直接部署到服務器上，而不需要服務器進行實時渲染。
優點：
缺點：
示例（使用Nunjucks模板引擎）：模板文件（index.njk）：
<!DOCTYPE html><html><head> <title>My Static Site</title></head><body> <h1>{{ message }}</h1></body></html>構建腳本（Node.js）：
const nunjucks = require('nunjucks');const fs = require('fs');// 配置Nunjucks模板引擎nunjucks.configure('views', { autoescape: true });// 渲染模板const res = nunjucks.render('index.njk', { message: 'Hello, SSG!' });// 將渲染結果寫入HTML文件fs.writeFileSync('dist/index.html', res);// 現在你可以將生成的`dist/index.html`部署到服務器上CSR、SSR和SSG各有優缺點，適用于不同的場景和需求。在選擇使用哪種技術時，需要根據項目的具體需求來權衡利弊。
例如，對于需要豐富交互效果和實時數據的場景，可以選擇CSR；對于需要優化首屏加載速度和SEO效果的場景，可以選擇SSR；而對于內容更新不頻繁、對性能要求高的場景，可以選擇SSG。同時，也可以結合使用多種技術來實現更好的用戶體驗和性能優化。
本文鏈接：http://www.tebozhan.com/showinfo-26-88569-0.html一文搞懂：什么是SSR、SSG、CSR？前端渲染技術全解析
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 三分鐘入門Helm工具
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號