直屏旗艦來(lái)了 iQOO 12和K70 Pro同臺(tái)競(jìng)技
旗艦機(jī)基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛(ài)好者在苦等一款直屏旗艦，這次，你們等到了。據(jù)博主數(shù)碼閑聊站帶來(lái)的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
在前端開發(fā)的世界里，我們經(jīng)常遇到SSR（服務(wù)器端渲染）、SSG（靜態(tài)站點(diǎn)生成）和CSR（客戶端渲染）這三種渲染技術(shù)。它們各自有著獨(dú)特的優(yōu)缺點(diǎn)，適用于不同的場(chǎng)景和需求。下面，我們將詳細(xì)介紹這三種技術(shù)，并通過(guò)代碼示例來(lái)加深理解。
介紹：
CSR（Client-Side Rendering）是前端開發(fā)中最常見(jiàn)的渲染方式。在這種模式下，服務(wù)器主要負(fù)責(zé)提供靜態(tài)的HTML文件（可能包含一些基本的HTML結(jié)構(gòu)和JavaScript腳本），而真正的頁(yè)面渲染工作則完全由客戶端的瀏覽器來(lái)完成。這意味著頁(yè)面內(nèi)容是在用戶的瀏覽器上動(dòng)態(tài)生成的。
優(yōu)點(diǎn)：
缺點(diǎn)：
示例（使用React）：
// 假設(shè)有一個(gè)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文件// 瀏覽器加載并執(zhí)行這些JavaScript，從而渲染頁(yè)面介紹：
SSR（Server-Side Rendering）是一種在服務(wù)器端完成頁(yè)面渲染的技術(shù)。在這種模式下，服務(wù)器接收到客戶端的請(qǐng)求后，會(huì)先根據(jù)請(qǐng)求數(shù)據(jù)和模板文件生成完整的HTML頁(yè)面，然后將這個(gè)頁(yè)面直接發(fā)送給客戶端。這樣，用戶可以直接看到完成的內(nèi)容，無(wú)需等待JavaScript加載和執(zhí)行。
優(yōu)點(diǎn)：
缺點(diǎn)：
示例（使用React的服務(wù)器端渲染）：
// 服務(wù)器端代碼（Node.js）const React = require('react');const ReactDOMServer = require('react-dom/server');const MyComponent = require('./MyComponent').default; // 假設(shè)MyComponent是上面定義的React組件// 渲染組件為HTML字符串const html = ReactDOMServer.renderToString(<MyComponent />);// 將HTML字符串發(fā)送給客戶端// ...（這里省略了HTTP服務(wù)器和響應(yīng)發(fā)送的代碼）介紹：
SSG（Static Site Generation）是一種在構(gòu)建時(shí)生成靜態(tài)HTML頁(yè)面的技術(shù)。在這種模式下，開發(fā)者會(huì)編寫一些模板文件和數(shù)據(jù)文件，然后使用構(gòu)建工具（如Hugo、Gatsby等）將這些文件轉(zhuǎn)換為靜態(tài)的HTML頁(yè)面。這些頁(yè)面可以直接部署到服務(wù)器上，而不需要服務(wù)器進(jìn)行實(shí)時(shí)渲染。
優(yōu)點(diǎn)：
缺點(diǎn)：
示例（使用Nunjucks模板引擎）：模板文件（index.njk）：
<!DOCTYPE html><html><head> <title>My Static Site</title></head><body> <h1>{{ message }}</h1></body></html>構(gòu)建腳本（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!' });// 將渲染結(jié)果寫入HTML文件fs.writeFileSync('dist/index.html', res);// 現(xiàn)在你可以將生成的`dist/index.html`部署到服務(wù)器上CSR、SSR和SSG各有優(yōu)缺點(diǎn)，適用于不同的場(chǎng)景和需求。在選擇使用哪種技術(shù)時(shí)，需要根據(jù)項(xiàng)目的具體需求來(lái)權(quán)衡利弊。
例如，對(duì)于需要豐富交互效果和實(shí)時(shí)數(shù)據(jù)的場(chǎng)景，可以選擇CSR；對(duì)于需要優(yōu)化首屏加載速度和SEO效果的場(chǎng)景，可以選擇SSR；而對(duì)于內(nèi)容更新不頻繁、對(duì)性能要求高的場(chǎng)景，可以選擇SSG。同時(shí)，也可以結(jié)合使用多種技術(shù)來(lái)實(shí)現(xiàn)更好的用戶體驗(yàn)和性能優(yōu)化。
本文鏈接：http://www.www897cc.com/showinfo-26-88721-0.html一文搞懂：什么是SSR、SSG、CSR？前端渲染技術(shù)全解析
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 三分鐘入門Helm工具
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)