静态部署

静态部署的前提是，你的网站是静态的，在代码中没有使用特定的server api，具体可以参考动态渲染, 该章节列出了这些特殊的server api的场景。

如果您的网站是静态的，那么您可以使用静态部署

1. 首先，在 next.config.js 中配置output为export模式，表示静态导出资源。
2. 将输出的资源部署到静态服务器上，比如nginx，简单配置如下：

http {
    map $sent_http_content_type $cache_control {
        ~.*html 'no-cache, no-store';
        ~.*(css|javascript) 'max-age=31536000';
        default 'no-cache';
    }

    server {
        # 开启gzip压缩
        gzip        on;
        gzip_min_length 10k;
        gzip_http_version 1.1;
        gzip_buffers 32 4k;
        gzip_types  *;

        # 我们需要将seo相关的静态资源放在根路径下，否则无法被搜索引擎收录
        location ~ ^/(robots.txt|sitemap.xml) {
            rewrite /(.*) /prefix/$1 break;
            proxy_pass http://localhost:3000;
        }

        location /prefix/ {
            add_header Cache-Control $cache_control;
            alias /home/nginx/project/dist/;
        }
    }
}

map $sent_http_content_type $cache_control 其实是使用了nginx的变量，用于控制缓存，上述是http cache的最佳配置，可以放心使用。 简单介绍一下，如果请求的资源是html，那么将缓存设置为no-cache, no-store，表示不缓存; css、js资源设置为max-age=31536000，即缓存一年。

可能有的朋友会问为什么这么缓存呢？首先，需要知道的是，尽可能的使用http强缓存可以减少网络传输的损耗，但是不能无限制使用强缓存，如果资源更新了，那么会导致浏览器无法获取到最新的资源。

那么如何尽可能解决http强缓存这个问题呢？很简单，html资源始终不缓存，css、js资源缓存一年即可。当html资源更新了，那么浏览器会去请求最新的html资源，然后html会间接请求最新的css、js资源，因为css、js文件每次构建都会生成一个唯一的hash，只要确保了html是最新的，那么css、js资源也一定是最新的。这样就可以解决http强缓存的问题。

nginx其实还有很多其他的优化配置，比如http2、proxy cache、负载均衡等，这里就不一一介绍了，后续如果有读者感兴趣，我会单独写一篇文章介绍。