在前端开发的世界里，我们经常遇到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.28at.com/showinfo-26-88721-0.html一文搞懂：什么是SSR、SSG、CSR？前端渲染技术全解析
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 三分钟入门Helm工具
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号