静态网站生成页面（SSG）与非SSG页面加缓存相比的优势是什么？

静态网站生成页面（SSG）与非SSG页面加缓存相比的优势主要体现在以下几个方面：

1. 性能优化：SSG页面在构建过程中会生成静态HTML文件，这些文件可以直接被服务器发送给客户端，无需再动态生成页面。相比之下，非SSG页面需要在每次请求时动态生成页面，加上缓存后仍需要一定的服务器计算和数据库查询时间，因此SSG页面加载速度更快。

2. 减轻服务器负载：SSG页面在构建过程中已经生成了所有页面，无需服务器动态生成页面，减轻了服务器的计算负担。而非SSG页面每次请求都需要服务器动态生成页面，对服务器资源的消耗更大。

3. 更好的缓存策略：虽然非SSG页面也可以加缓存，但是由于每次请求都需要服务器动态生成页面，缓存的效果可能不如SSG页面。SSG页面生成的静态HTML文件可以通过缓存策略直接被客户端缓存，减少了对服务器的请求，提高了页面访问速度。

下面是一个使用SSG的示例：

// 使用Node.js和EJS模板引擎生成静态HTML文件
const fs = require('fs');
const ejs = require('ejs');

// 要生成的页面数据
const data = {
  title: 'My Static Website',
  content: 'Welcome to my static website!'
};

// 使用EJS渲染模板
ejs.renderFile('template.ejs', data, (err, str) => {
  if (err) {
    console.error(err);
    return;
  }

  // 将渲染结果保存为静态HTML文件
  fs.writeFile('index.html', str, (err) => {
    if (err) {
      console.error(err);
      return;
    }

    console.log('Static HTML file saved!');
  });
});

在以上示例中，我们使用Node.js和EJS模板引擎生成静态HTML文件。首先，我们定义了要生成的页面数据data，包括页面的标题和内容。然后，我们使用ejs.renderFile方法将数据渲染到模板template.ejs中，得到最终的HTML字符串。最后，我们使用fs.writeFile方法将HTML字符串保存为静态HTML文件index.html。

通过这种方式，我们可以在构建过程中生成所有页面的静态HTML文件，并直接将这些文件部署到服务器上。客户端请求页面时，服务器可以直接发送这些静态HTML文件，无需再动态生成页面，提高了页面加载速度和服务器性能。