前端ssr跟ssg的区别

前端渲染方案SSR / SSG

前端SSR(Server-side Rendering)与SSG(Static Site Generation)是两种不同的技术，用于提高网站性能和用户体验。

SSR：服务端渲染 Server Side Render，PHP / Java / Python 后台基本能力，生成 HTML 模板，交由浏览器渲染。

SSG：页面静态化 Static Side Generation，把 node 提前渲染成 HTML

前端SSR与SSG的区别前端SSR(Server-side Rendering)与SSG(Static Site Generation)是两种不同的技术，用于提高网站性能和用户体验。SSR技术是在服务器端生成完整的HTML页面，并将其发送给客户端。当客户端请求一个页面时，服务器端会动态生成该页面并将其发送给客户端。这种技术有助于提高网站的搜索引擎优化（SEO）和用户体验，因为页面在服务器端生成，客户端可以快速呈现页面。SSG技术是在构建阶段生成静态HTML页面，并存储在服务器端。当客户端请求一个页面时，服务器端直接发送预先生成的HTML页面。这种技术提高了网站的速度，因为服务器端不需要动态生成页面，客户端可以立即呈现页面。

总的来说，SSR技术更适用于需要动态生成页面的网站，例如含有个性化内容或动态数据的网站。而SSG技术更适用于不需要动态生成页面的静态网站，例如个人博客或静态展示网站。

前端SSR实现需要在服务器端使用技术，例如Node.js，使用框架，例如Express或Nest.js，以及渲染库，例如React或Vue.js。下面是一个使用React和Node.js实现SSR的简单示例：

在服务器端创建一个React组件，该组件将动态生成HTML。

创建一个Node.js服务器，该服务器将接收客户端请求并使用React组件生成完整的HTML页面。

在服务器端的Node.js服务器上安装必要的依赖项，例如React，Express等。

创建一个路由处理程序，该处理程序将在客户端请求一个页面时调用React组件，并生成HTML页面。

在客户端请求页面时，服务器端将动态生成完整的HTML页面并发送给客户端。


```javascript
// server.js
const express = require('express');
const React = require('react');
const renderToString = require('react-dom/server').renderToString;const app = express();app.get('/', (req, res) => {const html = renderToString(<html><head><title>SSR Example</title></head><body><div id="root">Hello World!</div></body></html>);res.send(`<!DOCTYPE html><html><head><title>SSR Example</title></head><body><div id="root">${html}</div></body></html>`);
});app.listen(3000, () => {console.log('Server is listening on port 3000');
});

上面的代码创建了一个Express应用程序，并在根路径上提供了一个响应。该响应使用React渲染一个HTML字符串，并将其包含在完整的HTML页面中。请注意，上面的代码仅提供了一个简单的示例，实际的实现可能更复杂，取决于您的需求。在实际项目中，您可能需要处理数据请求，状态管理，路由等。前端实现ssg首先，了解什么是静态站点生成器 (SSG, Static Site Generator)。它是一种生成静态网页的工具，通过将动态数据与静态模板结合，生成预先渲染的静态 HTML 文件。实现静态站点生成器的步骤如下：选择合适的技术栈：选择一个合适的静态站点生成器框架。设计模板：设计模板来控制静态站点的布局，样式和交互。编写数据：编写需要展示的数据，可以是 markdown 文件，JSON 文件等。生成静态站点：使用静态站点生成器把模板和数据结合，生成静态站点。部署站点：将生成的静态站点部署到 Web 服务器上，供用户访问。```typescript
import type { NextPage, GetStaticProps } from 'next'// 避免 TS 报错，预定义 SSG 数据结构
type HomeProps = {list: string[]
}const Home: NextPage<HomeProps> = (props) => {// 取出 SSG 数据const { list = [] } = propsreturn (<><p>hello user!</p>{list.map((item: any) => <p key={item}>{item}</p>)}</>)
}export default Home// 实现 SSG
export const getStaticProps: GetStaticProps = async () => {const { data, status } = await getAjaxData();// return 出的内容可以通过组件的 Props 取到return {props: {list: data}};
};

