前端渲染方案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 = [] } = props
return (
<>
<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：文章来源：https://www.toymoban.com/news/detail-485208.html
搜索引擎友好，因为它的内容在服务器端渲染，可以被搜索引擎爬取到。
加载速度快，因为第一次渲染在服务器端完成，客户端只需要加载预渲染的 HTML。
可以使用任意的 JavaScript 框架，因为它支持客户端 JavaScript 框架。
SSG：
部署方便，只需要静态文件，可以直接部署在任何 Web 服务器上。
更快的构建速度，因为没有在运行时进行渲染，可以在预先生成静态文件。
资源开销小，因为它不需要使用服务器资源进行渲染，可以节省资源。
缺点：
SSR：
服务器资源需求高，因为需要在服务器端渲染每个请求，所以服务器需要充足的资源。
编写复杂的代码，因为它需要在服务器端和客户端实现。
缓存困难，因为每个请求都需要渲染。
SSG：文章来源地址https://www.toymoban.com/news/detail-485208.html
搜索引擎
到了这里，关于前端ssr跟ssg的区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
