前端渲染方案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：
搜索引擎
