前端ssr跟ssg的区别

最新推荐文章于 2024-05-15 09:12:15 发布

被前端耽误的全能选手

最新推荐文章于 2024-05-15 09:12:15 发布

阅读量4k

点赞数 1

分类专栏：前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_45777332/article/details/128904099

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前端渲染方案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：

搜索引擎友好，因为它的内容在服务器端渲染，可以被搜索引擎爬取到。

加载速度快，因为第一次渲染在服务器端完成，客户端只需要加载预渲染的 HTML。

可以使用任意的 JavaScript 框架，因为它支持客户端 JavaScript 框架。

SSG：

部署方便，只需要静态文件，可以直接部署在任何 Web 服务器上。

更快的构建速度，因为没有在运行时进行渲染，可以在预先生成静态文件。

资源开销小，因为它不需要使用服务器资源进行渲染，可以节省资源。

缺点：

SSR：

服务器资源需求高，因为需要在服务器端渲染每个请求，所以服务器需要充足的资源。

编写复杂的代码，因为它需要在服务器端和客户端实现。

缓存困难，因为每个请求都需要渲染。

SSG：

搜索引擎

被前端耽误的全能选手

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
前端ssr跟ssg的区别

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

扫一扫

专栏目录

前端ssr跟ssg的区别

“相关推荐”对你有帮助么？