前端服务器渲染 (SSR, Server-Side Rendering) 和前端静态站点生成器 (SSG, Static Site Generator) 的优缺点如下：

优点：

SSR：

搜索引擎友好，因为它的内容在服务器端渲染，可以被搜索引擎爬取到。加载速度快，因为第一次渲染在服务器端完成，客户端只需要加载预渲染的 HTML。可以使用任意的 JavaScript 框架，因为它支持客户端 JavaScript 框架。

SSG：

部署方便，只需要静态文件，可以直接部署在任何 Web 服务器上。更快的构建速度，因为没有在运行时进行渲染，可以在预先生成静态文件。资源开销小，因为它不需要使用服务器资源进行渲染，可以节省资源。

缺点：

SSR：

服务器资源需求高，因为需要在服务器端渲染每个请求，所以服务器需要充足的资源。编写复杂的代码，因为它需要在服务器端和客户端实现。缓存困难，因为每个请求都需要渲染。

SSG：

搜索引擎

前端ssr跟ssg的区别相关推荐

【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
前言本来只是想学习 React-Router v6 ,没有想到,带出了这么多东西.前后端路由有什么区别?SPA与MPA的是什么?在了解到前端路之后又发现单页面于应用与多页面应用的不同之处,以及 .n ...
【Rust日报】2021-09-05 perseus：完全支持 SSR 和 SSG 的 Rust 高端前端开发框架
rust-tui-template:使用 tui-rs 和 crossterm 引导 Rust TUI 应用程序的模板项目结构如下: src/ ├── app.rs -> holds the ...
前端页面渲染方式CSR、SSR、SSG
三种渲染方式: 使用预渲染之前,首先要考虑是否真的需要它. 如果初始加载时的额外几百毫秒并不会对应用产生影响,这种情况下去使用预选染将是一个小题大作之举. 首屏加载时间是绝对关键的指标,在这种情况下, ...
教你使用 koa2 + vite + ts + vue3 + pinia 构建前端 SSR 企业级项目
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言大家好,我是易[1],在上一篇文章中,我们有讲到<如何使用 vite+vue3 ...
Web前端与HTML5有什么区别，百分之八十的人分不清
说到Web前端,很多人想到的就是HTML5,加上现在APP和小程序盛行,Web前端开发和HTML5开发都异常火热.外行人很容易将HTML5和Web前端划等号,那Web前端和HTML5是否一样?有些人已 ...
Web前端和后端开发的区别和要求
Web前端和后端开发的区别和要求有时候自己会分不清,其实是因为前后端都了解,类似于全栈工程师,但又什么都不是很精通.那到底什么是前端.后端呢,我整理了一些企业要求级别的前端/后端基础,开发框架等. ...
一文读懂前端与HTML5技术的区别！
现在好多人都把HTML5和前端的概念弄混淆了.例如,H5是HTML5的简称,而现在好多人把HTML5看成了是前端开发的总称.今天就为各位普及一下,到底前端和HTML5有哪些区别? 什么是前端开发以一 ...
SSR和CSR的区别
SSR和CSR的区别 SSR(Server Side Rendering) :传统的渲染方式,由服务端把渲染的完整的页面吐给客户端.这样减少了一次客户端到服务端的一次http请求,加快相应速度,一般用 ...
什么是后端渲染？什么是前端渲染？后端渲染和前端渲染又有什么区别呢？
什么是后端渲染?什么又是前端渲染呢?后端渲染和前端渲染又有什么区别呢? 最近在学习Vue的时候接触到了这个话题,我觉得还挺有意思的,所以写下来,记下来. 一.什么是后端渲染? 我们都知道现在的网页都由 ...

前端ssr跟ssg的区别

前端ssr跟ssg的区别相关推荐

最新文章

热门文章